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 }} />