search
Buy Us a Beer!Community ForumMicro-Consulting

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

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

Example, olddomain.com was identified as undefined -

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

hashtag
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

hashtag
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

Last updated