[Web] 简易Markdown可预览编辑器 —— Codemirror+Marked+Prism

最新推荐文章于 2024-04-01 09:37:30 发布
最新推荐文章于 2024-04-01 09:37:30 发布
阅读量6.9k 收藏 5
点赞数 1
分类专栏： Web 文章标签： markdown codemirror html css js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Elliott_Yoho/article/details/53695393
版权

代码很简单，都是在用别人写好的东西，觉得这个还是有点用，所以简单记录一下。

在线预览: http://118.89.16.142:8000/csdndemo/markdown

插件

效果预览

codemirror-markdown preview

代码

除了插件那些的js和css文件，就只有三个自己要写的。主页index.html，样式style.css，还有一个初始化 codemirror 和 marked 配置的 main.js。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Markdown</title>
  <link rel="stylesheet" href="codemirror/lib/codemirror.css">
  <link rel="stylesheet" href="codemirror/theme/material.css">
  <link rel="stylesheet" href="codemirror/addon/dialog/dialog.css">
  <link rel="stylesheet" href="stylesheets/style.css">
  <link rel="stylesheet" href="stylesheets/github-markdown.css">
  <
最低0.47元/天 解锁文章
扑街中的二娃
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
[NodeJS] Express 处理 markdown——marked+prism+github-markdown-css
从入门到扑街
12-02 6039
环境 操作系统: Ubuntu 16.04 Node: v7.0.0 Express: 4.x 模块及样式markdown解析工具 和 样式及语法高亮的插件有很多，比如解析工具还有markdown-js，语法高亮还有Google Code Prettify，等等。这里我们只介绍使用其中的三个，作为一个组合。 Markdown解析: marked v0.3.6 Markdown-css: github
lang-markdown:Markdown语言对CodeMirror代码编辑器的支持
03-10
@ codemirror / lang-markdown [| | ] 该软件包为代码编辑器实现Markdown语言支持。 该包含更多信息，许多和。 此代码是根据发布的。 我们的目标是成为一个包容，热情的社区。 为了明确起见，我们有适用于项目周围沟通。 API参考 ( ⁠?: = {}) → Markdown语言支持。 ⁠?: 如果指定了此语言，则默认情况下将使用该语言来解析代码块。 ⁠?: readonly [] 当受防护的代码块具有信息字符串时，语言描述的集合，以搜索匹配的语言（使用 ）。 ⁠?: 将此设置为false可禁用Markdown安装。 : Markdown / CommonMark的语言支持。 : 当在带有光标选择的Markdown上下文中调用此命令时，该命令将创建一个新行，并带有在旧行中处于活动状态的块引用和列表的标记。
使用Codemirror的markdown编辑器和使用showdown的Vue.js预览器
cuk5340的博客
07-29 885
摊牌减价编辑 (showdown-markdown-editor) A markdown editor using codemirror and previewer using showdown for Vue.js. 使用Codemirror的Markdown编辑器和使用Showdown的Vue.js预览器。 支持某些markdown扩展功能 (Supporting some markd...
推荐一款强大的Markdown预览器：MDPlayer
最新发布
gitblog_00063的博客
04-01 394
推荐一款强大的Markdown预览器：MDPlayer 项目地址:https://gitcode.com/kuma4649/MDPlayer 项目简介 MDPlayer 是一个基于 Electron 框架开发的 Markdown 预览器，它提供了实时预览、自定义主题、代码高亮等一系列功能，为Markdown写作爱好者和开发者提供了高效、舒适的写作环境。 技术分析 基于Electron框架 MDPl...
基于react的 markdown 输入 + 即时预览在线编辑器
weixin_34055787的博客
12-27 1301
本文介绍如何使用 Ace和 CodeMirror来实现一个基于 react的 markdown 输入 + 即时预览在线编辑器 Ace版本 Ace算是一个久经考验的老牌编辑器插件了，现在很多大公司都在用这个东西，似乎 Github曾经就使用 Ace用于构建它的在线编辑器（虽然现在不用了）。 Ace在Github上只是存放了其项目，更多详细的介绍，例如如何开始以及 API等文档都放在它的官网上...
codemirror-markdown-editor:使用AngularJS构建的Markdown编辑器
05-13
Codemirror Markdown编辑器 内置Angular JS自定义指令！ 特征 GitHub预览版 表情符号支持！ :grinning_face_with_smiling_eyes: :thumbs_up: 内置 为解析降价 符号的符号！ :face_blowing_a_kiss: :face_screaming_in_fear: :speech_balloon: 代码高亮显示 用于美化markdown输出 用于美化代码输出 例子 Java脚本 function ( ) { console . log ( 'This is awesome!' ) ; } 重击 # step 1 npm install 等等.. 结束 享受〜
Draft基于CodeMirror和Marked的在线MarkDown编辑器
08-10
Draft: 基于CodeMirror和Marked的在线MarkDown编辑器
基于 web 端的 Markdown 编辑器，支持协同编辑扩展和方便的插件扩展
01-17
markdown下载基于 web 端的 Markdown 编辑器，支持协同编辑扩展和方便的插件扩展基于 web 端的 Markdown 编辑器，支持协同编辑扩展和方便的插件扩展基于 web 端的 Markdown 编辑器，支持协同编辑扩展和方便的插件...
markdown 编辑器
07-02
基于codemirror marked 自己diy 的一个markdown 编辑器。 已实现粘贴、拖拽上传，更多功能下载体验吧
html+js 实现markdown编辑器效果
12-14
markdown的Editor.md插件官方网站：https://pandao.github.io/editor.md/ 一：下载Editor.md 1：进入官网直接进行下载 github下载地址：https://github.com/pandao/editor.md 2：使用npm进行下载 npm install ...
codemirror-example:使用CodeMirror的Markdown编辑器的示例
05-10
代码镜像示例 带有CodeMirror的markdown编辑器示例。 cd codemirror-example npm install npm start
mirrormark, 简单而可以扩展的Markdown 编辑器，由Codemirror构建.zip
09-18
mirrormark, 简单而可以扩展的Markdown 编辑器，由Codemirror构建 概述MirrorMark是一个简单而可扩展的Markdown 编辑器，使用 Codemirror 创建。请参阅演示插件。安装bower install mirrormark依赖项CodemirrorLod
nextjs-prism-markdown:将Prism Markdown与Next.js结合使用的示例，包括切换语法突出显示主题
05-06
在Next.js中使用Prism 将Prism / Markdown与Next.js结合使用的示例，包括切换语法突出显示主题。
一个基于Vue的markdown编辑器应用
08-10
一个基于Vue的markdown编辑器应用
codemirror6 制作markdown编辑器(源码模式)
qq_43203949的博客
06-26 918
总体上感觉能用，但是不怎么友好，官方文档有点散乱，而且关键字高亮功能是独立出去的，去官方文档找半天，也没找到怎么改。EditorView.theme可以往EditorView模块中修改CSS的样式，从而影响编辑器的样式展示。"### 测试\n\n```javascript\nlet x = 'y'\n```"这个插件中的markdown语法的高亮样式。//这里指定markdown中代码块使用的解析扩展。开头的class样式，并且还需要在选择器前面添加。//markdown语言解析扩展。
纯前端打造一个简易实时预览的markdown编辑器
weixin_34321753的博客
08-07 1132
先下载https://github.com/markedjs/marked和https://github.com/ajaxorg/ace-builds/插件,还有JQuery也是不可少的 --在线markdown编辑器参考,https://www.zybuluo.com/mdeditor https://...
Electron+React+codeMirror实现Markdown编辑器
yoongrui
07-19 384
使用Electron+React+codemirror搭建桌面的Mardown编辑器
jquery在线html edit,editor.md: Editor.md 是一款开源的、可嵌入的 Markdown 在线编辑器（组件），基于 CodeMirror、jQuery 和 Marked ...
weixin_39723248的博客
05-31 452
Editor.mdEditor.md : The open source embeddable online markdown editor (component), based on CodeMirror & jQuery & Marked.FeaturesSupport Standard Markdown / CommonMark and GFM (GitHub Flavore...
vue中使用codemirror实现在线编辑及预览代码
陈小陈的博客
06-01 2385
codemirror
CSDN-markdown编辑器语法——字体、字号与颜色
05-27
CSDN-markdown编辑器支持使用HTML标签来设置字体、字号与颜色，具体如下： 1. 字体 使用`<font>`标签来设置字体，语法为： ``` <font face="字体名称">文字</font> ``` 其中，`face`属性指定字体名称，比如： ``` <font face="宋体">这是宋体字体</font> <font face="微软雅黑">这是微软雅黑字体</font> ``` 2. 字号 使用`<font>`标签的`size`属性来设置字号，语法如下： ``` <font size="字号">文字</font> ``` 其中，`size`属性指定字号，可以使用数字或相对大小，比如： ``` <font size="5">这是字号为5的文字</font> <font size="+1">这是比原来大一个字号的文字</font> <font size="-1">这是比原来小一个字号的文字</font> ``` 3. 颜色 使用`<font>`标签的`color`属性来设置字体颜色，语法如下： ``` <font color="颜色值">文字</font> ``` 其中，`color`属性指定颜色值，可以使用颜色名称或十六进制值，比如： ``` <font color="red">这是红色的文字</font> <font color="#00ff00">这是绿色的文字</font> ``` 注意：使用HTML标签可能会影响页面的渲染效果，建议慎重使用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值