下拉查看目录

Markdown Here 教程（这次是及格版）

2016-07-03 李笑来 学习学习再学习 学习学习再学习

版权声明

本文首发自微信公共帐号： 学习学习再学习（xiaolai-xuexi）；
无需授权即可转载，甚至无需保留以上版权声明；
转载时请务必注明作者。

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

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

0. 操作流程

  1. 在 Google Chrome 中安装 Markdown Here 插件
  2. 配置 Markdown Here Option, 自定义一些 CSS
  3. 在 Atom/Sublimetext 之类的编辑器中书写
  4. 拷贝粘贴到微信公共帐号的编辑器中
  5. 使用 Markdown Here 渲染
  6. 插图图片，修订
  7. 发布……

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

6. 代码高亮

算了吧…… 微信公共帐号对这事儿不感冒，就别折腾了。

7. 我的 StyleSheet

我它放在在这里了（文末的“原文链接”指向这里）：

https://gist.github.com/aa190255b7dde302d10208ae247fc9f2

嗯，就这样罢。

评论