Syntax highlighting

[maikelkoopman]

I want to use webflow to build a style guide with code demos. (example: Form Elements | Mailchimp) 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?

[cyberdave (Dave S.)]

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 - General - Forum | Webflow

Thanks in advance!
Cheers,
Dave

[maikelkoopman]

@cyberdave
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.

https://preview.webflow.com/preview/ts24-styleguide?preview=2b9a37dad8ea4b75f4e169dfd4d8ff2a

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.

[cyberdave (Dave S.)]

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

Cheers,
Dave

[maikelkoopman]

<pre><code class="language-markup"><a href="#" class="button"> button </a></code></pre>

[cyberdave (Dave S.)]

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! :)

Cheers,
Dave