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>