在线Markdown编辑器

news2024/11/25 16:50:45

一直在寻找一款好用的在线Markdown编辑器,但是好像没有比较知名的简洁的,寻思自己赶紧搞一个,于是找了项目,手动搞了一个上线了,效果不错,特性拉满。欢迎试用

支持“标准” Markdown / CommonMark 和 Github 风格的语法,也可变身为代码编辑器;
支持实时预览、图片(跨域)上传、预格式文本/代码/表格插入、代码折叠、搜索替换、只读模式、自定义样式主题和多语言语法高亮等功能;
支持 ToC 目录(Table of Contents)、Emoji 表情、Task lists、@链接等 Markdown 扩展语法;
支持 TeX 科学公式(基于 KaTeX)、流程图 Flowchart 和 时序图 Sequence Diagram;
支持识别和解析 HTML 标签,并且支持自定义过滤标签解析,具有可靠的安全性和几乎无限的扩展性;
支持 AMD / CMD 模块化加载(支持 Require.js & Sea.js),并且支持自定义扩展插件;
兼容主流的浏览器(IE8+)和 Zepto.js,且支持 iPad 等平板设备;
支持自定义主题样式;

在线体验Markdown编辑器地址icon-default.png?t=N5K3http://www.toolxq.com/static/tools/markdown/editor/online/editor.html

效果图

 

全屏,简洁,带劲

代码分享

<div id="layout">
  <header class="text-center">
    <h1>在线Markdown编辑器</h1>
  </header>
  <div id="test-editormd">
    <textarea style="display:none;">### 在线Markdown编辑器</textarea>
  </div>
</div>
<script src="../examples/js/jquery.min.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="./js/bootstrap.min.js"></script>
<script src="../editormd.js"></script>
<script type="text/javascript">
var testEditor;

$(function () {
  $.get("hello.md", function (md) {
    testEditor = editormd("test-editormd", {
      width: "90%",
      height: 740,
      path: '../lib/',
      markdown: md,
      codeFold: true,
      saveHTMLToTextarea: true,
      searchReplace: true,
      htmlDecode: "style,script,iframe|on*",
      emoji: true,
      taskList: true,
      tocm: true,         // Using [TOCM]
      tex: true,                   // 开启科学公式TeX语言支持,默认关闭
      flowChart: true,             // 开启流程图支持,默认关闭
      sequenceDiagram: true,       // 开启时序/序列图支持,默认关闭,
      imageUpload: true,
      imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
      imageUploadURL: "../examples/php/upload.php",
      onload: function () {
        console.log('onload', this);
      }
    });
  });
});
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/701557.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

点云可视化

pcl::visualization::CloudViewer 与 pcl::visualization::PCLVisualizer的区别 pcl::visualization::CloudViewer是一个简单的点云查看器类&#xff0c;提供了一个简单的接口来在窗口中显示点云数据。它可以快速地显示点云&#xff0c;并且只需要几行代码即可实现简单的点云查…

数据结构与算法:链表、树、图、堆、散列表

1 链表 链表是线性数据结构&#xff08;数据元素之间存在着“一对一”关系&#xff09;&#xff0c;链表中的每个元素是一个包含数据data和引用字段的对象&#xff0c;引用字段只有next为单向链表&#xff0c;同时又prev和next为双向链表。 1.1 链表基本操作 链表读取第 i 个…

java集合体系结构笔记

java集合的特点&#xff1a; 提供一种存储空间可变的存储模型&#xff0c;存储的数据容量可以随时发生改变。 单列数据&#xff1a; 双列数据&#xff1a; 单列数据集合存储实现接口Collection 双列数据集合存储实现接口Map 单列数据集合&#xff0c;数据值可重复存储实…

git杀手级功能 —— 分支管理

目录 分支介绍 创建分支 切换分支 和并分支 删除分支 合并冲突 分支管理策略 分支策略 bug分支 其他问题 强行删除临时分支 结语 分支介绍 在版本回退里发现&#xff1a;每次提交&#xff0c;git都会把它们穿成一条时间线&#xff0c;而这条时间线就可以理解为一个分支…

数据库监控与调优【十八】—— Percona Toolkit调优神器安装与使用

Percona Toolkit调优神器安装与使用 Percona Toolkit安装 本文基于Percona Toolkit 3.2.0&#xff0c;理论支持所有版本。 Percona Toolkit是一款MySQL世界里面非常实用的工具套件&#xff0c;如何安装它。 Windows系统 不支持。详见https://forums.percona.com/discussion/…

vue 一直运行 /sockjs-node/info?t=解决办法

sockjs-node介绍 sockjs-node 是一个JavaScript库&#xff0c;提供跨浏览器JavaScript的API&#xff0c;创建了一个低延迟、全双工的浏览器和web服务器之间通信通道。 服务端&#xff1a;sockjs-node&#xff08;https://github.com/sockjs/sockjs-node&#xff09;客户端&…

短视频抖音账号矩阵系统源码开发者自研(二)

一、短视频账号矩阵系统源码开发储存集群化开发运转更快 短视频账号矩阵系统源码开发采用储存集群化开发&#xff0c;可以显著提高系统的运转速度和效率。通过优化储存结构和算法&#xff0c;系统能够更快地处理短视频账号数据&#xff0c;确保用户能够流畅地浏览和观看短视频…

6.4 原子引用

1、什么是原子引用 原子引用以cas的方式实现控制多线程之前的同步&#xff0c;从而保证多线程的安全性 原子引用主要有以下三个类 AtomicReferenceAtomicStampReferenceAtomicMarkableReference 2、demo演示 Slf4j(topic "c.Test35") public class Test35 {pub…

C++day2

一、类和结构体的区别 成员访问权限&#xff1a;类中的成员默认是私有的&#xff0c;需要使用访问修饰符&#xff08;如public、private、protected&#xff09;来显式指定访问权限。而结构体中的成员默认是公共的&#xff0c;即可以直接访问。 继承&#xff1a;类支持继承&am…

面向对象高级实战演练之银行系统

面向对象高级实战演练之银行系统 实现功能&#xff1a; 1. 银行管理员(使用管理员密码)查看所有用户信息 2. 进入银行系统提示功能 3. 用户密码管理 4. 账户开户/销户 5. 存款/取款 6. 用户间转账 7. 用户余额查询 8. 常见错误检查和提示代码实现&#xff1a; import random…

【LeetCode】动态规划 刷题训练(六)

文章目录 123. 买卖股票的最佳时机 III题目解析零笔交易一笔交易两笔交易 状态转移方程f[i][j]状态转移方程g[i][j]状态转移方程 初始化完整代码 188. 买卖股票的最佳时机 IV题目解析状态转移方程f[i][j]状态转移方程g[i][j]状态转移方程 初始化完整代码 53. 最大子数组和状态转…

vhost-net-原理-初始化流程-数据传输流程

文章目录 1.vhost net2.vhost-net的初始化流程vhost net设置vhost dev设置vhost vring设置 3.数据收发流程分析3.1 数据发送3.2 数据接收 4ioventfd和irqfd的通知机制4.1ioeventfdqemu侧kvm侧总体效果 4.2irqfdqemu侧kvm侧总体效果 参考&#xff1a; 1.vhost net 传统的virtio…

深入理解Java虚拟机jvm-垃圾收集器日志参数

垃圾收集器日志参数 查看GC基本信息查看GC详细信息查看GC前后的堆、方法区可用容量变化查看GC过程中用户线程并发时间以及停顿的时间查看收集器Ergonomics机制&#xff08;自动设置堆空间各分代区域大小、收集目标等内容&#xff0c;从Parallel收集器开始支持&#xff09;自动调…

windows下nginx location root路径问题

Windows版本nginx的多级路径问题 windows 下 nginx location root路径为多级目录的问题解决方案&#xff1a;使用双反斜杠--\\Windows版本的nginx常用命令一览&#xff1a; windows 下 nginx location root路径为多级目录的问题 nginx的windows版本中location路径为多级目录 需…

Git客户端:Tower for Mac 注册版

Tower是一款Mac OS X系统上的Git客户端软件&#xff0c;它提供了丰富的功能和工具&#xff0c;帮助用户更加方便地管理和使用Git版本控制系统。以下是Tower的一些特点&#xff1a; 1. 界面友好&#xff1a;Tower的界面友好&#xff0c;使用户能够轻松地掌握软件的使用方法。 …

【vs2022】MSVCRTD.lib 4098: 默认库“libcmtd.lib”与其他库的使用冲突

verbose-print- 整理&#xff1a;warning LNK4098: 默认库“LIBCMT”与其他库的使用冲突&#xff1b;请使用 /NODEFAULTLIB:library 讲解的非常详细&#xff1a; Linker 加入命令行选项 To set this linker option in the Visual Studio development environment Open the p…

Chapter 1: Introduction - Why Program? | Python for Everybody 讲义_En

文章目录 Python for Everybody课程简介Python for Everybody (Why Program?)Why should you learn to write programs?Creativity and motivationComputer hardware architectureUnderstanding programmingWords and sentencesConversing with PythonTerminology: Interpret…

MyBatis全篇

文章目录 MyBatis特性下载持久化层技术对比 搭建MyBatis创建maven工程创建MyBatis的核心配置文件创建mapper接口创建MyBatis的映射文件测试功能加入log4j日志功能加入log4j的配置文件 核心配置文件的完善与详解MyBatis的增删改查测试功能 MyBatis获取参数值在IDEA中设置中配置文…

Java Web HTMLCSS(2)23.6.28

2&#xff0c;CSS 2.1 概述 CSS 是一门语言&#xff0c;用于控制网页表现。我们之前介绍过W3C标准。W3C标准规定了网页是由以下组成&#xff1a; 结构&#xff1a;HTML表现&#xff1a;CSS行为&#xff1a;JavaScript CSS也有一个专业的名字&#xff1a;Cascading Style Sh…