Turn on Syntax Highlighting

With Smart, it's easy to turn on syntax highlighting on your site with the flip of a switch.

by Ryan Feigenbaum

Turn on Syntax Highlighting

Share

Syntax highlighting is using colors to signify the meaning of keywords in code. It makes code easier to read and is essential for anyone writing about software development.

Usually, adding syntax highlighting requires adding libraries and CSS to your Ghost theme. With Smart, it's already built in! To enable it, go to Design > Post settings and toggle on Syntax Highlighting. Now, no matter which languages you use, you'll have instant highlighting.

In Ghost, create a code block by typing three backticks in the editor, followed by the language name, e.g., ```javascript.

const syntax = "Highlight me!"

function makeMyCodeSing() {
    return true;
}

const colors = ["red", "blue", "green"];

const upperCaseColors = colors.map(color => color.toUpperCase());