Markdown 模板

Markdown HTML模板

Markdown 的 HTML 模板控制的是 Markdown 解析为 HTML 过程,在设置中有相应配置;除此之外,每个目录(文件夹)对应的配置内也有 Markdown HTML模板的设置,仅对当前目录内的文件生效,并且优先级高于全局的配置。

模板中需要指定{{ content }}这个变量,这是Markdown转义过来原始的HTML内容,另外{{ title }}一般放在<head><title>上,{{ css }}这个变量对应的是一个CSS样式文件,它是由当前界面风格自动生成的,你也可以用自己的样式文件替代。<--header_scripts-->最终会被替换为流程图支持的js文件,<!--mathjax-->则是对应数学公式支持的js文件,如非自行替换,一般建议保留。

Markdown 内容模板 (仅 Pro)

Markdown 内容模板是针对目录(文件夹)配置的。在 Markdown 解析为 HTML 之前,会重新渲染原始内容(非 HTML)。内容模板本身也是一个 Markdown 文件,当前可以直接将自定义的 css 嵌入到模板本身,最终影响实际样式,也可以作为一个轻量的模板使用。

any contents here
<a_markdown.md>
<current>

如上示例,<>包裹的,表示是当前根目录下相对路径的 Markdown 文件,会读取其内容并替换,而<current>比较特殊,表示当前编辑的文档源内容。如果模板中没有申明<current>,而在<a_markdown.md> (a_markdown.md 仅仅是举例,实际情况由你自己决定文件名) 的源内容中有<current>,则后者中的<current>会生效。
当然,模板内容可以仅仅是<a_markdown.md>, 那么a_markdown.md文件会作为模板,如果里面有<current>,则最终当前文档的内容会替换掉<current>,从而在编译为 HTML 前生成新的原始文本以供编译。

元素替换

Markdown 的内容模板,也支持 meta 属性的声明,如下文所示,h2这个属性,表示最终渲染的 HTML 内容的 H2标签,会被所声明的 HTML 片段包裹,其中$表示整个 H2被包裹,$$则表示 H2内的 innerHTML。

---
h2: <section class=t1><section class=t2><section class=t3>$</section></section></section>
wechat_body_style: "line-height:1.7em;padding:0 20px; "
---
<current>

注意: wechat_body_style是比较特殊的属性,针对微信公众号的导出格式的全局样式。

附: Markdown HTML默认模板源码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
    <meta name="renderer" content="webkit"/>
    <title>{{ title }}</title>
    <link rel="stylesheet" href="{{ css }}">
    <!--header_scripts-->
</head>
<body>


<div class="post">
    {% if with_title and filename !='cover'%}
    <style type="text/css">
    .post_title{
        color: #505050;
        font-weight: bold;
        font-size: 2.2em;
        padding-bottom: 0.5em;
        margin-top: 0.1em;
        margin-bottom: 1.6em;
        border-bottom: 1px dashed #eeeeee;
    }
    </style>
    <h2 class="post_title"> {{ title }} </h2>
    {% endif %}
    <div class="post_body">
        {{ content }}
    </div>
</div>

<!--mathjax-->

</body>
</html>