marktext/src/muya/lib/utils/exportHtml.js
Ran Luo 39e1ea8081
Prism replace codemirror (#516)
* feat: basic use of code block by prism

* opti: remove codemirror from muya

* feat: add highlight to math and frontmatter

* feat: import and export in math block, html block, frontmatter, code block

* update: paragraph ctrl

* feat: copy and paste in new math block and html block

* feat: update code block style in dark theme

* feat: search and replace in code block

* fix: update menu item status when selection changed

* opti: optimization of updateCtrl divide it into clickCtrl and inputCtrl

* opti: search and replace in code block when no lang selected

* opti: copy paste in code block

* feat: insert paragraph before or after code block

* opti: change emoji.js to emoji.json

* feat: auto indent in code block

* opti: auto indent in code block

* opti: remove the use of snabbdom-virtualize

* fix: do not show format float box in code block

* opti: emoji picker

* update: delete some unused codes

* update: electron

* use a temp prismjs2 instead of prismjs
2018-10-23 21:21:58 +08:00

91 lines
2.0 KiB
JavaScript

import marked from '../parser/marked'
import Prism from 'prismjs2'
import katex from 'katex'
import githubMarkdownCss from 'github-markdown-css/github-markdown.css'
import highlightCss from 'prismjs2/themes/prism.css'
import katexCss from 'katex/dist/katex.css'
import { EXPORT_DOMPURIFY_CONFIG } from '../config'
import { sanitize } from '../utils'
import { validEmoji } from '../ui/emojis'
export const getSanitizeHtml = markdown => {
const html = marked(markdown)
return sanitize(html, EXPORT_DOMPURIFY_CONFIG)
}
class ExportHtml {
constructor (markdown) {
this.markdown = markdown
}
// render pure html by marked
renderHtml () {
return marked(this.markdown, {
highlight (code, lang) {
return Prism.highlight(code, Prism.languages[lang], lang)
},
emojiRenderer (emoji) {
const validate = validEmoji(emoji)
if (validate) {
return validate.emoji
} else {
return `:${emoji}:`
}
},
mathRenderer (math, displayMode) {
return katex.renderToString(math, {
displayMode
})
}
})
}
// get html with style
generate (filename = '') {
const html = this.renderHtml()
return `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>${filename}</title>
<style>
${githubMarkdownCss}
</style>
<style>
${highlightCss}
</style>
<style>
${katexCss}
</style>
<style>
.markdown-body {
box-sizing: border-box;
min-width: 200px;
max-width: 980px;
margin: 0 auto;
padding: 45px;
}
.markdown-body table {
display: table;
}
.markdown-body input[type="checkbox"] ~ p {
margin-top: 0;
display: inline-block;
}
@media (max-width: 767px) {
.markdown-body {
padding: 15px;
}
}
</style>
</head>
<body>
<article class="markdown-body">
${html}
</article>
</body>
</html>`
}
}
export default ExportHtml