How to Display Code in a Webflow post (vs WordPress)?

October 4, 2021

In Webflow, Blog posts allow adding embedded code. But since <pre> tag is not supported by default on Webflow, it has to be added a script into the Footer Area of Custome Code:

<script>
var Webflow = Webflow || [];
Webflow.push(function(){
var cWrap=$('<pre />');
$('h6').each(function(){
var o = $(this).next('h6').length;
$(this).replaceWith(cWrap).appendTo(cWrap);
if (!o) cWrap=$('<pre />');
});
});
</script>

And here is the styling code, added into Head Area of Custome Code

<style>
pre {
    background: #f4f4f4;
    font-size: 0.8rem;
    padding: 1.6em;
    overflow: auto;
    max-width: 100%;
    border: 1px solid #dedee3;
    white-space: pre;
}
.blog-post-inner-content pre h6 { overflow: initial; }
 </style>

Here is the result

Source of code: Webflow forum

For a WordPress post, it was much easier:

a) when displaying a short code snippet (like in this post) – I used simply <pre> tag & styled it without any other change.

b) when displaying lots of code, a WordPress plugin is recommended to provide a more readable code to the readers: Enlighter & Code Prettify are 2 free options in the WordPress repository.