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;
}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.