Code Formatting ❺πŸ§ͺ

Manage code formatting in your Webflow hosted page.

In early 2024, Webflow added the ability to style specific text as code.

With in a rich text block - static, or CMS - you can select specific text, and format it as code ( on the same toolbar that you format bold and italics ), and Webflow will style it. This works in the designer and the editor as well, and with static or CMS-bound content.

Here's a screenshot containing 5 examples;

  • http:

  • https:




Auto-Detection and Auto-Formatting

Webflow attempts to auto-detect the syntax of the language, and styles it according to a language-specific stylesheet.

Example, https: was identified as a makefile -

<code class="hljs language-makefile"><span class="hljs-section">https:</span></code>

Example, was identified as undefined -

<code class="hljs language-undefined"></code>

Custom Formatting

Currently, Webflow provides limited styling control over these code items, in that you can style undefined items only.

You can style code items as a sub-element of your classed rich text block;

However, this styling will ONLY apply to code elements that Webflow identifies as undefined. Code which is recognized as another type will have Webflow's own default formatting applied instead.

Here's that same example with custom styling applied;

To Research

At this point we do not know;

  • Whether we can specify the language manually

  • Whether we can control styling in greater detail, e.g. for makefiles, js, and so on

  • Themes, etc.

  • Whether the styling is aware of e.g. background color, for contrast

  • Differences between static and CMS-bound control

SA5 Opportunity


  • Overriding all to "undefined" so they match document style.


  • Option to theme, by syntax

  • Possibility of controlling the language applied to a specific code element

Last updated