In this post I'd like to show how to use code snippets with syntax highlighting in Markdown. For my current configuration of gatsby-remark-prismjs have a look at the source code on Github.

An inline code snippet like let variable='test'; with-out any details about the language and if you're adding an info about the language it looks like following let variable='test'; here we're using

`js>let variable='test';`

Notice The > bracket is the inlineCodeMarker syntax to pick the language in an inline snippet and can be configured in your gatsby-config (see pluging gatsby-remark-prismjs) if you don't like the bracket you could also use a different character.

It would be great if there would be a default language for inline snippets but I'm not sure where to add it - maybe I'll check this later.

I'm using a js alias in my config so it will use language javascript internally. So js> and javascript> is creating the same inline code snippet.

Three backticks code block

By adding three backtickts followed by the desired language in it's own line in your markdown you can create code blocks like the following example:

// Three backticks snippet with language javascript
for(let i=0; i<10; i++) {
  console.log('test log', i);
}

The above snippet is created with the following markdown:

```javascript
// Three backticks snippet with language js
for(let i=0; i<10; i++) {
  console.log('test log', i);
}
```

Note If you'd like to show your backticks markdown with-out rendering you can wrap it in a code block intended by 4 spaces. Just for showing the syntax.

Bash / shell language highlighting

For bash/shell inline snippets I'd like to add a bold $ in front of the snippet to mark it as shell.

With shell: yarn add react and with bash yarn add react - shell/bash are just aliases for the same language styling.

The above is inlined with

shell>yarn add react

The shell highlighting is also working in tripple backticks snippets

echo This is awesome! And we're not adding a $ manually.

I have configured this by adding the $ with css as a content before every code block for language bash/shell with the following added to my base.css:

code.language-bash:before,
code.language-shell:before{
  content: '$ ';
  font-weight: bold;
}

Details to the advanced usage

Above is the markup that I'm using most of the time but you can find more details about the usage in the docs of gatsby-remark-prismjs.

Language support Prism.js

As mentioned before, you can change the syntax highlighting by adding ´´´javascript ... to your code block. See a list of supported languages here. Gatsby-plugin is adding the language- part before it is passed to Prism.js. Default language is text - so no special syntax highlighting.

Theming

I've installed prism-themes and picked prism-vs.css by importing it in gatsby-browser.js that I've added to the root of the project with require('prism-themes/themes/prism-vs.css');.

With that style loaded I'm getting the VS code theme and that's my favorite. If you don't like to pick an existing theme you could also create a custom one. I'd check the css of the prism-themes and copy that so you're having all needed styles for your custom theme.

I also like GHColors but there are more themes that can be found in the README of prism-themes on Github.