Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.
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:
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: