Do you set the language on code blocks?

Updated by Tiago Araújo [SSW] 9 months ago. See history

123

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](https://prismjs.com), [highlight.js](https://highlightjs.org), or [Code Prettify](https://github.com/googlearchive/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).
<asideEmbed
  variant="info"
  body={<>
    See this [json file](https://unpkg.com/gatsby-remark-vscode@1.0.3/lib/grammars/manifest.json) for all supported languages and their aliases that can be used in SSW Rules.
  </>}
  figureEmbed={{
    preset: "default",
    figure: 'XXX',
    shouldDisplay: false
  }}
/>

To activate this feature, add the language name right after the opening 3 backticks (used to [write a code in Markdown](https://www.ssw.com.au/rules/rule/#11-code)).

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

```none
let iceCream = 'chocolate';

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

<figureEmbed figureEmbed={{
  preset: "badExample",
  figure: 'Figure: Bad example - No syntax highlighting',
  shouldDisplay: true
} } />


```javascript
let iceCream = 'chocolate';

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

<figureEmbed figureEmbed={{
  preset: "goodExample",
  figure: 'Figure: Good example - This JavaScript code block shows its syntax highlighted',
  shouldDisplay: true
} } />


<asideEmbed
  variant="codeauditor"
  body={<>
    [SSW CodeAuditor enforces this rule](https://codeauditor.com/rules).
  </>}
  figureEmbed={{
    preset: "default",
    figure: 'XXX',
    shouldDisplay: false
  }}
/>
acknowledgements
related rules