javascript-重赏！关于markdown代码编辑器的实时高亮—

weixin_41064403 于 2018.03.14 22:24 提问

重赏！关于markdown代码编辑器的实时高亮 40C: 应公司要求必须自己用js写个markdown功能！谁知道用什么文本框来进行输入！我试过
可编辑div 但是光标出现很多问题！用textarea怎么插入html来进行实时关键字匹配高亮呢。
有具体代码和思路做法吗

同问1 | 评论0 | 浏览415 | 收藏0 | | 举报

3个回答

按赞数排序

http://libingw.github.io/OrionCodeEdit/
这个前端脚本编辑器插件还不错，而且是开源的，html,js,sql都有格式化和高亮的效果

textarea就是纯文本无法插入html之类的东西要用div模拟textarea 并不是单纯的可编辑div 而是用div模拟textarea 很很烦所以还是推荐用第三方会比较好

源码发布：一个Angular写得Markdown编辑器: 一直想写一个Angular2+的分享，但是没有一个好的切入点。前段时间我向分享Chat的白宦成老师请教markdown的问题，他向我推荐Typora编辑器，我觉着这就是我一直想要的Markdown编辑器，于是我就想到了这个主题。当然，我的水平一时是难于写出Typora那样的编辑器的，但人生已经如此艰难，大家就不要拆穿了，我主要是想通过一个实际应用分享一下Angular（文中提到的Angula...

Django2.0整合markdown编辑器并实现代码高亮（解决在前端显示的换行问题）: 测试成功环境： python：3.5.4 os：Deepin 15.5 Django：2.0 IDE：pycharm Django整合django-mdeditor 注：博主再写个人博客时，找了好久的编辑器，tinymce丑的一批，DjangoUeditor我没有做出来实时预览的效果，只有这个看着比较好，一是有普通编辑器具备的大部分功能，二是属于主流的markdown语法，比较适合...

Sublime Text3下两款Markdown插件支持实时预览与代码高亮: Sublime Text3 安装 Package Control 快捷键 ctrl+` Sublime Text3安装Package Control代码如下import urllib.request,os,hashlib; h = 'df21e130d211cfc94d9b0905775a7c0f' + '1e3d39e33b79698005270310898eea76'; pf = 'Pack

Atom - 介绍和使用方法（好用的文本编辑器，代码提示高亮、Markdown）: 一，Atom介绍Atom 是 Github 开源的文本编辑器，这个编辑器完全是使用Web技术构建的(基于Node-Webkit)。启动速度快，提供很多常用功能的插件和主题，可以说Atom已经足以胜任“半个IDE”了。个人感觉有如下几个优点：（1）多平台支持（Windows、Mac、Linux）（2）界面美观、现代化,使用舒适（3）多文件管理（Atom提供了文件树列表的功能）（4）设置管理很方便，不

CSDN-markdown 文字样式设置（字体, 大小, 颜色, 高亮底色）: 本文介绍与文字格式的相关设置语法，包括字体、大小、颜色和高亮背景色。并且介绍了表格中格子背景色的设置。

代码编辑器(支持自动缩进，语法高亮，代码折叠，函数提示，行号显示): 作者：lee mail: roughstuff@qq.com 开发环境：ｖｃ６．０程序功能： 1.支持关键字，高亮显示，例如：void if switch() 2.支持代码折叠功能，如下 void f() { } 3.支持自动代码缩进 int main() { while(true) { printf("great"); } } 4.支持行号显示，如程序左显示 5.支持函数参数自动提示功能，初步实现了CreateWindow(...), WinMain()函数，待扩展 6.支持函数自动完成功能，初步实现了Create...，str...的完成。输入Create, str...便能看到效果 7.支持两种注释方式 //style 1 /* style 2 */ 8.支持多文本模式。 9.支持文件的打开，保存，关闭 10.支持五种快捷键。CTR+A(全选) CTR+Z(UNDO) CTR+C(复制) CTR+X(剪切) CTR+V(粘贴) 11.该程序对于中文有完美支持，不会出现乱码现象。

markdown-it+highlight.js后端渲染的代码高亮问题解决: 起因想把自己写的Vue学习笔记挂到自己用heroku搭的小网站上去，已经在npm上搜到GitHub风格的插件，配合markdown-it可以做到GitHub的markdown风格显示效果，但是昨天发现代码没有高亮，想做好代码高亮效果解决过程首先查看markdown-it，毕竟这样一个大插件没有自带的highlight效果可能性很小，Ctrl+F搜索后发现了相关代码，发现了，后端直接赋值。

Markdown使用之CSDN支持语法高亮的常用语言: 语言名关键字 Bash bash CoffeeScript coffeescript C++ cpp C# cs CSS css Diff diff HTTP http Ini ini Java java JavaScript javascript JSON json Makefile makefil