Code Highlighting

We thought you might sometimes blog about code, and we added support for block code highlighting by default. Under the hood, we use Prism.

On the WordPress side

We recommend using Code Syntax Block WordPress plugin for editing your code snippets in WordPress.

Please note that only "Language" and "Show line numbers" WordPress settings are retained.

Change theme

You can easily replace the default twilight theme by:

• coy,
• dark,
• funky,
• okaidia,
• solarizedlight,
• tomorrow.

To modify the theme, you will have to edit the .babelrc file (in the root of your starter).

Copy
1{
2  "presets": ["babel-preset-gatsby"],
3  "plugins": [
4    [
5      "prismjs",
6      {
7        "languages": ["javascript", "css", "markup", "typescript"],
8        "plugins": ["show-language"],
9        "theme": "tomorrow",
10        "css": true
11      }
12    ]
13  ]
14}

You can also use any additional theme available in the prism-themes repository

Configure languages

You might need support for more languages. By default we add support to JavaScript, HTML (markup), CSS, and PHP. To modify the list of supported languages, you will need to edit the .babelrc (in the root of your starter).

In the following example, we removed the support for PHP and addded support for TypeScript (line 7).

Copy
1{
2  "presets": ["babel-preset-gatsby"],
3  "plugins": [
4    [
5      "prismjs",
6      {
7        "languages": ["javascript", "css", "markup", "typescript"],
8        "plugins": ["show-language"],
9        "theme": "twilight",
10        "css": true
11      }
12    ]
13  ]
14}

Add more options

You can add support to "line numbers" and "copy to clipboard" functionnality, by adding plugins to prism. By default, we add only show-language.

You will need to edit the .babelrc (in the root of your starter) - see line 8.

Copy
1{
2  "presets": ["babel-preset-gatsby"],
3  "plugins": [
4    [
5      "prismjs",
6      {
7        "languages": ["javascript", "css", "markup", "typescript"],
8        "plugins": ["show-language", "line-numbers", "copy-to-clipboard"],
9        "theme": "twilight",
10        "css": true
11      }
12    ]
13  ]
14}

Please note that in the .babelrc file you only enable support for the line-numbers plugin. The line numbers will be added only to the snippets with "Show line numbers" activated in your WordPress code block.

Deactivate code highlighting

If you don't need code highlighting in your project and want to optimize your bundle size, you can deactivate it.

To do so, you will have to rename or remove the ActivatePrism.js file from your starter folder src/@gatsbywpthemes/{theme-name}/utils.

Example:

Copy
.
├── .babelrc
├── .env
# ...
├── package.json
├── src
│   ├── @gatsbywpthemes
│   │   └── gatsby-theme-wp-base
│   │       ├── chakra
│   │       ├── components
│   │       └── utils
│   │           # renamed to ActivatePrism-old.js, you can also delete this file
│   │           └── 🔄 ActivatePrism-old.js
│   └── styles
└── static