├── .github
    └── FUNDING.yml
├── static
    ├── highlight-lines.gif
    ├── screenshot-none.png
    ├── screenshot-carbon.png
    ├── screenshot-ubuntu.png
    └── screenshot-carbon-themes.png
├── index.js
├── tests
    └── mocks.js
├── LICENSE
├── .gitignore
├── package.json
├── utils.js
├── utils.test.js
├── CHANGELOG.md
└── README.md


/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | open_collective: deckdeckgo
2 | 


--------------------------------------------------------------------------------
/static/highlight-lines.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/deckgo/gatsby-remark-highlight-code/HEAD/static/highlight-lines.gif


--------------------------------------------------------------------------------
/static/screenshot-none.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/deckgo/gatsby-remark-highlight-code/HEAD/static/screenshot-none.png


--------------------------------------------------------------------------------
/static/screenshot-carbon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/deckgo/gatsby-remark-highlight-code/HEAD/static/screenshot-carbon.png


--------------------------------------------------------------------------------
/static/screenshot-ubuntu.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/deckgo/gatsby-remark-highlight-code/HEAD/static/screenshot-ubuntu.png


--------------------------------------------------------------------------------
/static/screenshot-carbon-themes.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/deckgo/gatsby-remark-highlight-code/HEAD/static/screenshot-carbon-themes.png


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | const visit = require("unist-util-visit");
 2 | 
 3 | const { parseNodeHtml } = require("./utils");
 4 | 
 5 | module.exports = ({ markdownAST }, pluginOptions) => {
 6 |   visit(markdownAST, "code", (node) => {
 7 |     const html = parseNodeHtml(node, pluginOptions);
 8 | 
 9 |     node.type = "html";
10 |     node.children = undefined;
11 |     node.value = html;
12 |   });
13 | 
14 |   return markdownAST;
15 | };
16 | 


--------------------------------------------------------------------------------
/tests/mocks.js:
--------------------------------------------------------------------------------
 1 | const dartLangNode = {
 2 |   lang: "dart{3,4,5}",
 3 | };
 4 | const dartLangWithSpacesNode = {
 5 |   lang: "dart   {5,9,34,39-44}",
 6 | };
 7 | const typescriptLangNode = {
 8 |   lang: "typescript",
 9 | };
