在 ghost0.x 的版本中,它的文章是完全用 Markdown 来书写的。新版本默认的编辑方式中,我们仍然可以使用 Markdown 的语法来书写,但是它默认会变成预览后的效果,我们看不到 Markdown 格式的源码,不便于修改,所以不太推荐这种编辑方式。
还有一种方式就是在编辑器每行的开头有个加号按钮,我们可以通过这里去添加一个 Markdown 编辑框,这个编辑框可以切换编辑和预览模式,比较方便编辑。
Markdown 语法
Markdown 是一种轻量级标记语言,它的语法相对来说十分简单好记,对新手比较友好,所以这里就不过多介绍了。大家可以参考下面的文档:
1. Markdown 语法说明 (简体中文版)
2. How to Write Faster, Better & Longer: The Ultimate Guide to Markdown
3. Ghost Markdown reference
点击 Markdown 编辑框的问号按钮,可以看到一个语法速查表,方便我们去参考。
需要注意的是,不同的软件对于 Markdown 的支持度不尽相同,比如有的支持 Todo 列表功能、LaTex 公式、流程图等等,有的不支持。
Markdown 样式设计
Markdown 标记语言最终会被转换成相应的 HTML 标签,我们只要知道所有的 Markdown 语法最终生成的标签,就可以针对性地去设计样式表了。前面提到过,像网上有很多这种 Markdown Css Themes,其实都大同小异。
下面我们讲一下具体的设计。
1. 首先是#
,会被转换成h
标签
常用的基本上都是h1 ~ h4
,后面可以不去考虑。对于大标题,比如h1
和h2
,为了显示它们的权重,通常都会加粗或有个分割线。需要注意,不同大小的标题在文字大小上最好能明显看出区别。
2. >
,会被转换成 blockquote
blockquote 是摘要或引用的意思。在设计上基本达成了一个统一认识就是左侧会有一个 2px 左右的边框,内容的话可以加上背景色、斜体处理。
3. -
,会被转换成ul li
ul li
注意一下每列的间距是否合理,ol li
也是一样的。
4. 内联 code 和块级 code
内联 code 的 html 标签是 code
,块级 code 是pre code
。对于内联 code 来说,很多技术类官方文档的教程都是浅红色的背景,红色文字这样的设计,用来突出关键字。块级 code 通常设计的跟代码编辑器类似,有的还会显示行号,以便定位代码的行数。
无论是内联还是块级code,在字体的选择上最好用等宽的字体,比如:Menlo
,Monaco
,Consola
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');
});
}