Code Highlight

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

Get Started

1,204,592

loads per month

Step #1

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

Copy Script

Scroll horizontally to see documentation

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.

COde

I want this

Embed Block

Parent Wrapper

element to hold my code

See how it works

Add this attribute

Description

Name

fs-codehighlight-element

Value

code

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 < or <

Copy code example

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.

Option

THEME

I want to customize the colors and theme of the syntax highlight colors

See how it works

Add this attribute

Description

Name

fs-codehighlight-theme

Value

THEME_NAME

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

Name

fs-codehighlight-theme

Value

webflow

Name

fs-codehighlight-theme

Value

a11y-dark

Name

fs-codehighlight-theme

Value

a11y-light

Name

fs-codehighlight-theme

Value

base16/apathy

Name

fs-codehighlight-theme

Value

base16/black-metal

Name

fs-codehighlight-theme

Value

base16/grayscale-dark

Name

fs-codehighlight-theme

Value

base16/grayscale-light

Name

fs-codehighlight-theme

Value

base16/gruvbox-light-hard

Name

fs-codehighlight-theme

Value

base16/harmonic16-dark

Name

fs-codehighlight-theme

Value

base16/nebula

Name

fs-codehighlight-theme

Value

base16/icy-dark

Name

fs-codehighlight-theme

Value

base16/sandcastle

Name

fs-codehighlight-theme

Value

base16/vulcan

Name

fs-codehighlight-theme

Value

base16/woodland

Name

fs-codehighlight-theme

Value

googlecode

Name

fs-codehighlight-theme

Value

gradient-dark

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