10 | const typescriptWithLinesGroupNode = {
11 |   lang: "typescript{3,4, 5-9, 22-45}",
12 | };
13 | const dartLangMetaNode = {
14 |   lang: "dart{3",
15 |   meta: ",4,5}",
16 | };
17 | 
18 | module.exports = {
19 |   dartLangNode,
20 |   dartLangWithSpacesNode,
21 |   typescriptLangNode,
22 |   typescriptWithLinesGroupNode,
23 |   dartLangMetaNode,
24 | };
25 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 David Dal Busco and Nicolas Mattia
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | # Runtime data
 9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 | 
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 | 
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 | 
20 | # nyc test coverage
21 | .nyc_output
22 | 
23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 | 
26 | # Bower dependency directory (https://bower.io/)
27 | bower_components
28 | 
29 | # node-waf configuration
30 | .lock-wscript
31 | 
32 | # Compiled binary addons (http://nodejs.org/api/addons.html)
33 | build/Release
34 | 
35 | # Dependency directories
36 | node_modules/
37 | jspm_packages/
38 | 
39 | # Typescript v1 declaration files
40 | typings/
41 | 
42 | # Optional npm cache directory
43 | .npm
44 | 
45 | # Optional eslint cache
46 | .eslintcache
47 | 
48 | # Optional REPL history
49 | .node_repl_history
50 | 
51 | # Output of 'npm pack'
52 | *.tgz
53 | 
54 | # dotenv environment variables file
55 | .env
56 | 
57 | # gatsby files
58 | .cache/
59 | public
60 | 
61 | # Mac files
62 | .DS_Store
63 | 
64 | # Yarn
65 | yarn-error.log
66 | .pnp/
67 | .pnp.js
68 | # Yarn Integrity file
69 | .yarn-integrity
70 | 
71 | .idea
72 | 
73 | 
74 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "gatsby-remark-highlight-code",
 3 |   "version": "3.3.0",
 4 |   "description": "Adds stylish cards and syntax highlighting to code blocks in markdown files",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "jest"
 8 |   },
 9 |   "dependencies": {
10 |     "gatsby-node-helpers": "^1.2.1",
11 |     "lodash": "^4.17.21",
12 |     "mdast-util-to-string": "^1.1.0",
13 |     "unist-util-visit": "^2.0.2"
14 |   },
15 |   "peerDependencies": {
16 |     "gatsby": "^3.0.0 || ^4.0.0 || ^5.0.0",
17 |     "@deckdeckgo/highlight-code": "^3.6.0"
18 |   },
19 |   "repository": {
20 |     "type": "git",
21 |     "url": "git+https://github.com/deckgo/gatsby-remark-highlight-code.git"
22 |   },
23 |   "author": "David Dal Busco",
24 |   "license": "MIT",
25 |   "bugs": {
26 |     "url": "https://github.com/deckgo/gatsby-remark-highlight-code"
27 |   },
28 |   "homepage": "https://deckdeckgo.com",
29 |   "keywords": [
30 |     "gatsby",
31 |     "gatsby-plugin",
32 |     "remark",
33 |     "stencil",
34 |     "stenciljs",
35 |     "web components",
36 |     "prismjs",
37 |     "code",
38 |     "highlight code",
39 |     "code highlighter",
40 |     "highlight",
41 |     "markdown"
42 |   ],
43 |   "devDependencies": {
44 |     "jest": "^27.0.6",
45 |     "prettier": "2.3.2"
46 |   },
47 |   "husky": {
48 |     "hooks": {
49 |       "pre-commit": "pretty-quick --staged"
50 |     }
51 |   }
52 | }


--------------------------------------------------------------------------------
/utils.js:
--------------------------------------------------------------------------------
  1 | const toString = require("mdast-util-to-string");
  2 | const _ = require(`lodash`);
  3 | 
  4 | /**
  5 |  * Returns the parsed language and the highlighted lines.
  6 |  * For example, ```dart{3, 2, 5-9} will output {lang: 'dart', highlightLines: '3 2 5,9'}
  7 |  * which is compatible with the <deckdeckgo-highlight-code> component (https://docs.deckdeckgo.com/?path=/story/components-highlight-code--highlight-code)
  8 |  * @param {Markdown Node} node
  9 |  */
 10 | const parseLanguageAndHighlightedLines = ({ lang: nodeLang, meta }) => {
 11 |   const highlightLinesRegex = /{(.*?)}/g;
 12 | 
 13 |   const joinedNodeLang = `${nodeLang}${
 14 |     meta !== null && meta !== undefined ? meta : ""
 15 |   }`;
 16 | 
 17 |   let lang = joinedNodeLang;
 18 |   let highlightLines = "";
 19 |   const regexExecResults = highlightLinesRegex.exec(joinedNodeLang);
 20 | 
 21 |   if (!regexExecResults) {
 22 |     // no lines to highlight
 23 |     return {
 24 |       lang,
 25 |       highlightLines,
 26 |     };
 27 |   }
 28 | 
 29 |   let [highlightText, numbersAndGroups] = regexExecResults;
 30 | 
 31 |   lang = lang.replace(highlightText, "").trim();
 32 |   highlightLines = numbersAndGroups
 33 |     .split(",")
 34 |     .reduce((acc, chunk) => {
 35 |       const numbOrGroup = chunk.trim();
 36 |       if (numbOrGroup.includes("-")) {
 37 |         // is a group of numbers. e.g. {3-10}
 38 |         return [...acc, numbOrGroup.replace("-", ",")];
 39 |       }
 40 |       return [...acc, numbOrGroup];
 41 |     }, [])
 42 |     .join(" ");
 43 | 
 44 |   return {
 45 |     lang,
 46 |     highlightLines,
 47 |   };
 48 | };
 49 | 
 50 | function generatePropsString(pluginOptions) {
 51 |   if (!pluginOptions) {
 52 |     return "";
 53 |   }
 54 | 
 55 |   let str = "";
 56 |   const { terminal, lineNumbers, editable, theme } = pluginOptions;
 57 | 
 58 |   if (terminal) {
 59 |     str += `terminal="${pluginOptions.terminal}" `;
 60 |   }
 61 | 
 62 |   if (theme) {
 63 |     str += `theme="${pluginOptions.theme}" `;
 64 |   }
 65 | 
 66 |   if (lineNumbers === true) {
 67 |     str += `line-numbers="true" `;
 68 |   }
 69 | 
 70 |   if (editable === true) {
 71 |     str += `editable="true" `;
 72 |   }
 73 | 
 74 |   return str;
 75 | }
 76 | 
 77 | function parseNodeHtml(node, pluginOptions) {
 78 |   let lang = "",
 79 |     highlightLines = undefined;
 80 | 
 81 |   if (node && node.lang !== null) {
 82 |     ({ lang, highlightLines } = parseLanguageAndHighlightedLines(node));
 83 |   }
 84 |   const text = toString(node);
 85 |   const properties = generatePropsString(pluginOptions);
 86 | 
 87 |   const renderLang =
 88 |     lang !== "" && lang !== undefined ? `language="${lang}"` : "";
 89 |   const renderHighlightLines =
 90 |     highlightLines !== "" && highlightLines !== undefined
 91 |       ? `highlight-lines="${highlightLines}"`
 92 |       : "";
 93 | 
 94 |   return `<deckgo-highlight-code ${renderLang} ${properties} ${renderHighlightLines}>
 95 |           <code slot="code">${_.escape(text)}</code>
 96 |         </deckgo-highlight-code>
 97 |       `.trim();
 98 | }
 99 | 
100 | module.exports = {
101 |   parseLanguageAndHighlightedLines,
102 |   parseNodeHtml,
103 | };
104 | 


--------------------------------------------------------------------------------
/utils.test.js:
--------------------------------------------------------------------------------
  1 | const {
  2 |   dartLangNode,
  3 |   dartLangWithSpacesNode,
  4 |   typescriptLangNode,
  5 |   typescriptWithLinesGroupNode,
  6 |   dartLangMetaNode,
  7 | } = require("./tests/mocks");
  8 | const { parseLanguageAndHighlightedLines, parseNodeHtml } = require("./utils");
  9 | 
 10 | describe("parse node to html", () => {
 11 |   it("should parse no language and no highlight lines (default)", () => {
 12 |     const html = parseNodeHtml(
 13 |       {
 14 |         value: "hello world",
 15 |         lang: "",
 16 |       },
 17 |       {}
 18 |     );
 19 | 
 20 |     expect(html).toEqual(`<deckgo-highlight-code   >
 21 |           <code slot="code">hello world</code>
 22 |         </deckgo-highlight-code>`);
 23 |   });
 24 | 
 25 |   it("should parse javascript", () => {
 26 |     const html = parseNodeHtml(
 27 |       {
 28 |         value: "hello world",
 29 |         lang: "javascript",
 30 |       },
 31 |       {}
 32 |     );
 33 | 
 34 |     expect(html).toEqual(`<deckgo-highlight-code language="javascript"  >
 35 |           <code slot="code">hello world</code>
 36 |         </deckgo-highlight-code>`);
 37 |   });
 38 | 
 39 |   it("should parse a specific language", () => {
 40 |     const html = parseNodeHtml(
 41 |       {
 42 |         value: "hello world",
 43 |         lang: "typescript",
 44 |       },
 45 |       {}
 46 |     );
 47 | 
 48 |     expect(html).toEqual(`<deckgo-highlight-code language="typescript"  >
 49 |           <code slot="code">hello world</code>
 50 |         </deckgo-highlight-code>`);
 51 |   });
 52 | 
 53 |   it("should parse highlighted lines", () => {
 54 |     const html = parseNodeHtml(
 55 |       {
 56 |         value: "hello world",
 57 |         lang: "dart{3, 2, 5-9}",
 58 |       },
 59 |       {}
 60 |     );
 61 | 
 62 |     expect(html)
 63 |       .toEqual(`<deckgo-highlight-code language="dart"  highlight-lines="3 2 5,9">
 64 |           <code slot="code">hello world</code>
 65 |         </deckgo-highlight-code>`);
 66 |   });
 67 | 
 68 |   it("should parse no language and no highlight lines for null language", () => {
 69 |     const html = parseNodeHtml(
 70 |       {
 71 |         value: "hello world",
 72 |         lang: null,
 73 |       },
 74 |       {}
 75 |     );
 76 | 
 77 |     expect(html).toEqual(`<deckgo-highlight-code   >
 78 |           <code slot="code">hello world</code>
 79 |         </deckgo-highlight-code>`);
 80 |   });
 81 | });
 82 | 
 83 | describe("languages extraction", () => {
 84 |   test("detects the languages correctly", () => {
 85 |     expect(parseLanguageAndHighlightedLines(dartLangNode).lang).toBe("dart");
 86 |     expect(parseLanguageAndHighlightedLines(dartLangWithSpacesNode).lang).toBe(
 87 |       "dart"
 88 |     );
 89 |     expect(parseLanguageAndHighlightedLines(typescriptLangNode).lang).toBe(
 90 |       "typescript"
 91 |     );
 92 |     expect(
 93 |       parseLanguageAndHighlightedLines(typescriptWithLinesGroupNode).lang
 94 |     ).toBe("typescript");
 95 |   });
 96 | 
 97 |   test("detects the highlight-lines correctly", () => {
 98 |     expect(parseLanguageAndHighlightedLines(dartLangNode).highlightLines).toBe(
 99 |       "3 4 5"
100 |     );
101 |     expect(
102 |       parseLanguageAndHighlightedLines(dartLangWithSpacesNode).highlightLines
103 |     ).toBe("5 9 34 39,44");
104 |     expect(
105 |       parseLanguageAndHighlightedLines(typescriptLangNode).highlightLines
106 |     ).toBe("");
107 |     expect(
108 |       parseLanguageAndHighlightedLines(typescriptWithLinesGroupNode)
109 |         .highlightLines
110 |     ).toBe("3 4 5,9 22,45");
111 |     expect(
112 |       parseLanguageAndHighlightedLines(dartLangMetaNode).highlightLines
113 |     ).toBe("3 4 5");
114 |   });
115 | });
116 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
  1 | # 3.3.0 (2022-01-08)
  2 | 
  3 | ### Features
  4 | 
  5 | - support Gatsby v5 (in addition to v4 & v3)
  6 | 
  7 | # 3.2.0 (2022-01-04)
  8 | 
  9 | ### Features
 10 | 
 11 | - support Gatsby v4 (in addition to v3)
 12 | 
 13 | # 3.1.0 (2021-12-01)
 14 | 
 15 | ### Fix
 16 | 
 17 | - clean zero width spaces from clipboard when code is copied (to do so, the `copy` event is intercepted and processed only if the target is the component)
 18 | 
 19 | # 3.0.2 (2021-11-13)
 20 | 
 21 | ### Fix
 22 | 
 23 | - bump required `@deckdeckgo/highlight-code` dependency to solve concurrent required scripts load for complex languages
 24 | 
 25 | # 3.0.1 (2021-07-28)
 26 | 
 27 | ### Fix
 28 | 
 29 | - no language provided results in an `undefined` value for the attribute highlight-lines ([#40](https://github.com/deckgo/gatsby-remark-highlight-code/issues/40))
 30 | - highlight-lines information might be provided with the `node.lang` but als with `node.meta`
 31 | 
 32 | ### Build
 33 | 
 34 | - bump build dependencies
 35 | 
 36 | # 3.0.0 (2021-05-22)
 37 | 
 38 | ### Breaking Changes
 39 | 
 40 | - bump peer dependency `gatsby` to v3
 41 | - bump peer dependency `@deckdeckgo/highlight-code` to v3
 42 | - highlight lines styling default behavior modified. Instead of background color highlighting, it uses a color contrast ("highlight opacity 1, no highlighted opacity 0.32")
 43 | 
 44 | # 2.2.1 (2021-05-01)
 45 | 
 46 | ### Fix
 47 | 
 48 | - syntax highlighting for languages other than `javascript`
 49 | - empty language default to no attribute `language`
 50 | 
 51 | # 2.2.0 (2021-02-17)
 52 | 
 53 | ### Features
 54 | 
 55 | - support for lines highlighting ([#28](https://github.com/deckgo/gatsby-remark-highlight-code/issues/28))
 56 | - bump `@deckdeckgo/highlight-code` peer dependency requirement to `v2.4.0`
 57 | 
 58 | # 2.1.1 (2020-12-10)
 59 | 
 60 | Inherit `@deckdeckgo/highlight-code` v2.2.2:
 61 | 
 62 | ### Features
 63 | 
 64 | - display a `console.error` if the language is not supported
 65 | 
 66 | ### Fix
 67 | 
 68 | - support alias (such as `html` for `markup`)
 69 | - load alias required scripts
 70 | - required scripts loading race condition
 71 | 
 72 | # 2.1.0 (2020-09-17)
 73 | 
 74 | ### Features
 75 | 
 76 | - ability to remove the 3 dots in the window ([#21](https://github.com/deckgo/gatsby-remark-highlight-code/issues/21))
 77 | 
 78 | <a name="2.0.0"></a>
 79 | 
 80 | # 2.0.0 (2020-09-03)
 81 | 
 82 | ### Breaking Changes
 83 | 
 84 | - IE11, Edge 16-18 and Safari 10 not supported
 85 | 
 86 | P.S.: Actually, I am not sure these were ever supported, but at least now, it is clear they are not 😉.
 87 | 
 88 | <a name="1.4.7"></a>
 89 | 
 90 | # 1.4.7 (2020-08-21)
 91 | 
 92 | ### Fix
 93 | 
 94 | - load required scripts for prismjs / cannot highlight code language `php` ([@deckdeckgo#848](https://github.com/deckgo/deckdeckgo/issues/848))
 95 | 
 96 | <a name="1.4.6"></a>
 97 | 
 98 | # 1.4.6 (2020-08-08)
 99 | 
100 | ### Features
101 | 
102 | - bump highlight-code dependencies to last version including reference to most recent prismjs
103 | 
104 | <a name="1.4.5"></a>
105 | 
106 | # 1.4.5 (2020-07-17)
107 | 
108 | ### Documentation
109 | 
110 | - update readme for `gatsby-plugin-mdx` ([#17](https://github.com/deckgo/gatsby-remark-highlight-code/issues/17))
111 | 
112 | <a name="1.4.4"></a>
113 | 
114 | # 1.4.4 (2020-07-06)
115 | 
116 | ### Features
117 | 
118 | - trim the value of the generated html node ([#16](https://github.com/deckgo/gatsby-remark-highlight-code/pull/16))
119 | 
120 | <a name="1.4.3"></a>
121 | 
122 | # 1.4.3 (2020-07-03)
123 | 
124 | ### Style
125 | 
126 | - update highlight code component with a default overflow-y set to `auto` instead of `scroll`
127 | 
128 | <a name="1.4.2"></a>
129 | 
130 | # 1.4.2 (2020-06-17)
131 | 
132 | ### Documentation
133 | 
134 | - image tag src attribute to full URL path ([#14](https://github.com/deckgo/gatsby-remark-highlight-code/issues/14))
135 | 
136 | <a name="1.4.1"></a>
137 | 
138 | # 1.4.1 (2020-06-14)
139 | 
140 | ### Style
141 | 
142 | - improve line numbers color and background (inherit terminal's background and color of the code's comments)
143 | 
144 | <a name="1.4.0"></a>
145 | 
146 | # 1.4.0 (2020-05-21)
147 | 
148 | ### Features
149 | 
150 | - themes for the terminal carbon ([#12](https://github.com/deckgo/gatsby-remark-highlight-code/issues/12))
151 | 
152 | <a name="1.3.3"></a>
153 | 
154 | # 1.3.3 (2020-05-11)
155 | 
156 | ### Fix
157 | 
158 | - `head.querySelector` build errors ([#10](https://github.com/deckgo/gatsby-remark-highlight-code/issues/10))
159 | 
160 | <a name="1.3.2"></a>
161 | 
162 | # 1.3.2 (2020-04-27)
163 | 
164 | ### Fix
165 | 
166 | - update `@deckdeckgo/highlight-code` for not loaded languages ([#9](https://github.com/deckgo/gatsby-remark-highlight-code/issues/9))
167 | 
168 | <a name="1.3.1"></a>
169 | 
170 | # 1.3.1 (2020-04-26)
171 | 
172 | ### Features
173 | 
174 | - update `@deckdeckgo/highlight-code` peer dependencies version ([#7](https://github.com/deckgo/gatsby-remark-highlight-code/issues/7))
175 | 
176 | <a name="1.3.0"></a>
177 | 
178 | # 1.3.0 (2020-04-23)
179 | 
180 | ### Features
181 | 
182 | - add plugin config for `lineNumbers` and `editable` ([#7](https://github.com/deckgo/gatsby-remark-highlight-code/issues/7))
183 | - Prettier to format project's code
184 | 
185 | <a name="1.2.1"></a>
186 | 
187 | # 1.2.1 (2020-04-07)
188 | 
189 | ### Fix
190 | 
191 | - upgrade Web Component `@deckdeckgo/highlight-code` with CSS import fix
192 | 
193 | <a name="1.2.0"></a>
194 | 
195 | # 1.2.0 (2020-03-20)
196 | 
197 | ### Features
198 | 
199 | - upgrade Web Component `@deckdeckgo/highlight-code`
200 | 
201 | <a name="1.1.0"></a>
202 | 
203 | # 1.1.0 (2020-02-24)
204 | 
205 | ### Features
206 | 
207 | - introduces the option to select the `terminal` display
208 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # gatsby-remark-highlight-code
  2 | 
  3 | Adds stylish cards and syntax highlighting to code blocks in markdown files of your [Gatsby](https://www.gatsbyjs.org/) website.
  4 | 
  5 | The Web Component behind this feature was created for the web editor for presentations [DeckDeckGo](https://deckdeckgo.com).
  6 | 
  7 | It is implemented with [Stencil](https://stenciljs.com) and use [Prism.js](https://prismjs.com) under the hood.
  8 | 
  9 | The inspiration for the design of the "Macish" cards comes from the amazing [carbon](https://carbon.now.sh), a tool to create and share beautiful images of your source code, and for the "Ubuntu-ish" from the [article](https://dev.to/codypearce/ubuntu-terminal-in-css-1aeo) of [Cody Pearce](https://twitter.com/codyapearce).
 10 | 
 11 | ## Design
 12 | 
 13 | ### 1. Carbon
 14 | 
 15 | <div align="center">
 16 |   <img src="https://raw.githubusercontent.com/deckgo/gatsby-remark-highlight-code/master/static/screenshot-carbon.png" alt="Syntax highlighting code block as Carbon card" width="90%">
 17 | </div>
 18 | 
 19 | Multiple theming options.
 20 | 
 21 | <div align="center">
 22 |   <img src="https://raw.githubusercontent.com/deckgo/gatsby-remark-highlight-code/master/static/screenshot-carbon-themes.png" alt="Syntax highlighting code block as Carbon card" width="90%">
 23 | </div>
 24 | 
 25 | ### 2. Ubuntu
 26 | 
 27 | <div align="center">
 28 |   <img src="https://raw.githubusercontent.com/deckgo/gatsby-remark-highlight-code/master/static/screenshot-ubuntu.png" alt="Syntax highlighting code block as Ubuntu card" width="95%">
 29 | </div>
 30 | 
 31 | ### 3. None
 32 | 
 33 | No predefined cards but stylable with multiple [CSS variables](#variables).
 34 | 
 35 | <div align="center">
 36 |   <img src="https://raw.githubusercontent.com/deckgo/gatsby-remark-highlight-code/master/static/screenshot-none.png" alt="Syntax highlighting code block" width="95%">
 37 | </div>
 38 | 
 39 | ## Table of contents
 40 | 
 41 | - [Install](#install)
 42 | - [How to use](#how-to-use)
 43 |   - [Configure](#configure)
 44 |   - [Load the component](#load-the-component)
 45 |   - [Plugin Options](#plugin-options)
 46 | - [Language](#language)
 47 | - [Styling](#styling)
 48 |   - [Terminal](#terminal)
 49 |   - [Theme](#theme)
 50 |   - [Variables](#variables)
 51 |   - [Lines highlighting](#lines-highlighting)
 52 | - [Showcase](#showcase)
 53 | - [License](#license)
 54 | 
 55 | ## Install
 56 | 
 57 | ```bash
 58 | npm install --save gatsby-transformer-remark gatsby-remark-highlight-code @deckdeckgo/highlight-code
 59 | ```
 60 | 
 61 | ## How to use
 62 | 
 63 | In order to use this plugin, it should be first `configured` and then `loaded` at runtime.
 64 | 
 65 | ### Configure
 66 | 
 67 | If you are using "gatsby-transformer-remark", you can add "gatsby-remark-highlight-code" like this:
 68 | 
 69 | ```javascript
 70 | // In your gatsby-config.js
 71 | plugins: [
 72 |   {
 73 |     resolve: `gatsby-transformer-remark`,
 74 |     options: {
 75 |       plugins: [
 76 |         {
 77 |           resolve: `gatsby-remark-highlight-code`,
 78 |         },
 79 |       ],
 80 |     },
 81 |   },
 82 | ];
 83 | ```
 84 | 
 85 | If you are using "gatsby-plugin-mdx", you can add "gatsby-remark-highlight-code" like this:
 86 | 
 87 | ```javascript
 88 | // In your gatsby-config.js
 89 | plugins: [
 90 |   {
 91 |     resolve: `gatsby-plugin-mdx`,
 92 |     options: {
 93 |       extensions: [".mdx", ".md"],
 94 |       gatsbyRemarkPlugins: [
 95 |         {
 96 |           resolve: `gatsby-remark-highlight-code`,
 97 |         },
 98 |       ],
 99 |     },
100 |   },
101 | ];
102 | ```
103 | 
104 | ### Load the component
105 | 
106 | Load the [@deckdeckgo/highlight-code] once in one of your pages or components.
107 | 
108 | For example add the following in the main file of your website, in your `index.js`, or in your `layout.js`, in the template of your blog or simply load it where you need it.
109 | 
110 | ```javascript
111 | import { defineCustomElements as deckDeckGoHighlightElement } from "@deckdeckgo/highlight-code/dist/loader";
112 | deckDeckGoHighlightElement();
113 | ```
114 | 
115 | ### Plugin Options
116 | 
117 | | property    | type                                                                                                                                                                                                                                                                                                                                                                                                   | default   |
118 | | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------- |
119 | | terminal    | `carbon`, `ubuntu` or `none`                                                                                                                                                                                                                                                                                                                                                                           | `carbon`  |
120 | | 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` |
121 | | editable    | `boolean`                                                                                                                                                                                                                                                                                                                                                                                              | `false`   |
122 | | lineNumbers | `boolean`                                                                                                                                                                                                                                                                                                                                                                                              | `false`   |
123 | 
124 | ## Language
125 | 
126 | This plugin supports all languages supported by [Prism.js](https://prismjs.com). Nothing particular needs to be specified because the component [@deckdeckgo/highlight-code] will load them automatically at runtime.
127 | 
128 | ## Styling
129 | 
130 | Code blocks are displayed in stylish cards but the behavior could be customized.
131 | 
132 | ### Terminal
133 | 
134 | Per default, code blocks are going to be displayed in `carbon` ("Macish like") container.
135 | 
136 | It is also possible to use `ubuntu` (an Ubuntu-like container) or `none` (no window container).
137 | 
138 | Such settings can be provided in the configuration of the plugin.
139 | 
140 | ```javascript
141 | // In your gatsby-config.js
142 | plugins: [
143 |   {
144 |     resolve: `gatsby-transformer-remark`,
145 |     options: {
146 |       plugins: [
147 |         {
148 |           resolve: `gatsby-remark-highlight-code`,
149 |           options: {
150 |             terminal: "ubuntu",
151 |           },
152 |         },
153 |       ],
154 |     },
155 |   },
156 | ];
157 | ```
158 | 
159 | ### Theme
160 | 
161 | The terminal `carbon` can be themed with a wide range of predefined themes.
162 | 
163 | These can be tried out in the [@deckdeckgo/highlight-code] documentation and applied as following:
164 | 
165 | ```javascript
166 | // In your gatsby-config.js
167 | plugins: [
168 |   {
169 |     resolve: `gatsby-transformer-remark`,
170 |     options: {
171 |       plugins: [
172 |         {
173 |           resolve: `gatsby-remark-highlight-code`,
174 |           options: {
175 |             terminal: "carbon",
176 |             theme: "blackboard",
177 |           },
178 |         },
179 |       ],
180 |     },
181 |   },
182 | ];
183 | ```
184 | 
185 | ### Variables
186 | 
187 | See the [@deckdeckgo/highlight-code] documentation for the list of CSS4 styling variables.
188 | 
189 | ### Lines highlighting
190 | 
191 | Single or multiple lines of code can be highlighted.
192 | 
193 | <div align="center">
194 |   <img src="https://raw.githubusercontent.com/deckgo/gatsby-remark-highlight-code/master/static/highlight-lines.gif" alt="Highlight lines" width="50%">
195 | </div>
196 | 
197 | The Markdown syntax is the following: next to the specification of the language, between brackets `{}`, the lines should be provided in a comma separated list. A single line can be provided (for example `dart{1}`) or multiple one, from and to being separated with a dash (for example `javascript{3-6}`). Both single or multiple lines can be mixed (for example `typescript{2, 3-4, 7, 8-15}`).
198 | 
199 | Animation between the selected highlighted groups can be triggered with the help of methods (see component [@deckdeckgo/highlight-code] documentation for details).
200 | 
201 | ## Showcase
202 | 
203 | I (David here) use this plugin in the blog of my personal website [daviddalbusco.com](https://daviddalbusco.com).
204 | 
205 | ## License
206 | 
207 | MIT © [David Dal Busco](mailto:david.dalbusco@outlook.com) and [Nicolas Mattia](mailto:nicolas@nmattia.com)
208 | 
209 | [@deckdeckgo/highlight-code]: https://docs.deckdeckgo.com/?path=/story/components-highlight-code--highlight-code
210 | 


--------------------------------------------------------------------------------