Streaming live at 10am (PST)

CMS Blog - Code Highlighting and Styling Possible?


#1

Hey @PixelGeek, @Waldo (and all the other lovely webflow pros out there)
Maybe you can tell me if this is possible...

Here’s my goal: a CMS blog that shows code examples with styling.
(My preferred style would look like “default” or “desert” on this page https://rawgit.com/google/code-prettify/master/styles/index.html )

I’m creating a blog that will have multiple dev authors, and I’m trying to come up with an easy solution for them to show their code examples in their tutorial blog posts.

Here’s my vague train of thought on how to do this:

If I...
1. created a text field in the dev blog CMS collection, (where the blog authors would put their code example)
2. then in the dev blog template I added an html block and referenced the CMS dev blog text field with the code example (...here’s where I get lost)
3. could I then use html/css styling in the html block and have it style the code example text?

If you have ideas for alternative ways to accomplish this, OR if you think I’m on the right track... any helpful hints would be appreciated! The more detailed the hints the more appreciated. :wink:

https://preview.webflow.com/preview/superlamegames?preview=90060eb8eaf36530a964353fa712b22f (all current content on the blog is FPO.)

Thank you!


#2

Having custom code highlighting in-between other content between rich-text editor field in the CMS could be done as follows:

1) Code has to be placed between {{CODE}} and {{ENDCODE}} tags, both of which has to be on their own single line (so that we can use script to grab that chunk of text and wrap it with highlighting stuff). Example:

{{CODE}}
<div class="text">
  This is a test
</div>
<div data-val="attribute">
  <span id="oops">Nothing to see</span>
</div>
{{ENDCODE}}

Example image of how it may look like in the CMS Editor richtext field:

This is how it may look like on the published site. Padding between box and code can be increased, styles/font/font-sizes can be changed:

2) The highlight script will auto-detect the code style (html/xml/css/javascript). If you need others it should be possible as well.

3) You can pick a highlight style from here https://highlightjs.org/static/demo/

Of course, this is all in theory only. If you need a developer to custom code this for you, we have a freelance category for that.


Alternatively, there are already other topics on this where you host your script elsewhere and embed it in the richtext field.


#3

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.