Syntax Highlighting

Gatsby Just Docs uses PrismJS for easy code highlighting

Basics

The following is a code block with JavaScript language syntax highlighting:

import React from 'react';

Supports Multiple Languages

The following are a list of languages automatically supported with out any additional configuration:

markup, bash, clike, c, cpp, css, javascript, jsx, coffeescript, actionscript, css-extr, diff, git, go, graphql, handlebars, json, less, makefile, markdown, objectivec, ocaml, python, reason, sass, scss, sql, stylus, tsx, typescript, wasm, yaml

To add additional languages, refer to the comments within src/custom/config/codeBlockLanguages.js to add additional languages.

Diff Highlighting

The following is a code block with diff. Lines with + highlighted in green shade indicating an addition. Lines with - highlighted in red shade indicating a deletion.

- const data = ['1','2'];
+ const data = [1,2];

Live Editing example

Gatsby Just Docs supports live code editing examples. Edit the HTML below to see the button change in real-time.

Styling

For ways to use the styling in the markdown refer to the UI Components section.