我的第四款编辑器:微信公众号上使用 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:
采用 10 px 的字体、12 px的行高
GitHub 地址:https://github.com/phodal/mdpub
我就是喜欢开挂~~
我的第四款编辑器:微信公众号上使用 Markdown 来显示代码相关推荐
- 【Markdown】如何在微信公众号上写markdown的文章
步骤 1. 点开markdown在线编辑器 2. 将markdown格式的文章复制到在线编辑器编辑栏,或者直接在编辑栏写markdown文章 3. 文章编辑好后,点击复制按钮,粘贴到微信公众号即可
- Java 微信公众号上传永久素材的方法
用 Java 实现微信公众号上传永久素材,代码如下: /*** 上传其他永久素材(图片素材的上限为5000,其他类型为1000)* @param appid* @param secret* @retu ...
- 工具类产品适合在微信公众号上运营吗?
1. 工具类产品适合在微信公众号上运营吗? 问题描述:如果工具类的产品,主要的核心服务功能搬到微信公众号上运营会有些什么优势和劣势,以及如何在公众号上实现流量变现? 答:微信公众号之前有三种分类:服务 ...
- 【安信可A9G专题②】A9G在微信公众号上的定位功能笔记分享;
本系列博客学习由 安信可科技 - 官方博客 技术分享,如有疑问请留言或联系邮箱. 1.A9G环境在windows上搭建并编译,串口打印 Hello GPRS 2.A9G在微信公众号上的定位功能笔记分享 ...
- 为什么我不在微信公众号上写文章
作者: 陈浩 原文: https://coolshell.cn/articles/17391.html 很多朋友问我为什么不在微信公众号上写文章.我都没有直接回答,老实说,我也是扭扭捏捏的,才去开了个 ...
- 时序分解股票数据并部署在微信公众号上
目的 将股票价格进行时序分解,得到趋势图.周期图和误差图.然后放到微信公众号上,让用户输入"002581.SZ"等股票代码,即可自动回复以上的图片. 主要思路 用tushare获得 ...
- CSDN的文章如何快速转移到微信公众号上
简单做个介绍,因为需要同时维护CSDN和微信公众号上的文章.所以就涉及到如何不做重复的工作. 所以这里推荐下我个人刚刚发现的比较好用的一个Chrome上用的一个插件,叫"Markdown N ...
- 微信公众号上部署自己训练的聊天机器人(腾讯云服务器+TensorFlow2.1+Django3.1)
文章目录 前言 1. 模型介绍 1.1 Encoder-Decoder框架 1.2 Attention机制 1.3 代码实现 2. 安装依赖库 3. 模型部署 4. 测试 前言 哈哈,重头戏终于来 ...
- 在微信公众号上显示指定位置的地图
在微信公众号上显示指定位置的地图 需求:公众号获取用户上报的位置,展示出当前位置的地图 解决方案:通过公众号消息事件存储用户经纬度后,将经纬度作为参数打开腾讯地图一个可以自定义地图标记的url 链接, ...
最新文章
- Android学习视频
- 【S操作】一个简单粗暴易用的远程调试方案——OTA http update
- Django之静态文件
- pycharm如何改为中文显示?
- 微信遇到特殊服务器,解决微信网页授权,出现errcode:40163,errmsg:codebeenused,看似微信访问了2次这个回调接口的问题...
- Redis 教程基于win10:1介绍
- android 图片识别白色区域进行裁剪_【研途技能贴】| 4款好用的图片处理软件推荐...
- php位值,php中,如何取得一个整型值的低位和高位值?
- mysql subindex_mssql server sql分页存储过程
- 做机器学习的是些什么样的人?Kaggle做了一份居委会式的调查
- ASP.NET Core 入门教程 6、ASP.NET Core MVC 视图布局入门 1
- 浅谈-61850-2-服务端模拟软件构建
- 重装系统 winserver2008 R2 激活以及优化
- 用笔在计算机制表格,东城附近学五笔打字,制表格计算机学校在哪里
- HDU 5238 Calculator【线段树】
- heic(HEIF)格式图像处理(一)
- Luna16数据集下载
- webpack配置之Extensions
- [语言编程] exe病毒代码实例
- 环信首席架构师一乐 :煎饼果子与架构模式