I was recently tasked with the creation of a demo of HTML. In HTML, there’s a tag called the <div> tag. This tag is essentially a box, that can be customized. The demo needed to be simple enough for a beginner student to understand.

The premise of the demo is a sample piece of code and a result window. The code can also be modified to any user-inputted code and displayed. To attain this goal I found a few JS libraries. First, CodeJar is a small and lightweight code editor. It only has the basic bracket matching, and indention that’s needed for HTML. Second, Prism is the syntax highlighter for CodeJar.

The finished product is in GitHub here. It was made for Bit by Bit Coding, a registered non-profit. The deployment of it can be viewed on their website.