Encode HTML for display in blog content

What is this good for?

If you write blogs, technical articles, or courses in Webflow that contain code, syntax higlighting is essential to make them readable.

<div id="container">
  <textarea id="input"></textarea>
  <button id="convert-button" onclick="convert()">→</button>
  <textarea id="output"></textarea>
  <div id="result"></div>
</div>
<div id="output-copy-container">
  <button id="copy-button" onclick="copyToClipboard()">Copy to Clipboard</button>
</div> 

Webflow does not offer this feature natively, however the good folks at Finsweet have made Code Highlight available as a part of their Attributes tool collection.

When you use it, you must prepare your content properly, which is what this tool does.

Technical notes

Finsweet's Code Highlight uses highlightjs, which supports the ability to theme your highlighting as well.

Instructions and options are shown at the bottom of Finsweet's docs.

Unfortunately, I can not easily demonstrate those highlighting styles in this tool, or make them a selectable option due to the way Code Highlight works on page load. We do not have a way to invoke it on-demand to target your generated output, since the tool page has already loaded.

Fear not, your code will be pretty in your published page.

Future plans

Some things we might add in the future-

• The ability to display the code in its highlighted form, if we find a convenient way to re-invoke highlight.js.
• A theme selector so that you can try different styles.
• The ability to apply that theme to your clipboard content.

‍