Inline preformatted text (`<code>` or `<pre>`) in rich text elements

Design help General
1

Is it possible to format a span of text in a rich text element so it looks like computer code/preformatted text? I see there’s support for bold, italics, superindex, subindex, and headings, but not for preformatted text.

2 Likes
2

I think it is possible to make it look like a code (to some extent), but just by changing the font and styling.

One another option is to use Embed block, where you can place custom code like <code> and <pre>

And in more advance way you can use a Syntax highlighter library like https://prismjs.com/

3

Thanks for your reply @abirana , however it’s not very helpful.

The rich text element only provides a bunch of formatting options: bold, italics, superindex, subindex, and headings. I can’t change the font and styling of a single word inside of it.

About the HTML Embed block, it’s a bit limiting because (1) I’d need to use it for every paragraph containing a word I’d want to turn into preformatted text, and (2) such paragraphs would not be easily editable from inside the Rich Text editor.

About a Syntax highlighter like Prism.js, we’re doing something like that with some hacky JavaScript for code blocks, but I thought there ought be a simpler solution.

I guess I’ll have to hack something.

4

Oh for the first one I didn’t mean it for the Rich text element, I meant to have a structure with a DIV as a parent and inside you display your code with text block on paragraph element.

Rest of the thing I guess you’ve already figured it out.

5

@astrojuanlu - do you have any details on the solution you ended up putting place? I am trying to find a solution for a similar issue. My thought is I’m going to have to use one solution for inline code snippets and another solution for full code blocks.

For Code Blocks / Syntax Highlighting
I found this video I am working on implementing this weekend. It utilizes prism.js being loaded into your site and then code embeds in your CMS posts.

For In-Line Code Snippets
This plugin from refokus allows you to add additional markup to your Rich Text fields for CMS posts. For example, you could do something like [.code-snippet]<My Code Here>[.code-snippet] to apply a code snippet class to inline text.

I do worry about loading all these third party scripts to get my code styled correctly. I wish Webflow had some native support for <code> & <pre> tags.

1 Like