首页
11. Markdown 语法及样式设计

在 ghost0.x 的版本中,它的文章是完全用 Markdown 来书写的。新版本默认的编辑方式中,我们仍然可以使用 Markdown 的语法来书写,但是它默认会变成预览后的效果,我们看不到 Markdown 格式的源码,不便于修改,所以不太推荐这种编辑方式。

还有一种方式就是在编辑器每行的开头有个加号按钮,我们可以通过这里去添加一个 Markdown 编辑框,这个编辑框可以切换编辑和预览模式,比较方便编辑。

image_1ejs3rrco14ueq71upb1teddss9.png-49.2kB

image_1ejs400p1m7j1j571u583t1a0um.png-34.8kB

Markdown 语法

Markdown 是一种轻量级标记语言,它的语法相对来说十分简单好记,对新手比较友好,所以这里就不过多介绍了。大家可以参考下面的文档:

1. Markdown 语法说明 (简体中文版)
2. How to Write Faster, Better & Longer: The Ultimate Guide to Markdown
3. Ghost Markdown reference

点击 Markdown 编辑框的问号按钮,可以看到一个语法速查表,方便我们去参考。

image_1ejs6ocbss9n24i1ef11bbmhi513.png-85.9kB

需要注意的是,不同的软件对于 Markdown 的支持度不尽相同,比如有的支持 Todo 列表功能、LaTex 公式、流程图等等,有的不支持。

Markdown 样式设计

Markdown 标记语言最终会被转换成相应的 HTML 标签,我们只要知道所有的 Markdown 语法最终生成的标签,就可以针对性地去设计样式表了。前面提到过,像网上有很多这种 Markdown Css Themes,其实都大同小异。

下面我们讲一下具体的设计。

1. 首先是#,会被转换成h标签

常用的基本上都是h1 ~ h4,后面可以不去考虑。对于大标题,比如h1h2,为了显示它们的权重,通常都会加粗或有个分割线。需要注意,不同大小的标题在文字大小上最好能明显看出区别。

image_1ejs7s1pcdl51nbu1tcp1o8qnpam.png-39.5kB

2. >,会被转换成 blockquote

blockquote 是摘要或引用的意思。在设计上基本达成了一个统一认识就是左侧会有一个 2px 左右的边框,内容的话可以加上背景色、斜体处理。

image_1ejs8c8rir5g1nk9u9h1v5kd8t13.png-61.2kB

3. - ,会被转换成ul li

ul li注意一下每列的间距是否合理,ol li也是一样的。
image_1ejs8mf5p36nqgt1k3bcspeol1g.png-10.6kB

4. 内联 code 和块级 code

内联 code 的 html 标签是 code,块级 code 是pre code。对于内联 code 来说,很多技术类官方文档的教程都是浅红色的背景,红色文字这样的设计,用来突出关键字。块级 code 通常设计的跟代码编辑器类似,有的还会显示行号,以便定位代码的行数。

无论是内联还是块级code,在字体的选择上最好用等宽的字体,比如:Menlo,Monaco,Consola

image_1ejs9e2fd1ccn1hn919b7snqdqr1t.png-29.2kB

5. 其他

其他的还有下划线、a 标签、table 标签、图片等内容,设计起来也十分简单。我们要注意最重要的一点就是排版一定要整齐。不同标签的边距等内容最好保持统一,这样看起来会比较舒服。

a 标签新窗口打开

对于大多数的 Markdown 编辑器来说,通常a标签都是在当前页面跳转,那么我们想要在新标签页打开怎么去处理呢?我们可以利用 JS 对文章详情页的所有a标签加上target='_blank'属性即可。

//为超链接加上target='_blank'属性
$(document).bind('DOMNodeInserted', function () {
    addBlankTargetForLinks();
});

function addBlankTargetForLinks() {
    $('.md-preview a[href^="http"]').each(function () {
        $(this).attr('target', '_blank');
    });
}