Skull Logo
Gatsby Skeleton

Code

10th August 2017 by Pedr Browne

318 Words / 3 Minute Read

There are a number of useful features to help you display code within your site’s markdown content including syntax highlighting, the ability to embed code from files and to open code in a REPL.

Basic Embedding

Any code you embed using markdown’s backtick syntax will be styled with Code will be styled using Prism. If you follow the first three backticks with a keyword for the language, the correct highlighting will be used for that language, for example to embed JavaScript you would use the following:

```javascript
const example = 1
```

A full list of supported languages can be found here.

The current prism theme is imported in the project’s ./src/layout.js file.

External Files

Any files you include in your project’s src/content/code directory can be included with automatic syntax highlighting based on the file’s extension using the following syntax within the markdown (note the backticks):

`embed:example.js`

/* eslint-disable */
const x = 2;
const y = 3;
const z = x + y;

REPLs

There is also a special syntax for opening JavaScript code in a REPL of your choice. By constructing a link using the filename of the repl as a prefix, a link will be constructed that opens an external page to the REPL with the contents of the file displayed.

In the following examples, a file called example.js found in src/content/code will be opened in a the chosen REPL:

* [Open In Babel REPL](babel://example)
* [Open In Codepen](codepen://example)
* [Open In Code Sandbox](codesandbox://example)
* [Open In Ramda](ramda://example)

Code Sandbox Embeds

You can also use Code Sandbox to embed code in the page within their component, making the code interactive.

The code must be in its own directory (within the src/content/code directory), and there must be a package.json that directory. You can declare any libraries used by your code there as you would with any package.json.

You can pass options to configure how the component should look - it can just run display the code for example. By default it displays the full editor. For more information on this see the plugin’s README.

Plugins Used

Filed Under: Feature