我的第四款编辑器：微信公众号上使用 Markdown 来显示代码

[phodal]

这已经是我第四次写编辑器了~~~

第一次是在三年前，当时我听说有一个工具叫 Node-Webkit，于是我就结合CodeMirror撸了一个编辑器，界面如下：

GitHub 地址：https://github.com/phodal/lumia

第二次是在一年多以前，当时在验证我玩的编辑-发布-分离模式，即一键 PUSH 到 GitHub 上去。

技术栈：

• Electron
• React
• Material UI
• Alloy Editor

第三次是在去年，我们家 @花仲马 想要一个可以支持 QQ 音乐的微信编辑器，于是就撸了一个玩：

GitHub地址：https://github.com/phodal/congee

技术栈：

• Ractive (template-driven UI library)
• Require.JS (AMD)
• CKEditor
• jQuery Nicescroll
• jQuery Mixitup
• Spectrum (ColorPicker)

之前的三个都没有下文了，好在这次的功能比较简单，我只需要一个可以支持代码高亮的转换工具——但是它看上去更像是一个转换工具，可以让我完美的在微信公众号上显示代码：

(function () {
  var input, output;
  var converter = new showdown.Converter({extensions: ['prettify']});

  function updateOutput() {
    output.innerHTML = converter.makeHtml(input.value);
    PR.prettyPrint();
  }

  document.addEventListener("DOMContentLoaded", function (event) {
    input = document.getElementById('input');
    output = document.getElementById('output');

    input.addEventListener('input', updateOutput, false);
    input.addEventListener('keydown', updateOutput, false);

    updateOutput();
  });
})();
$('document').ready(function () {
  new Clipboard('.btn');
});

上面这22行代码就是这个编辑器的核心代码，2333~~。里面的 HTML 是这样的：

<div class="row cf">
  <div class="col">
    <div class="header">
      <h2>Markdown</h2>
    </div>
    <textarea id="input" cols="100" rows="10"></textarea>
  </div>

  <div class="col">
    <div class="header">
      <button class="btn button" data-clipboard-action="cut" data-clipboard-target="#output">复制</button>
    </div>
    <div id="output"></div>
  </div>
</div>

然后用了这么这几个库：

  <link rel="stylesheet" href="css/custom-ui.css"/>
  <link rel="stylesheet" href="css/normalize.css"/>
  <link rel="stylesheet" href="css/style.css"/>
  <link rel="stylesheet" href="css/basic-ui.css"/>
  <link rel="stylesheet" href="css/highlight.min.css"/>
  <link rel="stylesheet" href="css/github-light.css"/>

  <script src="js/showdown.min.js"></script>
  <script src="js/showdown-plugins/showdown-prettify-for-wechat.js"></script>
  <script src="js/jquery-3.1.1.js"></script>
  <script src="js/clipboard.min.js"></script>

  <link rel="stylesheet" href="google-code-prettify/prettify.css"/>
  <script src="google-code-prettify/run_prettify.js"></script>
  <link rel="stylesheet" href="themes/tomorrow-night-eighties.css"/>

  <link rel="stylesheet" href="css/wechat-fix.css"/>

打完字，Showcase：

直接将你的代码复制到左侧，然后点复制。再 Ctrl + C 一下，就可以愉快地粘贴到你的公众号上了。

• 采用 10 px 的字体、12 px的行高

GitHub 地址：https://github.com/phodal/mdpub