本文写给：和我一样想要有一套操作容易、使用方便、兼容性好的 高质量个人知识管理和博客 实现方案的人。本文适合喜欢折腾的人士使用，搭建好自己的WordPress博客，然后对前后台相关知识有基本了解，能自己修改代码。虽然折腾的过程非常费时，但是一旦折腾完成，就是一劳永逸，非常方便。
欢迎通过此链接注册为知笔记来支持本人：https://note.wiz.cn/i/1fe81312
2020.2.4更新：Publish Markdown博客发布工具
PublishMarkdown是由本人开发的一款将本地Markdown文件发布到博客的开源工具，基于Electron实现，支持中英文，兼容Windows、Linux、MacOS平台。
PublishMarkdown解决了为知笔记发布博客的一些问题。例如：
- 为知笔记只有Windows版本才能支持发布博客，而PublishMarkdown基于Electron构建，原生就是跨平台的；
- 为知笔记在编辑文章时，会重复上传相同图片，而PublishMarkdown会自动判断，不重复上传图片；
- 为知笔记只能发布在为知笔记中写好的文章，而PublishMarkdown可以直接发布独立的Markdown文件（对于程序员群体，Markdown文件用git进行版本管理和同步更方便）；
- PublishMarkdown是开源软件，Markdown中代码高亮、MathJax渲染的逻辑更加清晰明确，方便用户使用，而为知笔记中的渲染方案发生过一次大的调整，导致本文中的一些结论也失效了；
- 对于WordPress用户，PublishMarkdown只需按照说明配置代码高亮和MathJax插件即可，不需要自己开发WordPress主题。
GitHub主页 https://github.com/jzj1993/PublishMarkdown
技术博客 http://www.paincker.com/publish-markdown
本文由于“年代久远”，部分内容已经过时，可以考虑使用PublishMarkdown+WordPress插件实现效果。下面是原文内容。
需求
平时学东西时，喜欢写一些笔记，一方面作为记录，时间久了不记得了可以看看，另一方面发到网上或许能帮到别人。之前用CSDN，发现博客编辑实在是非常难用，索性自己建了一个WordPress的站点，每次发布完再复制粘贴到CSDN博客。
记笔记我用的为知笔记，为知笔记有个博客离线发布的功能，我在本地写好的笔记，可以直接一键发送到博客，非常方便。但是由于兼容性问题，博客发布后显示效果不是那么理想，尤其是代码在本地为知笔记有自己的一套代码高亮系统，WordPress和CSDN又分别有不同的代码高亮系统，发布时还是不得不手动做不少修改。
由于前段时间有人决定开始写博客，然后问了我一些问题，包括博客怎么做到编辑方便又能很好的排版，同时可以在本地有一份方便管理的笔记，我就给他推荐了为知笔记、CSDN、WordPress还有Markdown，让他自己了解下再决定。Markdown是一种实现高质量文章的好方法，由于为知笔记支持Markdown，之前我也试过，但是发布到博客显示效果不是很好，而且也没有很大需求。这次重新研究了一番，最后总结除了一套个人感觉比较好的实现高质量知识管理和博客的方法，总结成这篇文章。
说明：如果你是一个技术小白，或者没兴趣和时间过多的研究技术尤其是动手写代码，我会在每部分中用黑体标出最关键的步骤，通常直接完成这些关键步骤，就能基本实现效果了。
最终效果展示
平时需要写博客时，只需要在本地的为知笔记中用Markdown写好（当然也可以不用Markdown），然后离线发布到博客。下面是与传统的WordPress文档编辑器的对比。
插入图片
在WordPress中插入图片尽管比很多博客系统（尤其是还没有Markdown模式的CSDN）强大多了，但是也免不了每插入一张图片都要提前上传好，然后点开图库页面去选择图片。特别是不少人的博客都用的国外服务器，在线编辑器真的慢如蜗牛。
而绝大多数Markdown编辑器，插入图片也需要将图片一张张上传到某个图床，然后一张一张的粘贴URL链接，实在是个磨人的小妖精。
而为知笔记的本地编辑器是笔记软件、Markdown编辑器中都非常强大的，想插入图片，可以直接从Word文档、文件夹、网络等任何地方复制并粘贴，或是任性的拖动到编辑器中，并且自带截图，也可以从手机传图到电脑，以及简单的编辑功能。至今我还没有发现其他任何一款Markdown编辑器可以这么任性。发布时，会自动上传每张图片到博客网站。
我有时会写一些复杂的图文教程，例如某某软件的使用，一篇文章几十张图片很正常，如果不能用为知笔记这样的类似Word的傻瓜式手法，估计我会被累死，即使不会累死，我也不想把生命浪费在那些机械的重复性动作上。
代码高亮
网上有各种五花八门的WordPress代码高亮插件，使用起来其实也很郁闷，也是我的切身体会。尝试使用过各种代码高亮插件包括WP-Syntax等+WordPress自带编辑器或者编辑器增强插件，总体来说插入高亮代码简直是灾难，各种担心字符会不会被转义，或是各种网页性能、兼容性问题。
而用Markdown插入代码并通过插件自动渲染实现高亮，不知道要方便多少。尤其是对于一些需要很多段文字和代码混排的情况，例如本文，如果每插入一段代码都要做大量工作，实在不能忍。
WordPress也有几款Markdown插件，但是不建议去尝试了，因为网上就没见几个人说那些插件好用的。
LaTeX公式插入
其实没什么可比的，WordPress自带本来就没有LaTeX公式支持，个别能解析LaTeX公式的WordPress插件也非常难用，总结起来就是用不了。
而为知笔记的Markdown插入LaTeX公式和插入代码一样方便，只要了解一下LaTeX公式语法就好办了，高显示质量的公式一气呵成。到底有多高质量，看一下这个例子就知道了：
理想恢复公式： $$ x(t) = \sum_{n=-\infty}^{\infty}x(nT)Sa(\frac{t-nT}{T}) $$
其中： $$ Sa(x) = sinc(x) = \frac{sin(\pi x)}{\pi x} $$
高度智能化、高度可定制性
最重要的一点是，当你点击一键发布到博客时，除了第一次需要进行一些设置外，以后只需要为文章选择好分类，整个发布的过程是全自动的：
- 每张图片会自动上传到博客
- 附件会自动附加到文章末尾
- 文章标签可以被自动同步
- Markdown自动被渲染成HTML，你可以通过CSS自行定义其排版样式
- 代码会自动被预设的CSS高亮，颜色当然也可以通过CSS定制
- LaTeX自动被MathJax渲染成高质量的公式
- 还能同时给文章设置自定义的固定链接
性能最优，兼容性最强，一次编辑，多平台同步
这种方式直接生成最终网页代码，用普通的HTML+CSS搞定了代码高亮、LaTeX公式。在加载页面时不依赖任何后台PHP插件或是前台JavaScript插件，不需要执行任何额外前后端代码，因此网页在服务器上的输出，以及页面自身性能都达到了最优化。
使用为知笔记，文章在本地编辑，完全不会有时延。在本地编辑好文章，既是个人笔记，又可以一键发布到WordPress博客。而受益于为知笔记强大的笔记管理功能，发布的博客可以随时在本地笔记中方便的查阅。
博客网页不仅可以在多种平台包括手机上显示的很好（有兴趣你可以在手机上打开本页面检验一下效果），而且还能直接复制粘贴到其他博客，仍然保持足够好的显示效果。并且这一切永远是高质量的，因为Markdown就是为编写高质量文档而生。
最大的缺陷
目前必须使用Windows版本的为知笔记，其他平台下没有离线发布的功能。希望为知笔记早日升级版本增加这个功能。至于我，则是在MacOS下安装了Windows虚拟机，必要时就用为知笔记Windows版同步一下笔记然后发布。
基础知识与准备工作
如果想尽快完成整个的折腾过程，这些准备工作可以先只做简单了解甚至直接跳过，具体需要的时候再详细去研究。
了解Markdown的使用。Markdown是本文必要的基础知识，如果不知道Markdown是什么，也就没法体会本文所强调的方便了。
可参考《Markdown简介和基本语法》
http://www.paincker.com/markdown
安装和了解为知笔记的使用，尤其是Markdown的使用和离线发布功能。
可参考
- 《为知笔记：优秀国产知识管理软件的使用心得》
http://www.paincker.com/wiz-note- 《为知笔记离线博客发布功能》
http://www.paincker.com/wiz-blog
搭建自己的WordPress博客。没有WordPress博客，想必你也不需要来看本文。
可参考《网站搭建从零开始》系列博客：
http://www.paincker.com/category/mobile-web/website-primer
简单了解HTML、CSS基本知识。不了解也没有什么大的影响。
可参考《w3school 在线教程》
http://www.w3school.com.cn/
简单了解WordPress主题的制作。其实不了解也不影响，但是至少你要知道，WordPress主题是保存在wp-content/themes/主题名称的目录下的，并且知道利用WordPress后台或是FTP等工具修改这些文件，因为后面需要修改这个文件夹下的文件。
可参考《WordPress主题制作全过程》系列博客
http://www.ludou.org/create-wordpress-themes-prepare.html
了解LaTeX数学公式常用语法。这个也不是必要准备工作，完全可以在需要用到公式的时候才去研究。
LaTeX可以参考《一份其实很短的 LaTeX 入门文档》
http://liam0205.me/2014/09/08/latex-introduction/
LaTeX数学公式语法可以需要时再从网上搜索
为知笔记相关说明
这里主要做几点说明。首先这两点是必须知道的：
- 为知笔记在笔记名后增加
.md，打开后在编辑模式下为Markdown源文件，在阅读模式下即为经过Markdown渲染后的效果（如果没有显示渲染后的效果，可以关掉笔记重新打开）。 - 使用Markdown的笔记，在点击发布到博客时，需要勾选"使用Markdown渲染"的选项。
后面这两点可以用于技术分析，不想研究技术的可以不做具体了解：
- 使用Markdown渲染后发布到WordPress的文章，只含HTML内容，不含CSS样式。CSS样式由WordPress主题中的
style.css决定。 - 经过对输出HTML的分析，为知笔记Markdown中的代码高亮，由Google开源项目
prettyprint实现。
利用为知笔记Markdown+自定义CSS，高质量代码编辑So Easy
前面做了一些准备工作，下面要说的就是本文的核心内容。
注意，如果你的WordPress用了其他代码高亮插件，建议先将其停用，然后再进行操作，以免发生冲突。
我们可以用为知笔记写一个简单的Markdown笔记，例如：
1 | ### 标题3 |
保存为test.md，即可在为知笔记中看到渲染后的效果。
将其发布到WordPress博客，查看网页源代码，可以看到为知笔记输出的HTML结果：
1 | <h3 id="-3">标题3</h2> |
但是我们看到的显示效果可能并不好，原因在于我们的WordPress主题中的CSS没有针对Markdown进行优化完善。下面的问题就很简单了，就是改CSS文件，一般在主题文件夹下的style.css中。根据个人喜好，网站风格等，将CSS进行修改完善。
对于h1，h2，h3，ul，ol，li，hr这些常规标签样式的修改，倒没什么问题，而且通常主题自身就含有这些标签的样式，主要是代码高亮部分的样式。
要注意的是，这里的代码高亮用的是prettyprint的风格，因此可以下载到prettyprint插件，并将其CSS复制到我们的CSS中。经过测试prettyprint的CSS还是有一些问题，可能是因为版本等原因。反复修改后，下面给出我使用的CSS（代码高亮部分），由于不同主题中的元素差异，不能保证在其他网站也完全兼容，仅供参考。
如果你对HTML、CSS等前端知识不甚了解，可以直接尝试将下面这些代码复制到你的主题文件夹下的style.css文件末尾，于是就可以支持为知笔记博客离线发布的代码高亮了。
1 | code .pln{color:#000} |
最后，在我的网站，这篇测试文章实际显示的效果如下。如果使用的Chrome浏览器，你可以在右键-审查元素中看到我编写的CSS实际效果。
标题3
标题4
- 列表1
- 列表2
1 |
|
一些问题
在这个过程中，遇到了很多问题，特别是对CSS不了解的情况下，更是困难重重。下面进行一些列举，或许能对别人有所帮助。
1、为知笔记中Markdown渲染后，代码不缩进。解决这个问题的方法是，编写代码时用空格做缩进而不是tab符号，Markdown会自动忽略tab符号（除非用HTML转义字符书写）。
2、代码中的空行不显示
查看代码可以看到，代码中的空行会被转换成<li style="list-style-type: none; padding-left: 0px;" class="L1"><code></code></li>，code标签中为空，然后会直接不显示，于是所有代码中的空行直接消失不见了。我的解决方法是，给每个li元素设置一个最小高度min-height，这个高度和行高line-height相同，这样即使code标签不显示，空行还是会保证一行的最小高度。
3、代码不显示行号
行号显示是利用有序列表的li标签自身序号实现的，需要设置属性list-style-type:decimal!important。注意这里加了后缀!important，因为生成的HTML中，标签li被自动添加了这个属性且为内联式，只有在CSS中添加!important，才能让CSS设置的值生效，而不是被内联式的样式覆盖掉。另外要注意的是，如果li元素使用了overflow:hidden属性，也会导致前面的标号不显示；这时要么去掉overflow属性，要么再添加一个list-style-position:inside属性即可。
4、为知笔记的非VIP用户每次都会在文末生成一个 来自为知笔记 的链接。
这个是用于为知笔记推广的链接，通过这个链接注册为知笔记还可以增加积分，建议保留。如果一定要去掉，特别是强迫症用户，又不想每次手动在WordPress中编辑，可以通过在主题的`functions.php`文件中添加如下`php`代码。这段代码通过添加钩子，在文章保存到数据库前，对文章内容进行了正则替换，将包含为知笔记链接的内容自动替换为空字符串了。
1 | function content_replace($data) { |
如果你的主题中使用的是CSS3，更简单的一个方法是在style.css中添加一条如下代码：
1 | #post-content div>a[title^='来自为知笔记']{display:none} |
5、文章一旦发布到WordPress，如果在WordPress编辑器在线进行编辑，切换到图形界面并保存，会导致文章内容出现一些错误，具体的表现和原因如下。
- 尖括号及其内部代码会被处理掉，例如
<stdio.h>。尖括号本身容易和HTML标签混淆，所以一般都会被转换成转义字符。这个通常是因为其他代码高亮插件没有被关掉，例如WP-Syntax等。 - 代码缩进格式被删除。原因是代码缩进用的是空格，在WordPress的图形编辑器中，会自动忽略掉HTML中的空格。避免这个问题比较好的方法是避免使用图形编辑器，而直接用文本编辑器。还有种办法，在functions中，还是通过正则替换的方法，将HTML源码中的空格替换成
，这样就不会被图形化编辑器去掉了。 - 代码段落的背景混乱。还是因为图形编辑器，把pre标签自动给去掉了（WordPress的图形编辑器真是相当霸道 o(╯□╰)o ）。我应对这个问题的办法就是直接不用图形编辑器；另外，代码段由
pre.prettyprint和ol.linenums标签包裹，我把CSS样式全部设置给ol.linenums了，这样即使pre标签被去掉，也不影响代码的显示。
总而言之，最大的问题就是不能轻易使用WordPress的编辑器、特别是图形编辑器对文章进行修改。如果需要修改，可以在为知笔记中改好再重新发布（会自动判断并编辑文章而不是新建）；或者直接使用文本界面进行编辑。 虽然这样做很麻烦，但是比之前我用WP-Syntax插入代码要轻松多了。
6、固定链接的问题。有人喜欢手动给每篇文章设置好看的固定链接，即使用%postname%字段作为文章网址。而用为知笔记的离线发布，会自动将文章标题作为postname从而生成链接。一种方法是可以先发布再修改固定链接，修改时，直接在快速编辑中修改即可，避免进入编辑界面影响文章内容；另一种方法单独写成了一篇文章，如下：
WordPress离线发表文章自动生成别名
http://www.paincker.com/wp-auto-postname
添加LaTeX公式支持（使用MathJax）
为知笔记的Markdown中支持插入LaTeX公式，输出由MathJax渲染。只要在编辑时，使用$或$$符号包含LaTeX公式代码，即可自动转换成公式。
实例
例如下面的Markdown代码
1 | Latex公式测试 |
最终显示效果如下。
Latex公式测试
行内公式 $ \delta = \beta / (\alpha + 1)$
行间公式 $$ \frac{O}{I} \approx \frac{A}{1+AF} $$
上下标 $$ U_o = A^2 * ( U_+ - U_- ) $$
积分 $$ \int_1 ^2 sin x dx $$
方程组
$$
\begin{aligned}
\dot{x} & = \sigma(y-x) \
\dot{y} & = \rho x - y - xz \
\dot{z} & = -\beta z + xy
\end{aligned}
$$
插入专用字体
需要注意的是，要想用MathJax达到最佳的显示效果，需要使用专用字体，可在主题的CSS文件中添加以下代码（这段代码从MathJax官网的页面源文件取得）。
1 | @font-face {font-family: MathJax_Main; src: url('http://cdn.mathjax.org/mathjax/latest/fonts/HTML-CSS/TeX/woff/MathJax_Main-Regular.woff?rev=2.5.0') format('woff'), url('http://cdn.mathjax.org/mathjax/latest/fonts/HTML-CSS/TeX/otf/MathJax_Main-Regular.otf?rev=2.5.0') format('opentype')} |
如果直接将这段CSS添加到主题的style.css中，而使用MathJax的页面比较少，在部分浏览器中，即使页面中没有使用@font-face中的字体，也会下载字体文件，会造成一定的浪费，降低了性能。
在这篇文章中提出了这个问题，并给出了测试实例
http://www.stevesouders.com/blog/2009/10/13/font-face-and-performance/
为了避免这种情况，可将上述CSS代码写在一个独立的文件mathjax.css中，然后利用jQuery进行判断，如果页面中用到了MathJax，就在<head>标签中添加CSS的引用，然后才从这段CSS加载字体。jQuery大致写法如下，其中url为MathJax的CSS文件mathjax.css的URL地址。
1 | function f_mathjax() { |
如果你对HTML、CSS、jQuery等前端知识不甚了解，但又想在自己的博客写出好看的公式，建议直接把前面说的那段CSS代码直接贴进你的主题文件夹下的style.css中，不用过分考虑性能了。因为现代浏览器越来越成熟，这种性能问题迟早会解决的。
一个显示问题
我遇到的一个问题是，公式显示效果不好，分数的横线直接不显示了。经过一步一步的排查，最后终于发现问题出在我的网站CSS中有一个属性line-height:1.8，影响了公式的正常显示。于是添加下面的CSS即解决了问题。
1 | .MathJax{line-height:1} |
如果你也遇到了类似的问题，请尝试添加上述CSS代码。