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:

• olddomain.com

• newdomain.com

• www.newdomain.com

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, olddomain.com was identified as undefined -

<code class="hljs language-undefined">olddomain.com</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;

Here, the blue items were recognized as makefile syntax, while the pink items were undefined and had my own custom styling applied correctly.

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

Yes;

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

Maybe;

• Option to theme, by syntax

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