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

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

第一次是在三年前(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

原文发布于微信公众号 - phodal(phodal-weixin)

原文发表时间:2016-11-23

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏移动开发之家

从Android到React Native开发(一、入门)

 大家好┏ (^ω^)=,许久不见,一不小心断更就成为了一种习惯,因为最近掉React Native的坑里,无法自拔啊~(╯‵□′)╯︵┻━┻。

10520
来自专栏伪君子的梦呓

ScreenToGif --好用的gif录屏/剪辑软件

引言 遇到想向别人展示一下神操作,或者想向让别人看一下某些效果时,一张图片说不清,弄个视频又太麻烦,这可怎么好呢?其实一个ScreenToGif就可以解决了。 ...

33150
来自专栏Jerry的SAP技术分享

Jerry的Fiori原创文章合集

我曾经于2014年10月到2016年5月工作于SAP CRM Fiori应用的开发团队, 我所在的团队负责下列这8个Fiori应用的维护和持续开发:

23850
来自专栏司想君

React编程思想

能够按照构建的方式来思考web app的实现,是React众多优点之一。在这篇文章中,我们将引导你进行使用React构建可搜索产品数据表的思考过程。

53250
来自专栏糊一笑

微信小程序初探【类微信UI聊天简单实现】

微信小程序最近很火,火到什么程度,只要你一打开微信,就是它的身影,几乎你用的各个APP都可以在微信中找到它的复制版,另外官方自带的跳一跳更是将它推到了空前至高的...

62850
来自专栏Youngxj

QQ群昵称变色工具

56080
来自专栏Coco的专栏

《HTML重构》读书笔记&思维导图

20040
来自专栏Debian社区

Debian下安装搜狗拼音输入法

2013年12月,搜狗与Ubuntu Kylin团队开始合作开发“搜狗输入法Linux版”。经过五个月的合作,于2014年4月17日,正式发布了1.0版本。20...

29930
来自专栏葡萄城控件技术团队

UWP 入门教程2——如何实现自适应用户界面

系列文章 UWP入门教程1——UWP的前世今生 如上文所说的,布局面板根据可用的屏幕空间,指定界面元素的大小和位置。例如StackPanel 会水平或垂直排列界...

23050
来自专栏Python数据科学

给爬虫爱好者的福利 SelectGadget

相信爬虫的爱好者们都经历过这样一个爬虫前期的准备过程,那就是用浏览器的审查元素进行爬取目标的定位。每次我们都要浪费部分时间去寻找定位点和xpath,这样既不很方...

11010

扫码关注云+社区

领取腾讯云代金券