下拉查看目录

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

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

注意

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

1. 烂教程

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

这个插件是 Markdown Here, 不仅支持 FirefoxGoogle 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/


评论