Streaming live at 10am (PST)

Code formatting in CMS editor


#1

Hi, just implemented CMS on my website to add a blog to it and am loving every aspect of it. The only issue I ran into is to include code styled text into the blog posts.

Since I'm using a rich text field for the post content manually importing the html using an import block is out of question.

I found a workaround by editing the styles for h6 tags to make them "look" like code styled text, but without the use of pre tags the styling still looks odd.

It would be awesome if the rich text field could support either "code" style or include markdown support.


#2

If you could share your published URL, I can suggest a custom JavaScript code to wrap your h6 with pre tags.


#3

Thanks @samliew! Here you can find where I got so far: http://netbeast-website.webflow.io/blog/how-to-quickly-create-a-notification-service-with-a-led-panel


#4

This is the code needed to wrap all h6 with pre

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

Then you need to insert custom styles for the pre:

<style>
pre {
  background: #4d4d4d;
}
.blog-post-inner-content pre h6 {
  overflow: initial;
}
</style>

#5

I tried your code. While it does indeed wrap the h6's in pre tags while maintaining the style, the spacing for the code still gets lost along the way (my main purpose with this was to avoid that issue), any idea on a workaround for that?


#6