markdown 渲染 docker markdownjs_编辑框


markdown 渲染 docker markdownjs_markdown 流程图js_02


markdown 渲染 docker markdownjs_编辑框_03


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

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


markdown 渲染 docker markdownjs_编辑框_04


markdown 渲染 docker markdownjs_markdown 流程图js_05


Markdown 语法

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

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

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


markdown 渲染 docker markdownjs_markdown 渲染 docker_06


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

Markdown 样式设计

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

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

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

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


markdown 渲染 docker markdownjs_Markdown_07


2. >,会被转换成 blockquote

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


markdown 渲染 docker markdownjs_markdown 渲染 docker_08


3. -,会被转换成ul li

ul li注意一下每列的间距是否合理,ol li也是一样的。


markdown 渲染 docker markdownjs_a标签_09


4. 内联 code 和块级 code

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

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


markdown 渲染 docker markdownjs_a标签_10


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');
    });
}