It’s really easy to post blocks of code when you write a blog post on CodePen. You just do the typical Markdown block:
```
code
goes
here.
```
You can apply syntax highlighting by putting the language after the first three backticks, like this:
```html
<header>
<h1 class="mega">Rock'n'rabbit</h1>
</header>
```
And you’ll get this:
CodeMirror Highlighting
We’re now using CodeMirror itself to handle highlighting. The advantage there is that it’s exactly the same as you experience in the editor itself. Just some nice consistency there for everyone. It benefits us in that we’re just using a single highlighter now. Meaning, for example, if there is a bug in a theme, we can fix it and it fixes it everywhere.
It’s also easier to offer more syntax highlighting themes in the future knowing that we can roll them out everywhere at once.
Your Choice Follows You
You set your preference for syntax highlighting in your editor settings:
Now, not only does that choice affect what you see in the editor, it affects what you see in blog posts as well.
Your preference follows you!
More Languages Supported
In addition to all the languages we support in the editor on CodePen, for blog posts, we’re also now supporting Ruby, PHP, Bash/Shell, and SQL.
The Complete List
You put these after the triple-backticks:
html, haml, markdown, slim, jade, css, scss, sass, less, stylus, javascript, coffeescript, livescript, traceur, ruby, shell, php, sql
Doesn’t matter how you capitalize, that’ll get forced into lowercase so it works. There are also a few fixer-upper mappings, like “js” or “jQuery” works for “javascript”, “bash” works for “shell” and so on.