Use Highlight.js to Properly Style Code

Highlight.js allows you to have custom styled and properly formatted code on your website.

Copy Code

<!--This code calls on the Highlight.js library, and styles the <code> embed. Paste this into an HTML embed in the HEADER of your website. You can find other themes to style your embed at https://highlightjs.org/-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/styles/atom-one-dark.min.css" integrity="sha256-GA29iW/iYj9FcuQQktvW45pRzHvZeFfgeFvA4tGVjpM=" crossorigin="anonymous" />

<style>
code {
  padding: 15px 30px 30px 30px !Important;
  margin: 0px !Important;
  width: 100%;
  border-radius: 16px;
}

.w-embed:after, .w-embed:before {
  display: none !important;
}
</style>

<!--This is for the code boxes. Paste this into an HTML embed in the FOOTER of your website.-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js" integrity="sha256-1zu+3BnLYV9LdiY85uXMzii3bdrkelyp37e0ZyTAQh0=" crossorigin="anonymous"></script>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
document.querySelectorAll('pre code').forEach((block) => {
hljs.highlightBlock(block);
});
});
</script>

Want your code to look similar to the code you see here on this page? Let me introduce you to Highlight.js.

Highlight.js is a JavaScript library with the sole purpose of making code look better on websites. It supports more languages than you'd likely ever need, and has hundreds of different styles and colors to choose from.

How to use this code in Webflow:

There's a few steps to setting up Highlight.js on your website.

Copy the code you see above and paste it into an HTML embed at the top of your website navigator in Webflow.
Next you'll need to read the comments I've made in the code. There's a portion of this code that needs to be copied and pasted in a separate HTML embed at the footer of your website. Once you've copied those particular scripts to and pasted them in the footer embed, you can remove them from the header embed.
After that, you'll need to create a third HTML embed that has the actual code you want to show off on your webpage, so create that embed where ever you need it on the page.
Paste the code you want to show off inside the HTML embed you just created.
If your code includes HTML tags in it (like <script>, <link>, <style> etc...) you'll need to use the HTML equivalents as a substitute so the code doesn't actually activate. For example: the "<" and ">" need to be replaced with "<" and ">" respectively, giving you this: " <script> ".
You'll want to surround the code in two different tags, the <pre> and <code> tags. The order would look like this:

<pre>
   <code>
      The code you want to display goes here
   </code>
</pre>

Finally, you'll want to make sure you add the class 'highlight' and 'pre-shadow' to your <pre> tag. You'll also want to add a class to your <code> tag. The code tag class depends on what language you're showing off. If you're using CSS, then add the class of 'css'. If you're using JavaScript, write 'js'. If you're using more than one language in your code, give it all the classes for those languages. It should look something like this:

<pre class="highlight pre-shadow">
   <code class="css">
      The code you want to display goes here
   </code>
</pre>