Syntax highlighting

I want to use webflow to build a style guide with code demos. (example: I cannot seem to just make a pre block in an embed and put html in there. The HTML code always gets rendered. Is there any way to accomplish this?

Hi @maikelkoopman, Can you please update your post with some more information so we can help you faster? Things like your read-only link, and screenshots of the elements in question really speed things up.

Posting guidelines can be found here: Posting Guidelines for the Design Help Category

Thanks in advance! :slight_smile:

Okay, ideally I want to create something like this:

In HTML you would use a <pre> tag to keep HTML code. But anything I enter in the design mode is automatically compiled by webflow. The only way I can now make this work is by putting it in a textarea as a placeholder text. If I can get it in normal <pre> wrapper, I can then use an external library like prism.js to highlight the syntax.

Navigate to “form elementen” for example. This is a kind of a blocker for me as code demos or part of what I need to deliver for this project.

Hi, can you paste your complete code you want to use as the example that are surrounded by <pre> tags?


<pre><code class="language-markup"><a href="#" class="button"> button </a></code></pre>
Hi @maikelkoopman, 

I was checking in to this, and it is not currently possible to use <pre> or <code> tags right now.  To style the code need a text element and styling like you have done, but syntax highlighting not possible yet for sites hosted in Webflow.

You can still update this after export, if you are exporting a site.

​I hope this helps. If not, please let me know – I'm happy to assist further! :)


This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.