Feature/highlightjs (#242)

* Add highlighting for code blocks

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
This commit is contained in:
mrdrogdrog 2020-06-22 22:39:14 +02:00 committed by GitHub
parent b3899cd1a5
commit e03da3bd76
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 170 additions and 2 deletions

View file

@ -0,0 +1,3 @@
.markdown-body {
@import '../../../../../../node_modules/highlight.js/styles/github-gist';
}

View file

@ -0,0 +1,16 @@
import { DomElement } from 'domhandler'
import React, { ReactElement } from 'react'
import { HighlightedCode } from '../../../../common/highlighted-code/highlighted-code'
import './highlighted-code.scss'
const getElementReplacement = (codeNode: DomElement, index: number, counterMap: Map<string, number>): (ReactElement | undefined) => {
if (codeNode.name !== 'code' || !codeNode.attribs || !codeNode.attribs['data-highlight-language'] || !codeNode.children || !codeNode.children[0]) {
return
}
const language = codeNode.attribs['data-highlight-language']
const showGutter = codeNode.attribs['data-show-gutter'] !== undefined
return <HighlightedCode key={index} language={language} showGutter={showGutter} code={codeNode.children[0].data as string}/>
}
export { getElementReplacement as getHighlightedCodeBlock }