/Improved

Language support in code cards

  • Kym Ellis

    Kym Ellis

    Technical Marketing Lead

    More posts by Kym Ellis.
    Kym Ellis

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.