Add Syntax Highlighting to Webflow CMS
.png)
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:
<!-- 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>
Or you could add a syntax highlighted section and display that code like this:
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.
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.
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.
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.
Once you've added your code, publish your site. 🤜🤛
