首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >我的第四款编辑器:微信公众号上使用 Markdown 来显示代码

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

作者头像
Phodal
发布2018-01-29 12:01:36
1.6K0
发布2018-01-29 12:01:36
举报
文章被收录于专栏:phodalphodal

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

第一次是在三年前(2014年4月份),当时我听说有一个工具叫 Node-Webkit,于是我就结合CodeMirror撸了一个编辑器,界面如下:

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

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

技术栈:

  • Electron
  • React
  • Material UI
  • Alloy Editor

GitHub地址:https://github.com/phodal/echeveria-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

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2016-11-23,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 phodal 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档