Do you set the language on code blocks?

Last updated by Tiago Araújo [SSW] 3 months ago.See history

You should have a syntax highlighter to show pieces of code on your pages for a better readability. By specifying the language within your code block, you can enable color coding similar to that in an IDE.

Tools like Prism, highlight.js, or Code Prettify automatically apply syntax highlighting, making it easier for users to read code by color-coding different elements (e.g., keywords, strings, and variables).

See this json file for all supported languages and their aliases that can be used in SSW Rules.

To activate this feature, add the language name right after the opening 3 backticks (used to write a code in Markdown).

For example, instead of starting a JavaScript code example with: ```, you should use ```js or ```javascript for syntax highlighting.

let iceCream = 'chocolate';

if (iceCream === 'chocolate') {
  alert('Yay, I love chocolate ice cream!');    
} else {
  alert('Awwww, but chocolate is my favorite...');    
}

Figure: Bad example - No syntax highlighting

let iceCream = 'chocolate';

if (iceCream === 'chocolate') {
  alert('Yay, I love chocolate ice cream!');    
} else {
  alert('Awwww, but chocolate is my favorite...');    
}

Figure: Good example - This JavaScript code block shows its syntax highlighted

Adam Cogan
We open source.Loving SSW Rules? Star us on GitHub. Star
Stand by... we're migrating this site to TinaCMS