Display custom code (HTML, CSS, JS or any other language) with syntax highlighting.
Implement in Webflow
Apply attributes to elements on the page
Below is a list of elements and options that are used to create this Attributes functionality. Click any of them to see more details.
There are several options for applying this attribute on the page. There may be a workflow benefit in one of these options based on your setup.
Option 1 - Apply to the Webflow HTML Embed element (CMS or static):
Option 2 - Apply to any parent element wrapping the HTML Embed block(s):
Option 3 - Apply to the <pre> or <code> tags that wrap your code snippet
* Important and required steps for your code
You can replace the < character with < or <
This is what your HTML Embed Code should look like
And it will be highlighted like this on the published page
Applying a theme to Code Highlight is required.
There is a list of available themes for you to choose from below. You also have the option of writing your own theme with css. It is recommended that you use a theme from the list below.
Use the theme name of the theme as the value of the attribute.
If there are multiple code snippets on the page, this attribute only needs to be applied once. It is not required to add this to each instance.
There can only be one theme applied to per page. It is not possible to apply multiple themes to a page.
Our favorite themes
Do you want more choices? Check out all the available HighlightJS themes.
See this solution working live in this Webflow project.
What’s a Rich Text element?
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
Static and dynamic content editing
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
How to customize formatting for each rich text
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
Frequently Asked Questions
Everything you need to know about this attributes solution.