v0.0.2

Updates:

• Added two packages.

  • gatsby-remark-prismjs.
  • prismjs
• Updated gatsby-browser.js and gatsby-config.js to include new plugins.
• Updated global.css to style code blocks using the Solarized-Light theme from Prism.
• Added macOS-styled window buttons to code blocks with help thanks to this blog post.

Background

Many markdown processors will display any character between single (`) or triple (```) backticks using monospaced characters.

Examples

Single Backtick

Typed

This is  `in-line` code.

Rendered

This is in-line code.

Triple Backtick

Typed

```
This is a code block.
```

Rendered

This is a code block.

Syntax Highlighting

To be able to showcase code similar to how many integrated development environments (IDE) can, we can use a library such as prismjs to help style our code blocks.

Example (w/o syntax highlighting)

export default function sum(a, b){
  return a + b
}

Example (w/ syntax highlighting)

export default function sum(a, b){
  return a + b
}

Extra Features

Thanks to the extensibility of Prism, there are many plugins bundled with the gatsby-remark-prismjs package.

Line Numbers

export default function sum(a, b){
  return a + b
}

Line Highlighting

export default function sum(a, b){
  return a + b}

Git-Diff Highlighting

export default function sum(a, b){
-  return a + b
+  const sum = a + b
+  return sum
}

Command-Line Prompt

git add package.json

Notice how you can't highlight the $ character?

These are a few of the plugins available for Prism and the main ones we will use for now.