Streaming live at 10am (PST)

Syntax highlighting


#1

I want to use webflow to build a style guide with code demos. (example: http://ux.mailchimp.com/patterns/forms) 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?


Pre and code tags
#2

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: http://forum.webflow.com/t/posting-guidelines-for-the-need-help-category/8094

Thanks in advance! smile
Cheers,
Dave


#3

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


#4

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

Cheers,
Dave


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

#10
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

#11

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