WordPress+Markdown+为知笔记，实现高质量笔记和博客

本文写给：和我一样想要有一套操作容易、使用方便、兼容性好的 高质量个人知识管理和博客 实现方案的人。

欢迎通过此链接注册为知笔记来支持本人：https://note.wiz.cn/i/1fe81312

需求

平时学东西时，喜欢写一些笔记，一方面作为记录，时间久了不记得了可以看看，另一方面发到网上或许能帮到别人。之前用CSDN，发现博客编辑实在是非常难用，索性自己建了一个WordPress的站点，每次发布完再复制粘贴到CSDN博客。

记笔记我用的为知笔记，为知笔记有个博客离线发布的功能，我在本地写好的笔记，可以直接一键发送到博客，非常方便。但是由于兼容性问题，博客发布后显示效果不是那么理想，尤其是代码在本地为知笔记有自己的一套代码高亮系统，WordPress和CSDN又分别有不同的代码高亮系统，发布时还是不得不手动做不少修改。

由于前段时间有人决定开始写博客，然后问了我一些问题，包括博客怎么做到编辑方便又能很好的排版，同时可以在本地有一份方便管理的笔记，我就给他推荐了为知笔记、CSDN、WordPress还有Markdown，让他自己了解下再决定。Markdown是一种实现高质量文章的好方法，由于为知笔记支持Markdown，之前我也试过，但是发布到博客显示效果不是很好，而且也没有很大需求。这次重新研究了一番，最后总结除了一套个人感觉比较好的实现高质量知识管理和博客的方法，总结成这篇文章。

基础知识与准备工作

• 了解Markdown的使用

  可参考《Markdown简介和基本语法》 http://www.paincker.com/markdown

• 安装和熟悉为知笔记的使用，包括离线发布功能和Markdown的使用

  可参考

  • 《为知笔记：优秀国产知识管理软件的使用心得》 http://www.paincker.com/wiz-note
  • 《为知笔记离线博客发布功能》 http://www.paincker.com/wiz-blog

• 搭建自己的WordPress博客

  可参考《网站搭建从零开始》系列博客： http://www.paincker.com/category/mobile-web/website-primer

• 简单了解HTML、CSS基本知识

  可参考《w3school 在线教程》 http://www.w3school.com.cn/

• 简单了解WordPress主题的制作

  可参考《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笔记，例如：

   
   
   

    
##标题2
    
###标题3
    

    
***
    

    
- 列表1
    
- 列表2
    

    
***
    

    
```
    
#include <stdio.h>
    

    
int main() {
       
    
    printf("Hello World!\n");
    
    return 0;
    
}
    
```
   

保存为test.md，即可在为知笔记中看到渲染后的效果。

将其发布到WordPress博客，查看网页源代码，可以看到为知笔记输出的HTML结果：

   
   
   

    
<h2 id="-2">标题2</h2>
    
<h3 id="-3">标题3</h3>
    
<hr>
    
<ul>
    
<li>列表1</li>
    
<li>列表2</li>
    
</ul>
    
<hr>
    
<pre class="prettyprint linenums language-undefined prettyprinted" style="">
    
    <ol class="linenums" style="padding-left: 0px;">
    
        <li style="list-style-type: none; padding-left: 0px;" class="L0">
    
            <code><span class="com">#include</span><span class="pln"> </span><span class="str"><stdio.h></span></code>
    
        </li>
    
        <li style="list-style-type: none; padding-left: 0px;" class="L1"><code></code></li>
    
        <li style="list-style-type: none; padding-left: 0px;" class=