Install Prism Plugin

August 23, 2018

Install Prism Plugin

Prism is a lightweight, extensible syntax highlighter. Gatsby JS comes with a well integrated plugin. Follow the instruction then you can render code snippets in a nice looking way.

Here is an example. The follwing markdown 

```javascript
// In your gatsby-config.js
plugins: [
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        `gatsby-remark-prismjs`,
      ]
    }
  }
]

will become

// In your gatsby-config.js
plugins: [
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        `gatsby-remark-prismjs`,
      ]
    }
  }
]

And we can try some typescript code as well.

export interface Person {
    name: string,
    age: number
}

let john = {
    name: "John",
    age: 39
} as Person;