-
Notifications
You must be signed in to change notification settings - Fork 1.2k
/
markdown.ts
60 lines (57 loc) · 2 KB
/
markdown.ts
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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
import { highlight, highlightAuto } from 'highlight.js/lib/highlight'
// tslint:disable-next-line:import-blacklist this is the only file allowed to import this module, all other modules must use renderMarkdown() exported from here
import marked from 'marked'
import sanitize from 'sanitize-html'
/**
* Escapes HTML by replacing characters like `<` with their HTML escape sequences like `<`
*/
const escapeHTML = (html: string): string => {
const span = document.createElement('span')
span.textContent = html
return span.innerHTML
}
/**
* Attempts to syntax-highlight the given code.
* If the language is not given, it is auto-detected.
* If an error occurs, the code is returned as plain text with escaped HTML entities
*
* @param code The code to highlight
* @param language The language of the code, if known
* @return Safe HTML
*/
export const highlightCodeSafe = (code: string, language?: string): string => {
try {
if (language === 'plaintext' || language === 'text') {
return escapeHTML(code)
}
if (language) {
return highlight(language, code, true).value
}
return highlightAuto(code).value
} catch (err) {
console.warn('Error syntax-highlighting hover markdown code block', err)
return escapeHTML(code)
}
}
/**
* Renders the given markdown to HTML, highlighting code and sanitizing dangerous HTML.
* Can throw an exception on parse errors.
*/
export const renderMarkdown = (markdown: string): string => {
const rendered = marked(markdown, {
gfm: true,
breaks: true,
sanitize: false,
highlight: (code, language) => highlightCodeSafe(code, language),
})
return sanitize(rendered, {
// Allow highligh.js styles, e.g.
// <span class="hljs-keyword">
// <code class="language-javascript">
allowedTags: [...sanitize.defaults.allowedTags, 'span'],
allowedAttributes: {
span: ['class'],
code: ['class'],
},
})
}