下拉查看目录

用 Markdown Here 插件排版微信公共帐号文章

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

注意：

以下是一个“烂教程”的示例。烂教程的特点就是作者懒得写清楚，或者干脆不知道应该如何写清楚，不知道把什么写清楚，不知道写给谁，当然也不知道读者究竟在哪里需要什么样的帮助…… 于是写出来的东西，除了给自己带来一点存在感之外，对别人实在是用处不大……

1. 烂教程

有时候，脑子是短路的。写微信公共帐号都快一年了，也没想到过应该搜搜看看有没有什么浏览器插件可以用来转化 Markdown 格式。要不是在新生大学的学习圈里看到有人提起，那就可能一直想不到。真是没办法。

这个插件是 Markdown Here, 不仅支持 Firefox、Google Chrome，也支持 Safari。

它能把浏览器中的文本编辑器里的 Markdown 格式的文本转换成格式化之后的 html，并可以预先定制 css 样式。

关于 Markdown 编辑器，我买过好几个，各种免费的也比较了好多，最终发现只要是专门的 Markdown 编辑器就都不够好用…… 现在我用 Atom 编辑器，加上几个与 Markdown 相关的插件：

  • markdown-writer
  • markdown-toc
  • markdown-scroll-sync
  • markdown-pdf
  • markdown-preview（编辑器内建插件）

我测试后的结果是，微信公共帐号的文字编辑器，其实不解析 h1…h6 的，它会统一把这些 Heading 搞成 strong…… 这个比较讨厌，所以，只能暂时对付着用，于是，我只好在 Markdown Here 的 Option 里定义了一个 big，用来替代小标题。

.markdown-here-wrapper {  font-size: 17px;  line-height: 30px;}pre, code {  font-size: 14px;  font-family: Roboto, 'Courier New', Consolas, Inconsolata, Courier, monospace;}code {  margin: 0 3px;  padding: 0 6px;  white-space: pre-wrap;  background-color: #F8F8F8;  border-radius: 2px;  display: inline;}pre {  font-size: 15px;  line-height: 20px;}pre code {  white-space: pre;  overflow: auto;  border-radius: 3px;  padding: 5px 10px;  display: block !important;}strong, b{  color: #BF360C;}em, i {  color: #009688;}big {  font-size: 22px;  color: #009688;  font-weight: bold;  vertical-align: middle;  border-bottom: 1px solid #eee;}small {  font-size: 12px;  line-height: 22px;}hr {  border-bottom: 0.05em dotted #eee;  margin: 10px auto;}p {  margin: 15px 5px !important;}table, pre, dl, blockquote, q, ul, ol {  margin: 10px 5px;}ul, ol {  padding-left: 10px;}li {  margin: 5px;}li p {  margin: 5px 0 !important;}ul ul, ul ol, ol ul, ol ol {  margin: 0;  padding-left: 10px;}ol ol, ul ol {  list-style-type: lower-roman;}ul ul ol, ul ol ol, ol ul ol, ol ol ol {  list-style-type: lower-alpha;}dl {  padding: 0;}dl dt {  font-size: 1em;  font-weight: bold;  font-style: italic;}dl dd {  margin: 0 0 10px;  padding: 0 10px;}blockquote, q {  border-left: 3px solid #009688;  padding: 0 10px;  color: #777;  quotes: none;}blockquote::before, blockquote::after, q::before, q::after {  content: none;}h1, h2, h3, h4, h5, h6 {  margin: 20px 0 10px;  padding: 0;  font-weight: bold;  color: #009688;}h1 {  font-size: 24px;  border-bottom: 1px solid #ddd;}h2 {  font-size: 22px;  border-bottom: 1px solid #eee;}h3 {  font-size: 20px;}h4 {  font-size: 18px;}h5 {  font-size: 16px;}h6 {  font-size: 16px;  color: #777;}table {  padding: 0;  border-collapse: collapse;  border-spacing: 0;  font-size: 1em;  font: inherit;  border: 0;}tbody {  margin: 0;  padding: 0;  border: 0;}table tr {  border: 0;  border-top: 1px solid #CCC;  background-color: white;  margin: 0;  padding: 0;}table tr:nth-child(2n) {  background-color: #F8F8F8;}table tr th, table tr td {  font-size: 16px;  border: 1px solid #CCC;  margin: 0;  padding: 5px 10px;}table tr th { font-weight: bold;  background-color: #F0F0F0;}
2. 烂教程也会有人感谢……

因为毕竟提供了一点有用的信息，所以，若是传播足够广，总是会有一些人有收获，然后礼貌地致谢。可从另外一个角度来看，这种礼貌反过来又会让烂教程的作者以为自己这样就可以了…… 许多年之后都不知道应该在什么地方后悔。

3. 好教程是什么样的？

好教程的作者，知道自己写给谁看，知道读者需要的是什么，知道读者哪里搞不清楚，知道读者在哪里会遇到困难，知道读者读过之后会有什么样的反馈…… 这其实很难的 —— 要反复实验、反复实践才能做好。

关于如何使用 Atom 编辑器，大家不妨移步看看这个教程：

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

评论