Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
63 lines (61 sloc) 1.88 KB
import React from "react"
import Highlight, { defaultProps } from "prism-react-renderer"
import syntaxTheme from "prism-react-renderer/themes/dracula"
export default ({ children, className, metastring }) => {
// Extract Line Highlighting from metastring
// Input: {4, 5-7, 10, 12-14}
// Output: [4, 5, 6, 7, 10, 12, 13, 14]
let shouldHighlight = []
if (metastring !== undefined) {
metastring
.slice(1, -1)
.split(",")
.forEach(x => {
if (x.includes("-")) {
const y = x.split("-")
for (let i = y[0]; i <= y[1]; i++) {
shouldHighlight.push(parseInt(i))
}
} else {
shouldHighlight.push(parseInt(x))
}
})
}
// Assign language to none if className is undefined
const language =
className !== undefined ? className.replace(/language-/, "") : null
return (
<div className="code-block">
<Highlight
{...defaultProps}
code={children.trim()}
theme={syntaxTheme}
language={language}
>
{({ className, style, tokens, getLineProps, getTokenProps }) => (
<pre
className={className}
style={{ ...style }}
data-lang={language === null ? "" : language}
>
<code>
{tokens.map((line, i) => {
const lineProps = getLineProps({ line, key: i })
if (shouldHighlight.indexOf(i) !== -1) {
lineProps.className = `${lineProps.className} highlight-line`
}
return (
<div key={i} {...lineProps}>
{line.map((token, key) => (
<span key={key} {...getTokenProps({ token, key })} />
))}
</div>
)
})}
</code>
</pre>
)}
</Highlight>
</div>
)
}
You can’t perform that action at this time.