How to add code block/preformatted text into Rich Text element in a Collection?

Design help General
1

I have a Collection of Articles and within an article, I have a Rich Text element, which includes technical documentation text. Is there a way to include a code block/preformatted text into it? So far, I only have the option to add text formatting, Headings, and Quotes.

I’ve included a link to the documentation page below. We’re trying to get the JSON code into code blocks, but currently have them in Quote blocks.

Here is my public share link: http://alpha-vertex-documentation.webflow.io/article/test-article

1 Like
2

With Webfow solely no, but with custom code I found a trick.

Look in this article, where sometimes snippets of code are shown within a RT:

I used custom code with pseudo element, and affected the H6 title as a trigger to display code as <pre>

The custom code says: “give that style to the first paragraph following a H6”

<style>
h6 + p { 
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 70px;
    border-left-style: dotted;
    border-left-width: 10px;
    border-left-color: rgba(0, 0, 0, 0.3);
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    background-color: rgba(255, 255, 255, 0.48);
    font-family: Inconsolata, monospace;
    color: rgb(36, 34, 32) !important;
    font-size: 16px;
    line-height: 23px;
}
</style>

I first designed my fake <pre> style in Webflow and grabbed the generated CSS with Chrome Inspector, then used it for my custom code. Paste the code in a custom code box at site level or at page level for the post template.

You won’t see the text as pre in forms in the designer CMS part or in the form of the editor, but if you edit your post inline in the editor it will show the style as you type. Just keep your code within a paragraph and it works. If you need to skip lines, do a shift+Enter instead of Enter.

4

Hi Dave,

Thank you for the quick response, but this particular fix looks like we would need to structure every item in the collection to display code/preformatted text in the same “outline/structure”, so I submitted a Wishlist topic request, as it feels like code blocks and tables throughout Collection Item text can be considered basic CMS functionality.

1 Like
5

Another thing I just remembered.

When you add something to a RT using the little flyout menu, the third icon is for Rich content.

Supposedly, you can embed there anything that the embed.ly service supports: Providers | Embedly

There are several code related services in the list, including codepen and pastebin.

1 Like
6

Hi @vincent! Do you think you may be able to show the flyout with a screenshot? All I get on RT flyout are text formatting options (see screenshot).

Thanks!

7

Sure.

You only need to click on the + sign when you jump to a new line while entering content in the RT.

Here’s a demo of it and I also added a demo for CodePen and Pastebin as you want to paste code.

http://vincent.polenordstudio.fr/snap/4uqjm.mp4

The live page is here : Staged examples of Manifest blog posts

Notice that under the two rich embeds, there’s a demo of my H6+pseudo element method.

1 Like
8

Thanks for the video @vincent–does that apply to the whole page template?

My difficulty is that I want to use the same page template for all our technical documentation (for consistent look/feel), but each article in the collection will have code blocks/preformatted code in different spots, as each article covers a different aspect of the product.

I guess the best example would be this Google technical documentation, where each article will look/feel the same, but the code blocks can be spread out in different places:

https://cloud.google.com/natural-language/docs/getting-started

In their documentation site, Quickstart and ‘Authenticating to the API’ look & feel the same, but the appearance of code snippets will be in very different places

This is my current template that we purchased through Webflow–so we have a Collection Item, which contains a Rich Text element (above the video wrapper), where all the text, random code snippets should essentially be going:

1057×743 128 KB