Skip to content

Commit c43c4c8

Browse files
timhagnpieh
timhagn
authored and
pieh
committed
feat(gatsby-remark-embed-snippet): apply gatsby-remark-prismjs configuration to embedded snippets (#13973)
BREAKING CHANGE: Configuration of `gatsby-remark-prismjs` is used to generate markup for code snippets. `classPrefix` option has been removed from `gatsby-remark-embed-snippet` (same option in `gatsby-remark-prismjs` will be used instead).
1 parent 8dd7693 commit c43c4c8

File tree

5 files changed

+74
-72
lines changed

5 files changed

+74
-72
lines changed

‎examples/using-remark/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
"gatsby-plugin-typography": "^2.2.13",
1616
"gatsby-remark-autolink-headers": "^2.0.16",
1717
"gatsby-remark-copy-linked-files": "^2.0.11",
18-
"gatsby-remark-embed-snippet": "^3.2.4",
18+
"gatsby-remark-embed-snippet": "^4.0.0",
1919
"gatsby-remark-graphviz": "^1.0.9",
2020
"gatsby-remark-images": "^3.0.10",
2121
"gatsby-remark-katex": "^3.0.4",

‎packages/gatsby-remark-embed-snippet/README.md‎

Lines changed: 28 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -164,7 +164,11 @@ function App() {
164164

165165
## How to use
166166

167-
**Important**: This module must appear before `gatsby-remark-prismjs` in your plugins array, or the markup will have already been transformed into a code block and this plugin will fail to detect it and inline the file.
167+
**Important**: This module must appear before `gatsby-remark-prismjs` in your
168+
plugins array, or the markup will have already been transformed into a code
169+
block and this plugin will fail to detect it and inline the file.
170+
For further information about its options, visit the `gatsby-remark-prismjs`
171+
[README](https://www.gatsbyjs.org/packages/gatsby-remark-prismjs/).
168172

169173
```js
170174
// In your gatsby-config.js
@@ -177,15 +181,6 @@ module.exports = {
177181
{
178182
resolve: "gatsby-remark-embed-snippet",
179183
options: {
180-
// Class prefix for <pre> tags containing syntax highlighting;
181-
// defaults to 'language-' (eg <pre class="language-js">).
182-
// If your site loads Prism into the browser at runtime,
183-
// (eg for use with libraries like react-live),
184-
// you may use this to prevent Prism from re-processing syntax.
185-
// This is an uncommon use-case though;
186-
// If you're unsure, it's best to use the default value.
187-
classPrefix: "language-",
188-
189184
// Example code links are relative to this dir.
190185
// eg examples/path/to/file.js
191186
directory: `${__dirname}/examples/`,
@@ -202,6 +197,29 @@ module.exports = {
202197
// This is an uncommon use-case though;
203198
// If you're unsure, it's best to use the default value.
204199
classPrefix: "language-",
200+
// This is used to allow setting a language for inline code
201+
// (i.e. single backticks) by creating a separator.
202+
// This separator is a string and will do no white-space
203+
// stripping.
204+
// A suggested value for English speakers is the non-ascii
205+
// character '›'.
206+
inlineCodeMarker: null,
207+
// This lets you set up language aliases. For example,
208+
// setting this to '{ sh: "bash" }' will let you use
209+
// the language "sh" which will highlight using the
210+
// bash highlighter.
211+
aliases: {},
212+
// This toggles the display of line numbers globally alongside the code.
213+
// To use it, add the following line in gatsby-browser.js
214+
// right after importing the prism color scheme:
215+
// `require("prismjs/plugins/line-numbers/prism-line-numbers.css");`
216+
// Defaults to false.
217+
// If you wish to only show line numbers on certain code blocks,
218+
// leave false and use the {numberLines: true} syntax.
219+
showLineNumbers: false,
220+
// If setting this to true, the parser won't handle and highlight inline
221+
// code used in markdown i.e. single backtick code like `this`.
222+
noInlineHighlight: false,
205223
},
206224
},
207225
],

‎packages/gatsby-remark-embed-snippet/src/__tests__/__snapshots__/index.js.snap‎

Lines changed: 24 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ Object {
66
Object {
77
"children": Array [
88
Object {
9+
"lang": "css",
910
"position": Position {
1011
"end": Object {
1112
"column": 24,
@@ -19,10 +20,8 @@ Object {
1920
"offset": 0,
2021
},
2122
},
22-
"type": "html",
23-
"value": "<div class=\\"gatsby-highlight\\">
24-
<pre class=\\"language-css\\"><code><span class=\\"token selector\\">html</span> <span class=\\"token punctuation\\">{</span> <span class=\\"token property\\">height</span><span class=\\"token punctuation\\">:</span> 100%<span class=\\"token punctuation\\">;</span> <span class=\\"token punctuation\\">}</span></code></pre>
25-
</div>",
23+
"type": "code",
24+
"value": "html { height: 100%; }",
2625
},
2726
],
2827
"position": Position {
@@ -63,6 +62,7 @@ Object {
6362
Object {
6463
"children": Array [
6564
Object {
65+
"lang": "html",
6666
"position": Position {
6767
"end": Object {
6868
"column": 25,
@@ -76,10 +76,8 @@ Object {
7676
"offset": 0,
7777
},
7878
},
79-
"type": "html",
80-
"value": "<div class=\\"gatsby-highlight\\">
81-
<pre class=\\"language-html\\"><code><span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;</span>html</span><span class=\\"token punctuation\\">></span></span><span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;/</span>html</span><span class=\\"token punctuation\\">></span></span></code></pre>
82-
</div>",
79+
"type": "code",
80+
"value": "<html></html>",
8381
},
8482
],
8583
"position": Position {
@@ -120,6 +118,7 @@ Object {
120118
Object {
121119
"children": Array [
122120
Object {
121+
"lang": "jsx",
123122
"position": Position {
124123
"end": Object {
125124
"column": 23,
@@ -133,10 +132,8 @@ Object {
133132
"offset": 0,
134133
},
135134
},
136-
"type": "html",
137-
"value": "<div class=\\"gatsby-highlight\\">
138-
<pre class=\\"language-jsx\\"><code><span class=\\"token keyword\\">const</span> foo <span class=\\"token operator\\">=</span> <span class=\\"token string\\">\\"bar\\"</span><span class=\\"token punctuation\\">;</span></code></pre>
139-
</div>",
135+
"type": "code",
136+
"value": "const foo = \\"bar\\";",
140137
},
141138
],
142139
"position": Position {
@@ -177,6 +174,7 @@ Object {
177174
Object {
178175
"children": Array [
179176
Object {
177+
"lang": "markup",
180178
"position": Position {
181179
"end": Object {
182180
"column": 23,
@@ -190,10 +188,8 @@ Object {
190188
"offset": 0,
191189
},
192190
},
193-
"type": "html",
194-
"value": "<div class=\\"gatsby-highlight\\">
195-
<pre class=\\"language-markup\\"><code># Hi</code></pre>
196-
</div>",
191+
"type": "code",
192+
"value": "# Hi",
197193
},
198194
],
199195
"position": Position {
@@ -234,6 +230,7 @@ Object {
234230
Object {
235231
"children": Array [
236232
Object {
233+
"lang": "yaml",
237234
"position": Position {
238235
"end": Object {
239236
"column": 25,
@@ -247,10 +244,8 @@ Object {
247244
"offset": 0,
248245
},
249246
},
250-
"type": "html",
251-
"value": "<div class=\\"gatsby-highlight\\">
252-
<pre class=\\"language-yaml\\"><code><span class=\\"token key atrule\\">name</span><span class=\\"token punctuation\\">:</span> Brian Vaughn</code></pre>
253-
</div>",
247+
"type": "code",
248+
"value": "name: Brian Vaughn",
254249
},
255250
],
256251
"position": Position {
@@ -291,6 +286,7 @@ Object {
291286
Object {
292287
"children": Array [
293288
Object {
289+
"lang": "bash",
294290
"position": Position {
295291
"end": Object {
296292
"column": 23,
@@ -304,10 +300,8 @@ Object {
304300
"offset": 0,
305301
},
306302
},
307-
"type": "html",
308-
"value": "<div class=\\"gatsby-highlight\\">
309-
<pre class=\\"language-bash\\"><code><span class=\\"token function\\">pwd</span></code></pre>
310-
</div>",
303+
"type": "code",
304+
"value": "pwd",
311305
},
312306
],
313307
"position": Position {
@@ -348,6 +342,7 @@ Object {
348342
Object {
349343
"children": Array [
350344
Object {
345+
"lang": "none",
351346
"position": Position {
352347
"end": Object {
353348
"column": 20,
@@ -361,10 +356,8 @@ Object {
361356
"offset": 0,
362357
},
363358
},
364-
"type": "html",
365-
"value": "<div class=\\"gatsby-highlight\\">
366-
<pre class=\\"language-none\\"><code>const foo = \\"bar\\";</code></pre>
367-
</div>",
359+
"type": "code",
360+
"value": "const foo = \\"bar\\";",
368361
},
369362
],
370363
"position": Position {
@@ -405,6 +398,7 @@ Object {
405398
Object {
406399
"children": Array [
407400
Object {
401+
"lang": "jsx",
408402
"position": Position {
409403
"end": Object {
410404
"column": 23,
@@ -418,10 +412,8 @@ Object {
418412
"offset": 0,
419413
},
420414
},
421-
"type": "html",
422-
"value": "<div class=\\"gatsby-highlight\\">
423-
<pre class=\\"language-jsx\\"><code><span class=\\"token keyword\\">const</span> foo <span class=\\"token operator\\">=</span> <span class=\\"token string\\">\\"bar\\"</span><span class=\\"token punctuation\\">;</span></code></pre>
424-
</div>",
415+
"type": "code",
416+
"value": "const foo = \\"bar\\";",
425417
},
426418
],
427419
"position": Position {

‎packages/gatsby-remark-embed-snippet/src/__tests__/index.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,16 @@ describe(`gatsby-remark-embed-snippet`, () => {
4848
)
4949
})
5050

51+
it(`should error if an invalid file path is specified`, () => {
52+
fs.existsSync.mockImplementation(path => path !== `examples/hello-world.js`)
53+
54+
const markdownAST = remark.parse(`\`embed:hello-world.js\``)
55+
56+
expect(() => plugin({ markdownAST }, { directory: `examples` })).toThrow(
57+
`Invalid snippet specified; no such file "examples/hello-world.js"`
58+
)
59+
})
60+
5161
it(`should not modify non-embed inlineCode nodes`, () => {
5262
const markdownAST = remark.parse(`\`console.log("hi")\``)
5363
const transformed = plugin({ markdownAST }, { directory: `examples` })

‎packages/gatsby-remark-embed-snippet/src/index.js‎

Lines changed: 11 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,19 @@ const fs = require(`fs`)
44
const normalizePath = require(`normalize-path`)
55
const visit = require(`unist-util-visit`)
66

7-
const highlightCode = require(`gatsby-remark-prismjs/highlight-code`)
8-
97
// Language defaults to extension.toLowerCase();
108
// This map tracks languages that don't match their extension.
119
const FILE_EXTENSION_TO_LANGUAGE_MAP = {
1210
js: `jsx`,
1311
md: `markup`,
1412
sh: `bash`,
1513
rb: `ruby`,
14+
py: `python`,
15+
ps1: `powershell`,
16+
psm1: `powershell`,
17+
bat: `batch`,
18+
h: `c`,
19+
tex: `latex`,
1620
}
1721

1822
const getLanguage = file => {
@@ -27,10 +31,7 @@ const getLanguage = file => {
2731
: extension.toLowerCase()
2832
}
2933

30-
module.exports = (
31-
{ markdownAST },
32-
{ classPrefix = `language-`, directory } = {}
33-
) => {
34+
module.exports = ({ markdownAST }, { directory } = {}) => {
3435
if (!directory) {
3536
throw Error(`Required option "directory" not specified`)
3637
} else if (!fs.existsSync(directory)) {
@@ -60,29 +61,10 @@ module.exports = (
6061
// @see https://github.com/PrismJS/prism/blob/1d5047df37aacc900f8270b1c6215028f6988eb1/themes/prism.css#L49-L54
6162
const language = getLanguage(file)
6263

63-
// Allow users to specify a custom class prefix to avoid breaking
64-
// line highlights if Prism is required by any other code.
65-
// This supports custom user styling without causing Prism to
66-
// re-process our already-highlighted markup.
67-
// @see https://github.com/gatsbyjs/gatsby/issues/1486
68-
const className = language
69-
.split(` `)
70-
.map(token => `${classPrefix}${token}`)
71-
.join(` `)
72-
73-
// Replace the node with the markup we need to make 100% width highlighted code lines work
74-
try {
75-
node.value = `<div class="gatsby-highlight">
76-
<pre class="${className}"><code>${highlightCode(
77-
language,
78-
code
79-
).trim()}</code></pre>
80-
</div>`
81-
node.type = `html`
82-
} catch (e) {
83-
// rethrow error pointing to a file
84-
throw Error(`${e.message}\nFile: ${file}`)
85-
}
64+
// Change the node type to code, insert our file as value and set language.
65+
node.type = `code`
66+
node.value = code
67+
node.lang = language
8668
}
8769
})
8870

0 commit comments

Comments
 (0)