How to add an attribute:

close icon
Hey! Give us some feedback here.
Visual

Code Highlight

Display custom code (HTML, CSS, JS or any other language) with syntax highlighting.

1,238,354

loads per month

Step #1

Copy the Solution <script> and paste into the <head> of your page

copy icon
Copy Script
Step #2

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.

navigator arrow
COde
I want this
embed icon

Embed Block

or
div block icon

Parent Wrapper

element to hold my code
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-codehighlight-element
copy icon
Value
code
copy icon
Check live example here
This attribute is placed on the code that you want to highlight. *Make sure you follow the important and required steps below.*

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

This will apply Code Highlight to this embed instance. Useful for applying one or a few Code Highlight instances.

Option 2 - Apply to any parent element wrapping the HTML Embed block(s):

This can be a Rich Text element, a div block, or even the <body> of the page. Any <code> tags that are found inside this parent element will have Code Highlight applied.
hwo to add codehighlight attributes to a richtext element

Option 3 - Apply to the <pre> or <code> tags that wrap your code snippet

This will apply Code Highlight to this instance.

* Important and required steps for your code

1. The code must be wrapped between <pre><code>   YOUR_CODE   </code></pre> tags.
2. All < symbols inside the code must be escaped. These are found in the opening and closing <script> or <style> tags.
You can replace the < character with &lt; or &#60;
copy icon
Copy code example

<pre><code> &lt;script> YOUR_CODE &lt;script> </code></pre>

This is what your HTML Embed Code should look like

And it will be highlighted like this on the published page

Need to customize the colors and theme of the highlight colors? The option below give flexible styling options.
navigator arrow
Option
THEME
I want to customize the colors and theme of the syntax highlight colors
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-codehighlight-theme
copy icon
Value
THEME_NAME
copy icon
Customize the theme (colors) of the code syntax highlighting.

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.

Multiple snippets:

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.
Where?
Add to element with fs-codehighlight-element = "code"

Our favorite themes

highlightjs webflow theme
Name
fs-codehighlight-theme
copy icon
Value
webflow
copy icon
highlightjs a11y dark theme
Name
fs-codehighlight-theme
copy icon
Value
a11y-dark
copy icon
highlightjs a11y light theme
Name
fs-codehighlight-theme
copy icon
Value
a11y-light
copy icon
highlightjs apathy theme
Name
fs-codehighlight-theme
copy icon
Value
base16/apathy
copy icon
highlightjs black metal theme
Name
fs-codehighlight-theme
copy icon
Value
base16/black-metal
copy icon
highlightjs grayscale dark theme
Name
fs-codehighlight-theme
copy icon
Value
base16/grayscale-dark
copy icon
highlightjs grayscale light theme
Name
fs-codehighlight-theme
copy icon
Value
base16/grayscale-light
copy icon
highlightjs gruvbox light theme
Name
fs-codehighlight-theme
copy icon
Value
base16/gruvbox-light-hard
copy icon
highlightjs harmonic dark theme
Name
fs-codehighlight-theme
copy icon
Value
base16/harmonic16-dark
copy icon
highlightjs nebula theme
Name
fs-codehighlight-theme
copy icon
Value
base16/nebula
copy icon
highlightjs icy dark theme
Name
fs-codehighlight-theme
copy icon
Value
base16/icy-dark
copy icon
highlightjs sandcastle theme
Name
fs-codehighlight-theme
copy icon
Value
base16/sandcastle
copy icon
highlightjs vuclan theme
Name
fs-codehighlight-theme
copy icon
Value
base16/vulcan
copy icon
highlightjs woodland theme
Name
fs-codehighlight-theme
copy icon
Value
base16/woodland
copy icon
highlightjs googlecode theme
Name
fs-codehighlight-theme
copy icon
Value
googlecode
copy icon
highlightjs gradient dark theme
Name
fs-codehighlight-theme
copy icon
Value
gradient-dark
copy icon

Do you want more choices? Check out all the available HighlightJS themes.

Working examples

See this solution working live in this Webflow project.

Example
Code Highlight
Copy and paste this example directly on Webflow
copy icon
Copy this example

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.

<script>
  /**
   * Writes the current year to all elements that match the selector.
   */
  function setCurrentYear() {
    const YEAR_ELEMENTS_SELECTOR = '[fs-hacks-element="year"]';

    const yearElements = document.querySelectorAll(YEAR_ELEMENTS_SELECTOR);
    const currentYear = new Date().getFullYear().toString();

    yearElements.forEach((yearElement) => {
      yearElement.textContent = currentYear;
    });
  }
  
  document.addEventListener('DOMContentLoaded', setCurrentYear);
</script>

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.

No FAQ items found yet. Join Finsweet Community on Slack if you have any question related to this solution.

Developer documentation

external link icon

Next time implement inside Webflow

external link icon
Subscribe

Sign up for future releases!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.