在WordPress中使用MarkDown编辑博文
前言
之前搭建个人技术博客，一直使用的wordpress自带的文章编辑器，配合css3样式实现代码高亮。最近使用laravel+bootstrap搭建管理后台，需要进行文章编辑，决定使用专门的文本编辑器。
首先，想到的技术圈很流行的Markdown编辑器，内容创作社区–简书，也是用的Markdown编辑器编辑文章，整体看起来还是蛮舒服的。
自从VPN整顿有一段时间了，国内很多VPN被关停了。之前可以翻墙Google检索，现在只能依赖百度和忍受广告了。当然，感谢有知乎、推酷、简书，这些优质的内容创作平台，还是完成了Markdown的wordpress安装，到编辑文章的展示。
1、什么是Markdown
Markdown 的目标是实现「易读易写」。 可读性，无论如何，都是最重要的。一份使用 Markdown
格式撰写的文件应该可以直接以纯文本发布，并且看起来不会像是由许多标签或是格式指令所构成。Markdown 语法受到一些既有
text-to-HTML 格式的影响，包括 Setext、atx、Textile、reStructuredText、Grutatext 和
EtText，而最大灵感来源其实是纯文本电子邮件的格式。 总之， Markdown 的语法全由一些符号所组成，这些符号经过精挑细选，其作用一目了然。比如：在文字两旁加上星号，看起来就像强调。Markdown 的列表看起来，嗯，就是列表。Markdown 的区块引用看起来就真的像是引用一段文字，就像你曾在电子邮件中见过的那样。 ——摘抄自Markdown 语法说明(简体中文版)
这里只是简单的提及Markdown，语法使用可以参考简书Markdown–入门指南。具体可以功能介绍，请参考以下官方文档：
Markdown官方文档
2、Wordpress安装Markdown插件– WP Editor.MD
使用过几种插件，如WP_Markdown，最终都没有用上。主要界面可视化不明显、或者安装没反应，插件友好性不够。但是WP Editor.MD 插件，在wordpress中搜索插件、安装、启用，再到文章编辑界面，简单直接的呈现在了面前。
如图，就可以正常的编写文章。
3、Wordpress Markdown保存文章前端展示
编写文章后，点击进行预览。展示如下图：
发现样式展示不正常，连Markdown的语法都没有识别。搜集资料，发现Markdown编辑器插件和前端展示的文章页面，一点关系都没有(ˇˍˇ)，又一番倒腾资料和代码试错。发现需要加入代码高亮代码。
4、Wordpress 文章页面加入Markdown高亮代码和行号
- 访问http://prismjs.com/download.html页面，下载支持的代码主题，然后打包下载js和css文件。
-
在WP Editor.MD插件目录，找到
editormd.preview.css、prism-line-numbers.js和prism-line-numbers.css文件，组合起来。如下图目录：
引入js和css文件
<!--引入js文件-->
<script type="text/javascript" src="<?php echo get_bloginfo('template_url'); ?>/js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="<?php echo get_bloginfo('template_url'); ?>/prism/prism.js"></script>
<script type="text/javascript" src="<?php echo get_bloginfo('template_url'); ?>/prism/prism-line-numbers.js"></script>
增加样式
@import "prism/themes/prism";
@import "prism/themes/editormd.preview";
@import "prism/themes/prism-line-numbers";
增加类markdown-body
<div class="entry markdown-body">
<?php the_content(); ?>
<?php link_pages('<p><strong>Pages:</strong>', '</p>', 'number'); ?>
</div>
这样代码高亮和行号的问题都解决了。查看效果如下：
5、收尾
把今天的Markdown编辑器使用过程记录一下，然后用Markdown语法写一篇总结文章，收获还是蛮大的。
献给大家，祝在程序的道路上开心~
作者：萧邦
