7.0: Code Blocks and Syntax Highlighting


#1

You’ve always been able to use <pre> to add unstyled code blocks to your pages, but soon you’ll be able to do this:

And here’s what you’ll see:

Just enter some code and the language, then insert it and you’re done. The markup that gets published looks like this:

<pre class="cms-code-block">
  <code class="language-php">
    // your code here
  </code>
</pre>

This is the code block structure recommended by the HTML 5 spec and the one that most syntax highlighters prefer. That means you can use whatever library you want for syntax highlighting, so you have complete control over themes, configs, etc.! :partying_face:

I’ve already integrated the popular Prism highlighter with my test site and it works beautifully. I love seeing the highlighted code right in the editor.

This is perfect for developers or anyone else that wants to post computer code or other languages that are supported by highlighters.