Code Highlight - Attributes by Finsweet

The fs-codehighlight attribute integrates highlight.js into your Webflow project, providing automatic syntax highlighting for code blocks with support for 190+ languages and 240+ themes.

How It Works

The attribute automatically:

Detects <code> elements in your page
Applies syntax highlighting using highlight.js
Loads your chosen theme stylesheet
Includes a custom “webflow” theme that matches Webflow’s design system
Waits for fs-inject to ensure proper loading order

Installation

<script src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-codehighlight@2/codehighlight.js"></script>

Basic Usage

Simple Code Block

Add the fs-codehighlight-element="code" attribute to any element containing <code> tags:

<div fs-codehighlight-element="code">
  <pre><code class="language-javascript">
function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet('World');
  </code></pre>
</div>

Direct on Code Element

You can also apply the attribute directly to the <code> element:

<pre>
  <code 
    fs-codehighlight-element="code"
    class="language-python"
  >
def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)

print(fibonacci(10))
  </code>
</pre>

The attribute searches for <code> elements within the marked element, or highlights the element itself if it’s already a <code> tag.

Themes

Using a Theme

Specify a theme using the fs-codehighlight-theme attribute:

<div 
  fs-codehighlight-element="code"
  fs-codehighlight-theme="github-dark"
>
  <pre><code class="language-javascript">
    // Your code here
  </code></pre>
</div>

Available Themes

The attribute loads themes from the highlight.js CDN. Popular themes include:

<div 
  fs-codehighlight-element="code"
  fs-codehighlight-theme="github-dark"
>

Webflow Theme

A custom theme designed to match Webflow’s design system:

<div 
  fs-codehighlight-element="code"
  fs-codehighlight-theme="webflow"
>
  <pre><code class="language-javascript">
    // Highlighted with Webflow theme
  </code></pre>
</div>

The Webflow theme includes:

Dark background (#2b2b2b)
Customized syntax colors for keywords, strings, functions, etc.
Custom scrollbar styling
Built-in copy button styles
Responsive code title styles

If no theme is specified, you’ll need to add your own CSS styles or include a highlight.js theme manually.

Theme URL Format

Themes are loaded from the CDN:

https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@{version}/build/styles/{theme}.min.css

The attribute automatically uses the correct highlight.js version (currently 11.11.1).

Language Support

Specifying Languages

Use the language-* class on the <code> element:

<code class="language-javascript">
  const hello = 'world';
</code>

Auto-Detection

If no language is specified, highlight.js will attempt to auto-detect:

<pre><code fs-codehighlight-element="code">
  // Language will be auto-detected
  function autoDetect() {
    return true;
  }
</code></pre>

For best results, always specify the language class. Auto-detection may not always be accurate.

Supported Languages

The attribute uses highlight.js “common” bundle which includes:

JavaScript, TypeScript
Python, Ruby, PHP
HTML, XML, CSS, SCSS
JSON, YAML
Bash, Shell
C, C++, C#, Java
Go, Rust, Swift
SQL, GraphQL
Markdown
And many more…

View all supported languages

Advanced Examples

Multiple Code Blocks

<div class="documentation">
  <div fs-codehighlight-element="code" fs-codehighlight-theme="github-dark">
    <h3>JavaScript Example</h3>
    <pre><code class="language-javascript">
const api = async () => {
  const response = await fetch('/api/data');
  return response.json();
};
    </code></pre>
  </div>
  
  <div fs-codehighlight-element="code" fs-codehighlight-theme="github-dark">
    <h3>Python Example</h3>
    <pre><code class="language-python">
import requests

def get_data():
    response = requests.get('/api/data')
    return response.json()
    </code></pre>
  </div>
</div>

With Custom Styling

<div 
  fs-codehighlight-element="code"
  fs-codehighlight-theme="atom-one-dark"
  class="code-block"
>
  <div class="code-header">
    <span class="code-language">JavaScript</span>
    <button class="copy-btn">Copy</button>
  </div>
  
  <pre><code class="language-javascript">
const example = () => {
  console.log('Custom styled code block');
};
  </code></pre>
</div>

.code-block {
  border-radius: 8px;
  overflow: hidden;
  margin: 20px 0;
}

.code-header {
  display: flex;
  justify-content: space-between;
  padding: 12px 16px;
  background: #1e1e1e;
  border-bottom: 1px solid #333;
}

.code-language {
  color: #888;
  font-size: 12px;
  text-transform: uppercase;
}

Inline Code

For inline code snippets:

<p>
  Use the 
  <code 
    fs-codehighlight-element="code" 
    class="language-javascript"
  >const</code> 
  keyword to declare variables.
</p>

With Line Numbers

Combine with a line numbers library or CSS:

<div fs-codehighlight-element="code" fs-codehighlight-theme="monokai">
  <pre class="line-numbers"><code class="language-javascript">
function calculateTotal(items) {
  return items.reduce((sum, item) => {
    return sum + item.price;
  }, 0);
}

const total = calculateTotal(cartItems);
console.log(`Total: $${total}`);
  </code></pre>
</div>

Integration with CMS

Using Rich Text Fields

Wrap CMS rich text fields that contain code:

<div 
  fs-codehighlight-element="code"
  fs-codehighlight-theme="github-dark"
>
  <div class="w-richtext">
    {cms-content-field}
  </div>
</div>

Dynamic Language

Use CMS fields to set the language:

<pre><code 
  fs-codehighlight-element="code"
  class="language-{cms-language-field}"
>
{cms-code-field}
</code></pre>

Technical Details

Initialization Flow

Waits for Webflow to be ready
Waits for fs-inject attribute to load (if present)
Finds all elements with fs-codehighlight-element="code"
Checks for theme attribute on any code element
Imports the theme stylesheet (if specified)
Applies syntax highlighting to all <code> elements

Theme Loading

Themes are dynamically imported:

if (theme === 'webflow') {
  // Use built-in Webflow theme
  const tag = document.createElement('style');
  tag.innerHTML = WEBFLOW_THEME;
  document.head.append(tag);
} else {
  // Load from CDN
  const themeURL = HIGHLIGHTJS_THEME_URL(theme);
  const tag = document.createElement('link');
  tag.setAttribute('rel', 'stylesheet');
  tag.setAttribute('href', themeURL);
  document.head.append(tag);
}

Code Element Detection

const codeElements = referenceElements.reduce((acc, referenceElement) => {
  const elements = referenceElement.tagName === 'CODE' 
    ? [referenceElement] 
    : referenceElement.querySelectorAll('code');
  
  acc.push(...elements);
  return acc;
}, []);

Best Practices

Use Semantic HTML

Always wrap <code> in <pre> for block-level code:

<pre><code class="language-javascript">
  // Code block
</code></pre>

Use <code> alone for inline code:

<p>Use <code>Array.map()</code> to transform arrays.</p>

Specify Language Classes

<!-- Good -->
<code class="language-python">print('Hello')</code>

<!-- Avoid -->
<code>print('Hello')</code>

Escape HTML in Code

When showing HTML code, escape special characters:

<code class="language-html">
&lt;div class="container"&gt;
  &lt;h1&gt;Title&lt;/h1&gt;
&lt;/div&gt;
</code>

Choose Appropriate Themes

Light themes: github, vs, stackoverflow-light
Dark themes: github-dark, atom-one-dark, monokai, webflow
Match your site’s design system

Performance

Only apply the attribute to pages with code blocks
Theme stylesheets are loaded once and cached
Use specific language classes to improve highlighting accuracy

Troubleshooting

Code Not Highlighting

Verify the fs-codehighlight-element="code" attribute is present
Check that <code> elements exist within the marked element
Ensure the attribute script is loaded
Check browser console for errors

Wrong Language Detection

Always specify the language class: class="language-javascript"
Avoid relying on auto-detection for accuracy

Theme Not Loading

Verify the theme name is spelled correctly
Check network tab for 404 errors on theme CSS
Try the built-in webflow theme to test
Ensure the theme exists in the highlight.js repository

Styles Conflicting

Theme styles may conflict with Webflow’s global styles
Use more specific CSS selectors to override
Consider using the webflow theme which is designed for compatibility

Webflow Theme Reference

The built-in Webflow theme provides:

pre {
  background-color: #404040;
  color: #d2d2d2;
  padding: 1rem;
  border-radius: 0.375rem;
}

.hljs {
  background-color: #2b2b2b;
  padding: 1rem;
}

/* Syntax colors */
.hljs-keyword { color: #c792ea; }
.hljs-string { color: #c3e88d; }
.hljs-function { color: #82aaff; }
.hljs-comment { color: #546e7a; }
/* ... and many more */

It also includes styles for:

Custom scrollbars
Copy code buttons (.copyCodeBtn)
Code snippet headers (.snippetHeader)
Code titles (.codeTitle)

Documentation Index

​How It Works

​Installation

​Basic Usage

​Simple Code Block

​Direct on Code Element

​Themes

​Using a Theme

​Available Themes

​Webflow Theme

​Theme URL Format

​Language Support

​Specifying Languages

​Auto-Detection

​Supported Languages

​Advanced Examples

​Multiple Code Blocks

​With Custom Styling

​Inline Code

​With Line Numbers

​Integration with CMS

​Using Rich Text Fields

​Dynamic Language

​Technical Details

​Initialization Flow

​Theme Loading

​Code Element Detection

​Best Practices

​Use Semantic HTML

​Specify Language Classes

​Escape HTML in Code

​Choose Appropriate Themes

​Performance

​Troubleshooting

​Code Not Highlighting

​Wrong Language Detection

​Theme Not Loading

​Styles Conflicting

​Webflow Theme Reference

How It Works

Installation

Basic Usage

Simple Code Block

Direct on Code Element

Themes

Using a Theme

Available Themes

Webflow Theme

Theme URL Format

Language Support

Specifying Languages

Auto-Detection

Supported Languages

Advanced Examples

Multiple Code Blocks

With Custom Styling

Inline Code

With Line Numbers

Integration with CMS

Using Rich Text Fields

Dynamic Language

Technical Details

Initialization Flow

Theme Loading

Code Element Detection

Best Practices

Use Semantic HTML

Specify Language Classes

Escape HTML in Code

Choose Appropriate Themes

Performance

Troubleshooting

Code Not Highlighting

Wrong Language Detection

Theme Not Loading

Styles Conflicting

Webflow Theme Reference