导出HTML、PDF支持带预览主题导出

This commit is contained in:
xiaoqi.cxq 2023-02-26 11:29:25 +08:00
parent 8713688b57
commit 1b8124f2a2
5 changed files with 72 additions and 0 deletions

View File

@ -70,6 +70,7 @@ StackEdit中文版
- 支持MD文档之间链接跳转2022-11-20
- 支持预览区域选择主题样式2022-12-04
- Gitlab的支持优化2023-02-23
- 导出HTML、PDF支持带预览主题导出2023-02-26
## 国外开源版本弊端:
- 作者已经不维护了

View File

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{files.0.name}}</title>
<link rel="stylesheet" href="https://stackedit.cn/style.css" />
<style type="text/css">
{{{files.0.content.themeStyleContent}}}
</style>
</head>
{{#if pdf}}
<body class="stackedit stackedit--pdf">
{{else}}
<body class="stackedit">
{{/if}}
<div class="stackedit__left">
<div class="stackedit__toc">
{{#tocToHtml files.0.content.toc 2}}{{/tocToHtml}}
</div>
</div>
<div class="stackedit__right">
<div class="stackedit__html">
<div class="{{{files.0.content.themeClass}}}">
{{{files.0.content.html}}}
</div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{files.0.name}}</title>
<link rel="stylesheet" href="https://stackedit.cn/style.css" />
<style type="text/css">
{{{files.0.content.themeStyleContent}}}
</style>
</head>
{{#if pdf}}
<body class="stackedit stackedit--pdf">
{{else}}
<body class="stackedit">
{{/if}}
<div class="stackedit__html">
<div class="{{{files.0.content.themeClass}}}">
{{{files.0.content.html}}}
</div>
</div>
</body>
</html>

View File

@ -73,6 +73,12 @@ export default {
const parsingCtx = markdownConversionSvc.parseSections(converter, content.text);
const conversionCtx = markdownConversionSvc.convert(parsingCtx);
const html = conversionCtx.htmlSectionList.map(htmlSanitizer.sanitizeHtml).join('');
const themeClass = `preview-theme--${store.state.theme.currPreviewTheme}`;
let themeStyleContent = '';
const themeStyleEle = document.getElementById(`preview-theme-${store.state.theme.currPreviewTheme}`);
if (themeStyleEle) {
themeStyleContent = themeStyleEle.innerText;
}
containerElt.innerHTML = html;
extensionSvc.sectionPreview(containerElt, options);
@ -128,6 +134,8 @@ export default {
yamlProperties: content.properties,
html: containerElt.innerHTML,
toc,
themeClass,
themeStyleContent,
},
}],
};

View File

@ -8,6 +8,8 @@ import defaultLayoutSettings from '../data/defaults/defaultLayoutSettings';
import plainHtmlTemplate from '../data/templates/plainHtmlTemplate.html';
import styledHtmlTemplate from '../data/templates/styledHtmlTemplate.html';
import styledHtmlWithTocTemplate from '../data/templates/styledHtmlWithTocTemplate.html';
import styledHtmlWithThemeTemplate from '../data/templates/styledHtmlWithThemeTemplate.html';
import styledHtmlWithThemeAndTocTemplate from '../data/templates/styledHtmlWithThemeAndTocTemplate.html';
import jekyllSiteTemplate from '../data/templates/jekyllSiteTemplate.html';
import constants from '../data/constants';
import features from '../data/features';
@ -97,6 +99,8 @@ const defaultTemplates = {
plainHtml: makeAdditionalTemplate('Plain HTML', plainHtmlTemplate),
styledHtml: makeAdditionalTemplate('Styled HTML', styledHtmlTemplate),
styledHtmlWithToc: makeAdditionalTemplate('Styled HTML with TOC', styledHtmlWithTocTemplate),
styledHtmlWithTheme: makeAdditionalTemplate('Styled HTML with Theme', styledHtmlWithThemeTemplate),
styledHtmlWithThemeAndToc: makeAdditionalTemplate('Styled HTML with Theme And TOC', styledHtmlWithThemeAndTocTemplate),
jekyllSite: makeAdditionalTemplate('Jekyll site', jekyllSiteTemplate),
};