Skip to content
This repository was archived by the owner on Feb 6, 2024. It is now read-only.

Commit 5b9552c

Browse files
committed
updated README to include gatsby-config.js option for gatsby-plugin-mdx
1 parent d3f7979 commit 5b9552c

File tree

1 file changed

+39
-12
lines changed

1 file changed

+39
-12
lines changed

README.md

Lines changed: 39 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -38,18 +38,24 @@ No predefined cards but stylable with multiple [CSS variables](#variables).
3838

3939
## Table of contents
4040

41-
- [Install](#install)
42-
- [How to use](#how-to-use)
41+
- [gatsby-remark-highlight-code](#gatsby-remark-highlight-code)
42+
- [Designs](#designs)
43+
- [1. Carbon](#1-carbon)
44+
- [2. Ubuntu](#2-ubuntu)
45+
- [3. None](#3-none)
46+
- [Table of contents](#table-of-contents)
47+
- [Install](#install)
48+
- [How to use](#how-to-use)
4349
- [Configure](#configure)
4450
- [Load the component](#load-the-component)
4551
- [Plugin Options](#plugin-options)
46-
- [Language](#language)
47-
- [Styling](#styling)
52+
- [Language](#language)
53+
- [Styling](#styling)
4854
- [Terminal](#terminal)
4955
- [Theme](#theme)
5056
- [Variables](#variables)
51-
- [Showcase](#showcase)
52-
- [License](#license)
57+
- [Showcase](#showcase)
58+
- [License](#license)
5359

5460
## Install
5561

@@ -63,6 +69,8 @@ In order to use this plugin, it should be first `configured` and then `loaded` a
6369

6470
### Configure
6571

72+
If you are using "gatsby-transformer-remark", you can add "gatsby-remark-highlight-code" like this:
73+
6674
```javascript
6775
// In your gatsby-config.js
6876
plugins: [
@@ -79,6 +87,25 @@ plugins: [
7987
]
8088
```
8189

90+
If you are using "gatsby-plugin-mdx", you can add "gatsby-remark-highlight-code" like this:
91+
92+
```javascript
93+
// In your gatsby-config.js
94+
plugins: [
95+
{
96+
resolve: `gatsby-plugin-mdx`,
97+
options: {
98+
extensions: [".mdx", ".md"],
99+
gatsbyRemarkPlugins: [
100+
{
101+
resolve: `gatsby-remark-highlight-code`,
102+
},
103+
],
104+
},
105+
},
106+
]
107+
```
108+
82109
### Load the component
83110

84111
Load the [@deckdeckgo/highlight-code] once in one of your pages or components.
@@ -91,12 +118,12 @@ deckDeckGoHighlightElement();
91118
```
92119

93120
### Plugin Options
94-
| property | type | default |
95-
|----------|------|---------|
96-
| terminal | `carbon`, `ubuntu` or `none` | `carbon` |
97-
| theme | `3024-night` , `a11y-dark` , `blackboard` , `base16-dark` , `base16-light` , `cobalt` , `dracula` , `duotone` , `hopscotch` , `lucario` , `material` , `monokai` , `night-owl` , `nord` , `oceanic-next` , `one-light` , `one-dark` , `panda` , `paraiso` , `seti` , `shades-of-purple` , `solarized-dark` , `solarized-light` , `synthwave` , `twilight` , `verminal` , `vscode` , `yeti` , `zenburn` | `dracula` |
98-
| editable | `boolean` | `false` |
99-
| lineNumbers | `boolean` | `false` |
121+
| property | type | default |
122+
| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------- |
123+
| terminal | `carbon`, `ubuntu` or `none` | `carbon` |
124+
| theme | `3024-night` , `a11y-dark` , `blackboard` , `base16-dark` , `base16-light` , `cobalt` , `dracula` , `duotone` , `hopscotch` , `lucario` , `material` , `monokai` , `night-owl` , `nord` , `oceanic-next` , `one-light` , `one-dark` , `panda` , `paraiso` , `seti` , `shades-of-purple` , `solarized-dark` , `solarized-light` , `synthwave` , `twilight` , `verminal` , `vscode` , `yeti` , `zenburn` | `dracula` |
125+
| editable | `boolean` | `false` |
126+
| lineNumbers | `boolean` | `false` |
100127

101128
## Language
102129

0 commit comments

Comments
 (0)