轻松记录您
灵感和创意

Markdown Here 教程

Markdown Here 是个浏览器插件(Chrome/Firefox/Safari),可以将浏览器中编辑器里的 Markdown 文本转换成渲染过后的 HTML。又由于它能自定义 CSS,于是,对我这种平时大量使用 Markdown 格式写作的人来说实在是一大福音 —— 可惜我刚刚才知道还有这么个浏览器插件…… 要不是有人在新生大学的 APP 里提起这事儿,我还不知道啥时候能知道呢。

知道了就好,于是,我的微信公共帐号的排版就“焕然一新”了……

0. 操作流程

在 Google Chrome 中安装 Markdown Here 插件

配置 Markdown Here Option, 自定义一些 CSS

在 Atom/Sublimetext 之类的编辑器中书写

拷贝粘贴到微信公共帐号的编辑器中

使用 Markdown Here 渲染

插图图片,修订

发布……

1. 关于 Markdown 编辑器

我试过很多专门的 Markdown 编辑器,付费的也买了一大堆,最终发现实际上最好的 Markdown 编辑器是 Sublimetext/Atom 之类的程序编辑器,有一些功能没它们还真不行,比如多行同时编辑。现在我习惯使用的是 Atom,也安装了一些与 Markdown 相关的插件:

Markdown-pdf

Markdown-scroll-sync

Markdown-toc

Markdown-writer

Markdown-preview(Core Package)

另外一个跟 Markdown 没关系,但绝对有用的插件是 atom-smart-template,可以定制一些写作模板…… 比如,我的微信公共帐号文章开头都有版权声明,放到模板里,以后就不用费劲拷贝了……

关于 Atom 的教程,可以先去看看这篇文章,其实前后还有几篇文章,任何人都可以瞬间变成“PRO”,直至最终变成“GURU”:

http://xiaolai.li/2016/06/17/makecs-atom-advanced/

2. 关于中文排版

关于中文排版,我在网上看了几篇教程,总结后来发现重点只有三个:

字体大小

行间距

字间距

至于选择哪一种字体,其实并不是关键,因为对字体来说,最重要的其实是“通用” —— 即便是你设置好了你喜欢的字体,先不说那是不是你自己的偏好,更重要的是,若是读者的设备上没有那个字体,那你就等于是白折腾了……

所以,字体,就暂时放在一边罢,因为苹果手机上默认的字体就挺好的。手机上像素不少,可屏幕相对还是很小,所以,中文字体若是不设置行间距和字间距的话,其实读起来就很费劲,另外我比较偏好稍微大一点的字体尺寸:

.Markdown-here-wrapper {  font-size: 16px;  line-height: 1.8em;  letter-spacing: 0.1em;}

3. 关于配色

在不能自定义之前,我只能是在微信公共帐号编辑器里指定的字体颜色里选择,结果就是反正很难看…… 至于选什么颜色,找个人家已经配好的就是了(尤其是像我这样对颜色分辨感觉不佳的人)…… 于是,我就用了 Google Material Design 的 Color Scheme:

https://material.google.com/style/color.html

比如,我在设置“加重”和“倾斜”样式的时候,就是用这里面找到的颜色定义的:

strong, b{  color: #BF360C;}em, i {  color: #009688;}

4. 关于表格

在网页内的编辑器里书写表格很容易让人崩溃(不只是浏览器崩溃)…… 用 Markdown 就解脱了…… 而且 Atom 之类的编辑器里面有很多插件可以帮你迅速创建表格:

中文排版 |    要素描述                ———   | ———————-字体大小 | 16px 大一点更舒服行间距

| 1.8em 是个比较好的选择    字间距

| 0.1em 已经约等于 2px 了

会显示为:

中文排版 要素描述

字体大小 16px 大一点更舒服

行间距

1.8em 是个比较好的选择

字间距

0.1em 已经约等于 2px 了

也可以在自定义 CSS 中将整个表格居中显示:

table {  …  margin: 0 auto;}

5. 自定义 CSS 需要注意的地方

有时候在自定义 CSS 里的设置不起作用的话,试试在后面补上!important,就好像这样:

h2 {  font-size: 20px !important;}

未经允许不得转载:坚果云Markdown » Markdown Here 教程
分享到: 更多 (0)

坚果云Markdown轻松记录您 灵感和创意

坚果云Markdown下载坚果云Markdown介绍