gatsby-example-using-remark

Embed file contents within PrismJS blocks

3 min read · tagged remark, Code Highlighting, embed snippets

Contents

You can embed the contents of existing files within your Markdown using the gatsby-remark-embed-snippet with gatsby-remark-prismjs.

Let’s start by displaying file contents as a highlighted code block, then see how to control line highlighting and visibility from within the source file.

Embedding files

After installing the required plugins you can embed a file within your Markdown by using embed snippets. To embed the file src/code-examples/plain.js you could write the following:

`embed:plain.js`

This will look like:

import React from "react"
import ReactDOM from "react-dom"

const name = `Brian`

ReactDOM.render(
  <div>
    <h1>Hello, ${name}!</h1>
    <h2>Welcome to this example</h2>
  </div>,
  document.getElementById(`root`)
)

Highlight lines

You can highlight specific lines by adding special comments to the source file. Let’s see how this works in src/code-examples/highlight-lines.js.

Take a look at the highlight-line comment on line 4 and the highlight-range comment on line 8:

import React from "react"
import ReactDOM from "react-dom"

const name = `Brian` // highlight-line

ReactDOM.render(
  <div>
    {/* highlight-range{1-2} */}
    <h1>Hello, ${name}!</h1>
    <h2>Welcome to this example</h2>
  </div>,
  document.getElementById(`root`)
)

When the file is embedded with:

`embed:highlight-lines.js`

it will display like this:

import React from "react"
import ReactDOM from "react-dom"

const name = `Brian`
ReactDOM.render(
  <div>
    <h1>Hello, ${name}!</h1>    <h2>Welcome to this example</h2>  </div>,
  document.getElementById(`root`)
)

Hide lines

You can use similar comments to hide specific lines. Here’s another example, this time using src/code-examples/hide-lines.js. Check out the hide-line comments on lines 1, 7, 13 and 14:

/* hide-range{1-3} */
import React from "react"
import ReactDOM from "react-dom"

const name = `Brian`

// hide-next-line
ReactDOM.render(
  <div>
    <h1>Hello, ${name}!</h1>
    <h2>Welcome to this example</h2>
  </div>,
  document.getElementById(`root`) // hide-line
) // hide-line

Which will display like this:

const name = `Brian`

  <div>
    <h1>Hello, ${name}!</h1>
    <h2>Welcome to this example</h2>
  </div>,

All together now

You can mix line highlighting and hiding in the same file. This is from src/code-examples/hide-and-highlight-lines.js

/* hide-range{1-3} */
import React from "react"
import ReactDOM from "react-dom"

// highlight-next-line
const name = `Brian`

// highlight-range{4-5}
// hide-next-line
ReactDOM.render(
  <div>
    <h1>Hello, ${name}!</h1>
    <h2>Welcome to this example</h2>
  </div>,
  document.getElementById(`root`) // hide-line
) // hide-line

It’ll look like this:

const name = `Brian`
  <div>
    <h1>Hello, ${name}!</h1>    <h2>Welcome to this example</h2>  </div>,

You’ve learnt how to embed the contents of existing files into your Markdown using gatsby-remark-embed-snippet with gatsby-remark-prismjs. Hurray!

If you’d prefer to write your code blocks directly within your Markdown, take a look at the example Code and Syntax Highlighting with PrismJS.

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

powered by @gatsbyjs