Add syntax highlighting to blocks of code on your site using code cards in the Ghost editor, which now support language selection and captions!

You can now set a language in code cards in Ghost, just type ```javascript to create a new codeblock. Or use the user interface if you prefer:

You can then apply syntax highlighting using a library like prism.js in your theme, or by using code injection. Here's a demo of a CSS code block:

body {
  background: black;
}
.container {
  position: relative;
  width: 800px;
  height: 600px;
  background: #214760;
  margin: 0px auto;
}
New: Add captions to code cards 😍

Once your code block is complete, you can insert a caption to add more context for your readers!

Admin API support

We've also added caption and language extraction for code blocks when converting HTML via our Admin API 💪


Ghost(Pro) users have already been updated and have access to language selection and captions for code cards. Self hosted developers can use Ghost-CLI to get this feature by running $ ghost update to install the latest release.