forked from gatsbyjs/gatsby
-
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.js
42 lines (37 loc) 路 1.55 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
const visit = require(`unist-util-visit`)
const parseLineNumberRange = require(`./parse-line-number-range`)
const highlightCode = require(`./highlight-code`)
module.exports = ({ markdownAST }, { classPrefix = 'language-' } = {}) => {
visit(markdownAST, `code`, node => {
let language = node.lang
let { splitLanguage, highlightLines } = parseLineNumberRange(language)
language = splitLanguage
// PrismJS's theme styles are targeting pre[class*="language-"]
// to apply its styles. We do the same here so that users
// can apply a PrismJS theme and get the expected, ready-to-use
// outcome without any additional CSS.
//
// @see https://github.com/PrismJS/prism/blob/1d5047df37aacc900f8270b1c6215028f6988eb1/themes/prism.css#L49-L54
let languageName = `none`
if (language) {
language = language.toLowerCase()
languageName = language
}
// Allow users to specify a custom class prefix to avoid breaking
// line highlights if Prism is required by any other code.
// This supports custom user styling without causing Prism to
// re-process our already-highlighted markup.
// @see https://github.com/gatsbyjs/gatsby/issues/1486
const className = `${classPrefix}${languageName}`
// Replace the node with the markup we need to make
// 100% width highlighted code lines work
node.type = `html`
node.value = `<div class="gatsby-highlight">
<pre class="${className}"><code>${highlightCode(
language,
node.value,
highlightLines
)}</code></pre>
</div>`
})
}