前言

之前搭建个人技术博客，一直使用的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官方文档

• Markdown 语法说明(简体中文版)
• 创始人 John Gruber 的 Markdown 语法说明

2、Wordpress安装Markdown插件– WP Editor.MD

使用过几种插件，如WP_Markdown，最终都没有用上。主要界面可视化不明显、或者安装没反应，插件友好性不够。但是WP Editor.MD 插件，在wordpress中搜索插件、安装、启用，再到文章编辑界面，简单直接的呈现在了面前。

如图，就可以正常的编写文章。
 

3、Wordpress Markdown保存文章前端展示

编写文章后，点击进行预览。展示如下图：

发现样式展示不正常，连Markdown的语法都没有识别。搜集资料，发现Markdown编辑器插件和前端展示的文章页面，一点关系都没有(ˇˍˇ)，又一番倒腾资料和代码试错。发现需要加入代码高亮代码。

4、Wordpress 文章页面加入Markdown高亮代码和行号

1. 访问http://prismjs.com/download.html页面，下载支持的代码主题，然后打包下载js和css文件。

2. 在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语法写一篇总结文章，收获还是蛮大的。
献给大家，祝在程序的道路上开心~

作者：萧邦

如上图，需要在首页进行案例的切换。

实现功能想到有两种解决方案：
方案一：除index.php文件外，创建三个分类文件category-h5.php、category-media.php、category-design.php，点击标签，跳转到对应的分类页面。基本可以实现标签分页功能。更加精细点，可以缓存当前页面位置，在新的页面设置页面滚动至缓存位置。本方案基本可以实现功能。唯一缺点：页面过渡时根据网络情况会出现闪烁、多3个php文件。

方案二：单页面index.php，安装JSON API的插件，采用ajax的形式，动态获取分类内容，并动态更新页面内容。

当前采用方案二进行技术实现。

1、在wordpress 管理后台创建分类标签，如下图：

2、安装JSON API插件并启用

3、添加分类文章，测试JSON API

var clickedItem = 0;
var $items = $('#categoryMenu').find('a');
var slugList = ['case', 'h5', 'media', 'design'];
function clickItem(index) {
     /*更新按钮选项的状态*/
     $($items[clickedItem]).removeClass('hover');
     $($items[index]).addClass('hover');
     clickedItem = index;

     /*请求API，获取分类的内容*/
     var url = '/yanrui/?json=get_category_posts&slug=' + slugList[index] +'&count=6';
     $.ajax({
         type: "GET",
         url: url,
         dataType: "json",
         jsonp: "callback",
         success: function (data) {
             console.log(data);
             var res = eval(data);
             if (res.status == 'ok') {
                  // todo 解析文章内容
             }
         },
         error:function(msg){
             msg = eval('(msg)');
             console.log(msg);
         }
     });
}

测试结果如下图，即正常接口测试通过：

4、ajax获取结果，动态更新模块内容

5、完成单页面动态切换。