gatsby-example-using-remark

Code and Syntax Highlighting with PrismJS

3 min read · tagged remark, Code Highlighting

Contents

jeremy bishop 262119 Photo by Jeremy Bishop via [Unsplash](https://unsplash.com/?photo=XxpCNQw3is)_

Code blocks are part of the Markdown spec, but syntax highlighting isn’t. However, many renderers support syntax highlighting. In gatsby-remark-prismjs, we use 🤔 PrismJS.

Inline code

Inline `code` has `back-ticks around` it.

Inline code has back-ticks around it.

Code blocks

In Markdown, blocks of code are either fenced by lines with three back-ticks ```, or are indented with four spaces. Fenced code blocks are easier to write and maintain, and only they support syntax highlighting by indicating a language.

To see the complete list of supported languages, and how to write language names, see the PrismJS homepage.

```javascript
var s = "JavaScript syntax highlighting";
alert(s);
```

```python
s = "Python syntax highlighting"
print s
```

```
No language indicated, so no syntax highlighting.
But let's throw in a <b>tag</b>.
```
var s = "JavaScript syntax highlighting"
alert(s)
s = "Python syntax highlighting"
print s
No language indicated, so no syntax highlighting.
But let's throw in a <b>tag</b>.

Line highlighting & numbering

gatsby-remark-prismjs has its own line highlighting & numbering implementation which differs a bit from PrismJS’s own. You can find out everything about it in the corresponding README.

```javascript{1-2,22}{numberLines: true}
// In your gatsby-config.js
// Let's make this line very long so that our container has to scroll its overflow…
plugins: [
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        {
          resolve: `gatsby-remark-images`,
          options: {
            maxWidth: 756,
          },
        },
        {
          resolve: `gatsby-remark-responsive-iframe`,
          options: {
            wrapperStyle: `margin-bottom: 1.0725rem`,
          },
        },
        `gatsby-remark-copy-linked-files`,
        `gatsby-remark-smartypants`,
        `gatsby-remark-prismjs`,
      ]
    }
  }
]
```
// In your gatsby-config.js
// Let's make this line very long so that our container has to scroll its overflow…
plugins: [
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        {
          resolve: `gatsby-remark-images`,
          options: {
            maxWidth: 756,
          },
        },
        {
          resolve: `gatsby-remark-responsive-iframe`,
          options: {
            wrapperStyle: `margin-bottom: 1.0725rem`,
          },
        },
        `gatsby-remark-copy-linked-files`,
        `gatsby-remark-smartypants`,
        `gatsby-remark-prismjs`,
      ]
    }
  }
]

Line numbers can start from anywhere, here’s an example showing a small extract from a larger chunk of code:

```{numberLines: 549}
...
a long imaginary code block
...
```
...
 a long imaginary code block
...

Let’s do something crazy and add a list with another code example:

  • A list item

    …and a paragraph! In my younger and more vulnerable years my father gave me some advice that I’ve been turning over in my mind ever since.

    1. A nested numbered list
    2. “Whenever you feel like criticizing any one,” he told me, “just remember that all the people in this world haven’t had the advantages that you’ve had.”
  • Roger that, now back to topic: Highlighted code blocks work here, too:

    .clearfix:after {
    	visibility: hidden;
    	display: block;
    	font-size: 0;
    	content: " ";
    	clear: both;
    	height: 0;
    	}
    .clearfix { display: inline-table; }
    /* Hides from IE-mac \*/
    * html .clearfix { height: 1%; }
    .clearfix { display: block; }
    /* End hide from IE-mac */
    

    Wow, “IE-mac”? Yeah, that was a thing back in the day … a good one at the time, too:

    Initial versions were developed from the same code base as Internet Explorer for Windows. Later versions diverged, particularly with the release of version 5 which included the cutting edge, fault-tolerant and highly standards-compliant Tasman > layout engine.

    Source: https://en.wikipedia.org/wiki/InternetExplorerfor_Mac

  • The last list item –- no more list items after this one, pinky swear!


Avatar of Daisy BuchananDaisy Buchanan is an attractive, if shallow and self-absorbed, young woman.

powered by @gatsbyjs