vditor完整的markdown富文本编辑器示例代码
代码语言：html
所属分类：其他
代码描述：vditor完整的markdown富文本编辑器示例代码，包含代码高亮、流程图绘制、序列图、甘蔗图，表格、图片、文字排版等示例代码。
代码标签： vditor markdown 富 文本 编辑器 示例 代码 甘蔗图 序列图 流程图
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<html>
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/js/vditor/vditor.css">
<script src="//repo.bfw.wiki/bfwrepo/js/vditor/method.min.js"></script>
</head>
<body>
<div class="vditor-reset" id="preview">
<p>欢迎使用 Cmd Markdown 编辑阅读器</p>
<h1 id="欢迎使用-Cmd-Markdown-编辑阅读器">欢迎使用 Cmd Markdown 编辑阅读器</h1>
<hr />
<p>我们理解您需要更便捷更高效的工具记录思想，整理笔记、知识，并将其中承载的价值传播给他人，<strong>Cmd Markdown</strong> 是我们给出的答案 —— 我们为记录思想和分享知识提供更专业的工具。 您可以使用 Cmd Markdown：</p>
<blockquote>
<ul>
<li>整理知识，学习笔记</li>
<li>发布日记，杂文，所见所想</li>
<li>撰写发布技术文稿（代码支持）</li>
<li>撰写发布学术论文（LaTeX 公式支持）</li>
</ul>
</blockquote>
<p><img src="//repo.bfw.wiki/bfwrepo/image/5d6539385ad28.png" alt="cmd-markdown-logo" /></p>
<p>除了您现在看到的这个 Cmd Markdown 在线版本，您还可以前往以下网址下载：</p>
<h3 id="Windows-Mac-Linux-全平台客户端"><a href="">Windows/Mac/Linux 全平台客户端</a></h3>
<blockquote>
<p>请保留此份 Cmd Markdown 的欢迎稿兼使用说明，如需撰写新稿件，点击顶部工具栏右侧的 <i class="icon-file"></i> <strong>新文稿</strong> 或者使用快捷键 <code>Ctrl+Alt+N</code>。</p>
</blockquote>
<hr />
<h2 id="什么是-Markdown">什么是 Markdown</h2>
<p>Markdown 是一种方便记忆、书写的纯文本标记语言，用户可以使用这些标记符号以最小的输入代价生成极富表现力的文档：譬如您正在阅读的这份文档。它使用简单的符号标记不同的标题，分割不同的段落，<strong>粗体</strong> 或者 <em>斜体</em> 某些文字，更棒的是，它还可以</p>
<h3 id="1--制作一份待办事宜-Todo-列表">1. 制作一份待办事宜 <a href="">Todo 列表</a></h3>
<ul>
<li class="vditor-task"><input disabled="" type="checkbox" /> 支持以 PDF 格式导出文稿</li>
<li class="vditor-task"><input disabled="" type="checkbox" /> 改进 Cmd 渲染算法，使用局部渲染技术提高渲染效率</li>
<li class="vditor-task"><input checked="" disabled="" type="checkbox" /> 新增 Todo 列表功能</li>
<li class="vditor-task"><input checked="" disabled="" type="checkbox" /> 修复 LaTex 公式渲染问题</li>
<li class="vditor-task"><input checked="" disabled="" type="checkbox" /> 新增 LaTex 公式编号功能</li>
</ul>
<h3 id="2--书写一个质能守恒公式">2. 书写一个质能守恒公式<sup class="footnotes-ref" id="footnotes-ref-1"><a href="#footnotes-def-1">1</a></sup></h3>
<p><span class="vditor-math">E=mc^2</span></p>
<h3 id="3--高亮一段代码">3. 高亮一段代码<sup class="footnotes-ref" id="footnotes-ref-2"><a href="#footnotes-def-2">2</a></sup></h3>
<pre><code class="language-python">@requires_authorization
class SomeClass:
pass
if __name__ == '__main__':
# A comment
print 'hello world'
</code></pre>
<h3 id="4--高效绘制-流程图">4. 高效绘制 <a href="">流程图</a></h3>
<pre><code class="language-mermaid">flowchart TD;
A-->B;
A-->C;
B-->D;
C-->D;
</code></pre>
<h3 id="5--高效绘制-序列图">5. 高效绘制 <a href="">序列图</a></h3>
<pre><code class="language-mermaid">sequenceDiagram
Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!
</code></pre>
<h3 id="6--高效绘制-甘特图">6. 高效绘制 <a href="">甘特图</a></h3>
<pre><code class="language-mermaid">gantt
title 项目开发流程
section 项目确定
需求分析 :a1, 2016-06-22, 3d
可行性报告 :after a1, 5d
概念验证 : 5d
section 项目实施
概要设计 :2016-07-05 , 5d
详细设计 :2016-07-08, 10d
编码 :2016-07-15, 10d
测试 :2016-07-22, 5d
section 发布验收
发布: 2d
验收: 3d
</code></pre>
<h3 id="7--绘制表格">7. 绘制表格</h3>
<table>
<thead>
<tr>
<th>项目</th>
<th align="right">价格</th>
<th align="center">数量</th>
</tr>
</thead>
<tbody>
<tr>
<td>计算机</td>
<td align="right">$1600</td>
<td align="center">5</td>
</tr>
<tr>
<td>手机</td>
<td align="right">$12</td>
<td align="center">12</td>
</tr>
<tr>
<td>管线</td>
<td align="right">$1</td>
<td align="center">234</td>
</tr>
</tbody>
</table>
<h3 id="8--更详细语法说明">8. 更详细语法说明</h3>
<p>想要查看更详细的语法说明，可以参考我们准备的 <a href="">Cmd Markdown 简明语法手册</a>https://www.zybuluo.com/mdeditor?u.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0