Code Syntax Highlighting with highlight.js

Do you publish code to the web that is not supposed to be executed? Are you like me and like to publish coding tutorials and need to make sure that the code is legible, formatted, and ✨beautiful ✨? This article will explain in six easy steps how to do it with two HTML tags and the highlight.js library.

highlight.js gives you A TON of syntax highlighting styles to choose from

6 Easy Steps:

  1. Add an embed to your site or whatever allows you to write HTML within your text editor.
  2. Add <pre> and <code> tags as shown in the code below.
  3. Import the highlight.js library from CDN and execute the hljs.highlightAll() function (see usage) . Copy/paste it into the before </body> tag section of Webflow.
  4. Choose your theme from the demos‍
  5. Import the CSS for your theme by adding the <link> tag to the <head> section. Don’t forget to add .min.css to the end of the theme name. In the example below, change the text ‘default’ to the name of the theme you want to use as it appears on the github repository in src > styles
  6. Publish and win!
If you want to display HTML, be sure to escape your HTML. I use freeformatter.
<!-- Step 2 -->
<pre>
  <code>
  </code>
</pre>
<!-- Step 3 -->
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.6.0/build/highlight.min.js">
</script>
<script>
  hljs.highlightAll();
</script>
<!-- Step 5 -->
<link rel="stylesheet"
href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.6.0/build/styles/default.min.css">
If you want more help, here's a video where I show you how I did it on this website: