Language support in code cards

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

Add a language 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 also apply syntax highlighting using a library like prism.js, 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.

Get notified when we ship new features.