重赏!关于markdown代码编辑器的实时高亮 40C

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

1

3个回答

0
caozhy
caozhy 回复weixin_41064403: 你把插件的代码放到你程序里,就是自己实现了。js开源的。
10 个月之前 回复
weixin_41064403
weixin_41064403 不用插件!自己实现
10 个月之前 回复

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

0

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

0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
100行代码实现基于react的markdown输入+即时预览在线编辑器
100行代码 react 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)设置管理很方便,不
代码高亮编辑器 ace.js
https://www.jianshu.com/p/c20da221f385
Django2.0整合markdown编辑器并实现代码高亮(解决在前端显示的换行问题)
测试成功环境: python:3.5.4 os:Deepin 15.5 Django:2.0 IDE:pycharm Django整合django-mdeditor 注:博主再写个人博客时,找了好久的编辑器,tinymce丑的一批,DjangoUeditor我没有做出来实时预览的效果,只有这个看着比较好,一是有普通编辑器具备的大部分功能,二是属于主流的markdown语法,比较适合...
代码编辑器(支持自动缩进,语法高亮,代码折叠,函数提示,行号显示)
作者:lee mail: roughstuff@qq.com 开发环境:vc6.0 程序功能: 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.该程序对于中文有完美支持,不会出现乱码现象。
Qt制作高亮语法编辑器
制作高亮语法编辑器 开发平台:Qt5.4.1 搭建一个编辑器 QPlainTextEdit 通过继承QPlainTextEdit添加更多的功能: 添加高亮显示当前编辑行 添加显示行号 1. 添加高亮显示当前编辑行当光标位置发生改变之后,会触发这个信号: cursorPositionChanged()在处理这个信号槽时,我们可以这样做 QList<QTextEdit::Extr
MarkDown支持高亮的语言
MarkDown支持高亮的语言
【Tools】markdown基本语法和代码高亮方法
Date: 2018.6.9 1、参考 https://blog.csdn.net/tiantiandjava/article/details/52193365 https://www.appinn.com/markdown/ https://segmentfault.com/q/1010000000420523 https://highlightjs.org/static/de...
CSDN markdown 代码块高亮
在需要高亮的代码块的前一行及后一行使用三个反引号“ ` ” (注意这个反引号的输入是 英文输入模式下tab键上面那个),同时第一行反引号后面表面代码块所使用的语言,如下图: 代码效果如下: int sched_get_priority_max(int policy); int sched_get_priority_min(int policy); 参考: https://blog.csdn...
Office—OneNote2016代码高亮插件下载及安装
Tip:支持OneNote2016版本!!!1. 插件下载我博客中有单独共享安装包,附上链接地址OneNote插件HighLight.RAR也可以私我,看到了就免费发给你。
源码发布:一个Angular写得Markdown编辑器
一直想写一个Angular2+的分享,但是没有一个好的切入点。前段时间我向分享Chat的白宦成老师请教markdown的问题,他向我推荐Typora编辑器,我觉着这就是我一直想要的Markdown编辑器,于是我就想到了这个主题。当然,我的水平一时是难于写出Typora那样的编辑器的,但人生已经如此艰难,大家就不要拆穿了,我主要是想通过一个实际应用分享一下Angular(文中提到的Angula...
jekyll博客上的代码语法高亮设置
_config.yml文件上设置: highlighter: pygments python -m pip install Pygments: highlighter: rouge 安装: gem install rouge
Notepad++上使用Markdown及其高亮Highlight设置
准备在博客上写文章,很多人推荐notepad++,于是查资料添加了markdown插件并使用高亮 只需四步,最终效果如下,还算不错,能够实现实时预览 + 步骤一 在notepad++官网下载64位安装包 + 步骤二 下载最新的markdown插件,github:https://github.com/nea/MarkdownViewerPlusPlus/releases 登不上g...
支持 Markdown 语法和代码高亮
本文是根据大牛博客教程,自己的知识拾遗,记录。 Markdown 使用方式,将需要渲染的文本交给markdown处理一下即可 Markdown 的简单使用 pip install Markdown  blog/views.py import markdown from django.shortcuts import render, get_object_or_
WordPress的几款代码高亮插件比较
http://www.oschina.net/news/26092/syntax-highlighter-plugins-for-wordpress 1、WP-SynHighlight http://wordpress.org/extend/plugins/wp-synhighlight/ 评价:这是最给力的一款,与其他插件不同的是,它不是通过手动加标签来实现代码板的,而是通过GUI
如何使用MarkDown 使 代码块高亮
我使用的是Mou, 它本身是不支持 代码块高亮的 , CSDN 的在线编辑 的 代码块是支持高亮的,虽然不太好看使用Mou的时候在 文章开头加入<link rel="stylesheet" href="http://yandex.st/highlightjs/6.1/styles/vs.css"> <script src="http://yandex.st/highlightjs/6.1/hig
百度编辑器(UEditor)结合highlight.js实现代码高亮显示
之前开发自己的个人博客,苦苦寻找使代码高亮的方法,因为公司项目百度编辑器用的比较多,也就没去折腾研究其他的编辑器,使百度编辑器代码高亮的方法网上一搜一大片,基本上全是在页面里引入下面这些: &amp;lt;script type=&quot;text/javascript&quot; src=&quot;/Public/static/ueditor1_4_3/third-party/SyntaxHighlighter/shCore...
解析markdown文本,高亮代码,目录侧边栏
前言 个人比较喜欢使用markdown写笔记,用过vs code,也用过作业部落,但是都没有自己喜欢的侧边栏显示目录效果,所以就打算自己写一个web来解析自己的markdown笔记,以下内容记录一下自己使用到的和参考的工具和资料。 解析markdown文本 参考链接 https://www.jianshu.com/p/60d8d51bed11 https://github.com/x...
糅合Markdown和语法高亮,快速写作技术博客
之前博客在javaeye,不知道触犯了老大哪根神经,不声不响就给封了,现在来到CSDN,又正好赶上改版,好好的博客写完后格式乱七八糟。国内的其他博客商也都好不到哪里去,不知道什么时候就被封,算了,自己动手丰衣足食,自己搞个独立博客吧。要求:代码写惯了,觉得可视化编辑器非常不靠谱,
markDown支持高亮的语言列表
language key 1C 1c ActionScript actionscript Apache apache AppleScript applescript AsciiDoc asciidoc AspectJ asciidoc AutoHotkey autohotkey AVR As...
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
CSDN-markdown 文字样式设置(字体, 大小, 颜色, 高亮底色)
本文介绍与文字格式的相关设置语法,包括字体、大小、颜色和高亮背景色。并且介绍了表格中格子背景色的设置。
cutemarked V0.11.2
CuteMarkEd 是一个 Markdown 编辑器,提供实时 HTML 预览、数学表达式和源码高亮。
在线markdown转html+代码高亮
markdown转html highlight
wordpress使用markdown时采用prism进行代码高亮
背景:最近将博客的文章编辑器切换为markdown了,但是发现wordpress主题自带的css无法实现代码高亮,作为强迫症看着非常不舒服,遂想尽方法实现在markdown中实现代码高亮。 1.使用markdown编辑器 首先,你需要将wordpress自带的文章编辑器切换为markdown,这里需要安装markdown插件,几经对比,选择了WP Editor.md插件,一款可以实时预览的...
Markdown_篇2_java代码高亮
第一个是本站点的OSC 的 Markdown 编辑器支持代码高亮,你可以在代码上方使用 或 lang: java 的形式来指定编程语言,这样文章在显示的时候会使用 SyntaxHighlighter 自动按照指定的语言进行语法着色。
[csdn markdown]使用摘记一源代码高亮及图片上传和链接
本文主要内容是体验csdn markdown的代码块高亮显示和图片链接及上传。图片上传上边这是标题行,只需要使用一个#就可以表示,几个表示是几级标题图片上传 本地图片上传控件 本地图片上传方式 csdn markdown编辑器的整体风格 源代码高亮显示 插入链接如果想要自动根据标题生成目录,那么就使用[TOC] 标记来表示这里是目录,并且会自动生成。在我们编辑文章的时候,可以看到左边是编辑区,右边是
手把手带你实现Markdown编辑器语法高亮
如果喜欢不如给个star鼓励一下:ZYMarkdownEditor什么是正则表达式? iOS开发如何使用正则表达式? 使用正则表达式匹配Markdown 性能劣势? 配合YYTextView实现语法高亮 本文是作者在独立开发一款Markdown编辑器App时所写,读完本文你将可以实现如下效果:什么是正则表达式? 正则表达式(regular expression)描述了一种字符串匹配的模式,可以用
python3-markdown 解析反引号代码块与代码高亮
解析三个反引号python3-markdown默认有些扩展未开启,导致类是三个反引号(“`)包含的代码块无法解析markdown.markdown(text, extensions=['markdown.extensions.extra'])或者markdown.markdown(text, ['extra'])代码高亮markdown.markdown(text, extensions=['mar
MarkDown代码块高亮
我们使用MarkDown添加代码块时需要标记语言来实现高亮 使用标记前 使用标记后 使用方法 支持的语言
如何在GitHub使用高亮语法
GitHub使用的是js的markdown解析器 https://github.com/coreyti/showdown/blob/master/src/showdown.js 具体使用方法是用三个“`”(非数字键1左边那个)包住代码块即可 声明语言类型的话在后面加语言名称如: ```java //java代码 ```
markdown 语法高亮支持
代码语法高亮支持的语言和缩写标记参考 代码语法高亮 书写格式为: ` ` ` language_key if (condition){ return true } ` ` ` 在 ` ` ` (三个反引号)之间的是代码,其中language_key的值,请参考 支持的语言和缩写标记 例如,将language_key用javascript替换,效果如下: if
Winform语法高亮的编辑器比拼
 Winform语法高亮的编辑器比拼 沈胜衣 ,2008年01月08日   先鼓励一下园子里面的一位兄弟,这个是他自己些的东西 http://surfsky.cnblogs.com/archiv
C#简单实现高亮语法编辑器
C#简单实现高亮语法编辑器(一)          ——TextBox ,RichTextBox的局限性 一、RichTextBox基本设置 二、实现语法高亮 三、关键字提示 四、实现行号 就简单快速得开发文本编辑器TextBox 最为简单,大家用得也多,缺点是无法实现复杂的操作。RichTextBox虽然是则功能比它强大很多。 图 1.1  输入框控件关系
Markdown使用技巧总结——字体,颜色,字号,背景,首行缩进等
Markdown 常用技巧: 2015/12/19 16:05:18 换行: 方法1: 连续两个以上空格+回车 方法2:使用html语言换行标签:<br> 首行缩进两个字符:(每个表示一个空格,连续使用两个即可)&ensp; 半角的空格 &emsp; 全角的空格 字体、字号与颜色:   Markdown是一种可以使用普通文本编辑器编写的标记语言,通过类似HTML的标记语法,它可以使普
Vue-cli实现Markdown解析为Html以及highlight高亮代码块
marked用来干什么的?   一个功能齐全的markdown**解析器**和**编译器**,用JavaScript编写。速度建成。 marked该怎么使用?  **安装** npm install -g marked //全局安装 **使用** let marked = require('marked');
xml和html高亮代码查阅和编辑器
xml和html高亮代码查阅和编辑器,支持代码编辑,支持高亮显示xml、html不同节点,自动缩进、换行。关键是很小巧、很实用,已经在项目中用上了。
markdown-it+highlight.js后端渲染的代码高亮问题解决
起因 想把自己写的Vue学习笔记挂到自己用heroku搭的小网站上去,已经在npm上搜到GitHub风格的插件,配合markdown-it可以做到GitHub的markdown风格显示效果,但是昨天发现代码没有高亮,想做好代码高亮效果 解决过程 首先查看markdown-it,毕竟这样一个大插件没有自带的highlight效果可能性很小,Ctrl+F搜索后发现了相关代码,发现了,后端直接赋值。
使用highlightjs自定义markdown代码高亮
使用highlightjs自定义markdown代码高亮概述Mou在mac上的 markdown 编辑器,很简约,可惜Mou好像只支持标准的 markdown 语法,不支持 markdown Extra ,比如[toc]生成目录和代码高亮等,所以才有了本文。highlight.js是一个github上的代码高亮插件,支持大多数的语言,能自动识别语言,还可以随意切换不同的代码块样式。
文章热词 机器学习 机器学习课程 机器学习教程 深度学习视频教程 深度学习学习
相关热词 c# 代码编辑器 高亮 c#listview高亮 markdown 写c++ 关于python培训班 关于区块链的课程