Webflow

Add syntax highlighting to Webflow CMS

How to add syntax highlighting to your Webflow Website and CMS.

This tutorial shows how to add PrismJS, a javascript plugin syntax highlighting, to your Webflow website. The video goes into more detail, but I've included a little extra info, links and code snippets below for your convenience.

Why we need Syntax Highlighting

Sometimes on your website you want to show code and not render it. You could write out your code in a paragraph along side other text, but that can be extremely hard to read. For example, adding code directly into a paragraph would look something like this:

<a href="https://twitter.com/intent/tweet?url=[your URL path/{slug variable}]"
class=""
target="_blank"
title="Share on Twitter"
onclick="window.open('https://twitter.com/intent/tweet?text=' + encodeURIComponent(document.title) + ':%20 ' + encodeURIComponent(document.URL),'','width=600,height=800'); return false;">
Share on Twitter</a>

Or you could add a syntax highlighted section and display that code like this:

<!-- Twitter -->
<a  href="https://twitter.com/intent/tweet?url=[your URL path/{slug variable}]" 
	class=""
	target="_blank" 
	title="Share on Twitter" 
	onclick="window.open('https://twitter.com/intent/tweet?text=' + encodeURIComponent(document.title) + ':%20 '  + encodeURIComponent(document.URL),'','width=600,height=800'); return false;">
Share on Twitter</a>

Even on this seven line code example you can see it is much more legible. Now imagine if you had 30, 50 or 100 lines of code... having syntax highlighting is a game changer. This approach effectively allows you to write code that maintains the nice legibility you'd get from a development platform like Sublime Text.

Step 1: Add Syntax Highlighting to your Webflow Website

PrismJS

The PrismJS website has information on all of the styles, plugins and installation instructions.

https://prismjs.com/index.html

For simplicity, you can link to the libraries through a Content Delivery Network (CDN), link cdnjs: https://cdnjs.com/libraries/prism. This is the method shown in the video.

If you want to mimic exactly what I did in the video, here are the code snippets:

Inside <head> tag

This is the stylesheet for the Okaidia theme.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism-okaidia.min.css"/>

Before </body> tag

These are the CDN links for the core PrismJS file, as well as the Unescaped Markup, Toolbar and Copy to Clipboard plugins.

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/unescaped-markup/prism-unescaped-markup.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/toolbar/prism-toolbar.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>

Alternative Method

The method not shown in the video, which could provide better performance, requires hosting a javascript file on your own server or a CDN. To do this, you need to:

Use the PrismJS download feature on their homepage to create a single JS file with all of your javascript plugins
Save the file and host it on a server or CDN
Link to that file in the "Before </body> tag" section on your Webflow page

Step 2: Use Syntax highlighting in Webflow

Once you have PrismJS added to your site, you can start using it on whichever pages you've installed it. Add a custom code element to your page or in the rich text block of a collection item.

Without Unescaped Markup Plugin

If you have smaller, simpler bits of code, this approach will likely work fine. However, I ran into a few issues with this method and closing script tags </script>. These closing tags were not being displayed, so I added the Unescaped Markup plugin to resolve the issue.

<pre><code class="language-html"><script>

Code goes here
- Update the language to match your code.  
- For example, if using Javascript, the class would be "language-javascript"

</script></code></pre>

With Unescaped Markup Plugin

If your code is longer, more complex, or has closing script tags </script>, then this is the route you'll want to take. The only catch with this method is that you cannot have additional html comment tags . The plugin uses this tag to identify what code you want to highlight — so additional comment tags interfere with the plugin.

<pre><code class="language-markup"><!--

Code goes here

--></code></pre>

Once you've added your code, publish your site. 🤜🤛

Add syntax highlighting to Webflow CMS

More tutorials

15 documents you can automate without code

Airtable Tip - Structuring your Base with Helper Fields

Apple Automator - Live Photos to PNG in 2 Clicks

Troubleshoot images from Airtable to Docs