欢迎使用 Markdown在线编辑器 MdEditor

Markdown是一种轻量级的「标记语言」

Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式。它允许人们使用易读易写的纯文本格式编写文档,然后转换成格式丰富的HTML页面,Markdown文件的后缀名便是“.md”

MdEditor是一个在线编辑Markdown文档的编辑器

MdEditor扩展了Markdown的功能(如表格、脚注、内嵌HTML等等),以使让Markdown转换成更多的格式,和更丰富的展示效果,这些功能原初的Markdown尚不具备。

Markdown增强版中比较有名的有Markdown Extra、MultiMarkdown、 Maruku等。这些衍生版本要么基于工具,如Pandoc,Pandao;要么基于网站,如GitHub和Wikipedia,在语法上基本兼容,但在一些语法和渲染效果上有改动。

MdEditor源于Pandao的JavaScript开源项目,开源地址Editor.md,并在MIT开源协议的许可范围内进行了优化,以适应广大用户群体的需求。向优秀的markdown开源编辑器原作者Pandao致敬。

MdEditor的功能列表演示

标题H1

标题H2

标题H3

标题H4

标题H5
标题H5

字符效果和横线等


删除线 删除线(开启识别HTML标签时)

斜体字 斜体字

粗体 粗体

粗斜体 粗斜体

上标:X2,下标:O2

缩写(同HTML的abbr标签)

即更长的单词或短语的缩写形式,前提是开启识别HTML标签时,已默认开启

The HTML specification is maintained by the W3C.

引用 Blockquotes

引用文本 Blockquotes

引用的行内混合 Blockquotes

引用:如果想要插入空白换行即<br />标签,在插入处先键入两个以上的空格然后回车即可,普通链接

锚点与链接 Links

普通链接

普通链接带标题

直接链接:https://www.mdeditor.com

[锚点链接][anchor-id]

[anchor-id]: https://www.mdeditor.com/

mailto:test.test@gmail.com

GFM a-tail link @pandao

邮箱地址自动链接 test.test@gmail.com www@vip.qq.com

@pandao

多语言代码高亮 Codes

行内代码 Inline code

执行命令:npm install marked

缩进风格

即缩进四个空格,也做为实现类似 <pre> 预格式化文本 ( Preformatted Text ) 的功能。

<?php
echo "Hello world!";
?>

预格式化文本:

| First Header  | Second Header |
| ------------- | ------------- |
| Content Cell | Content Cell |
| Content Cell | Content Cell |

JS代码

function test() {
console.log("Hello world!");
}

HTML 代码 HTML codes

<!DOCTYPE html>
<html>
<head>
<mate charest="utf-8" />
<meta name="keywords" content="Editor.md, Markdown, Editor" />
<title>Hello world!</title>
<style type="text/css">
body{font-size:14px;color:#444;font-family: "Microsoft Yahei", Tahoma, "Hiragino Sans GB", Arial;background:#fff;}
ul{list-style: none;}
img{border:none;vertical-align: middle;}
</style>
</head>
<body>
<h1 class="text-xxl">Hello world!</h1>
<p class="text-green">Plain text</p>
</body>
</html>

图片 Images

图片加链接 (Image + Link):

Follow your heart.


列表 Lists

无序列表(减号)Unordered Lists (-)

  • 列表一
  • 列表二
  • 列表三

无序列表(星号)Unordered Lists (*)

  • 列表一
  • 列表二
  • 列表三

无序列表(加号和嵌套)Unordered Lists (+)

  • 列表一
  • 列表二
    • 列表二-1
    • 列表二-2
    • 列表二-3
  • 列表三
    • 列表一
    • 列表二
    • 列表三

有序列表 Ordered Lists (-)

  1. 第一行
  2. 第二行
  3. 第三行

GFM task list

  • GFM task list 1
  • GFM task list 2
  • GFM task list 3
    • GFM task list 3-1
    • GFM task list 3-2
    • GFM task list 3-3
  • GFM task list 4
    • GFM task list 4-1
    • GFM task list 4-2

绘制表格 Tables

项目 价格 数量
计算机 $1600 5
手机 $12 12
管线 $1 234
First Header Second Header
Content Cell Content Cell
Content Cell Content Cell
First Header Second Header
Content Cell Content Cell
Content Cell Content Cell
Function name Description
help() Display the help window.
destroy() Destroy your computer!
Left-Aligned Center Aligned Right Aligned
col 3 is some wordy text $1600
col 2 is centered $12
zebra stripes are neat $1
Item Value
Computer $1600
Phone $12
Pipe $1

特殊符号 HTML Entities Codes

& ¨ ¡ £

& < > ¥ € ± ¶ § ¦ ¯ « ·

X² Y³ ¾ ¼ × ÷ »

18ºC " '

[========]

Emoji表情

Blockquotes

GFM task lists & Emoji & fontAwesome icon emoji & editormd logo emoji :editormd-logo-5x:

  • @mentions, #refs, links, formatting, and tags supported :editormd-logo:;
  • list syntax required (any unordered or ordered list supported) :editormd-logo-3x:;
  • [ ] this is a complete item ;
  • []this is an incomplete item test link :fa-star: @pandao;
  • [ ]this is an incomplete item :fa-star: :fa-gear:;
    • this is an incomplete item test link :fa-star: :fa-gear:;
    • this is :fa-star: :fa-gear: an incomplete item test link;

反斜杠 Escape

*literal asterisks*

[========]

科学公式 TeX(KaTeX)

\[E=mc^2
\]

行内的公式$$E=mc2$$行内的公式,行内的$$E=mc2$$公式。

\[x > y
\]
\[\(\sqrt{3x-1}+(1+x)^2\)
\]
\[\sin(\alpha)^{\theta}=\sum_{i=0}^{n}(x^i + \cos(f))
\]

多行公式:

\displaystyle
\left( \sum\_{k=1}^n a\_k b\_k \right)^2
\leq
\left( \sum\_{k=1}^n a\_k^2 \right)
\left( \sum\_{k=1}^n b\_k^2 \right)
\displaystyle
\frac{1}{
\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{
\frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {
1+\frac{e^{-6\pi}}
{1+\frac{e^{-8\pi}}
{1+\cdots} }
}
}
f(x) = \int_{-\infty}^\infty
\hat f(\xi)\,e^{2 \pi i \xi x}
\,d\xi

分页符 Page break

Print Test: Ctrl + P

[========]

绘制流程图 Flowchart

st=>start: 用户登陆
op=>operation: 登陆操作
cond=>condition: 登陆成功 Yes or No?
e=>end: 进入后台 st->op->cond
cond(yes)->e
cond(no)->op

[========]

绘制序列图 Sequence Diagram

Andrew->China: Says Hello
Note right of China: China thinks\nabout it
China-->Andrew: How are you?
Andrew->>China: I am good thanks!

End

Markdown的在线使用的更多相关文章

  1. MarkDown/Html在线转换(支持代码高亮,可复制到微信公众号、今日头条)

    MarkDown/Html在线转换能够将md渲染成html并且能保持代码高亮,可以方便的复制待格式的html粘贴到微信公众号,CSDN,简书,博客园,开源中国等. 扫码体验在线助手小程序 我是java ...

  2. Yii2项目实现Markdown功能 在线Markdown编辑器

    版权声明:本文为博主原创文章,欢迎扩散,扩散请务必注明出处. Yii中添加MarkDown编辑器 主要使用了两个网页Markdown编辑器,都带预览功能. 1,ijackua/yii2-lepture ...

  3. 很好用的在线markdown编辑器

    # 欢迎使用 Cmd Markdown 编辑阅读器 基本符号 *,-,+ 3个符号效果都一样,这3个符号被称为 Markdown符号 空白行表示另起一个段落 `是表示inline代码,tab是用来标记 ...

  4. 【第一篇献给markdown】markdown入门

    Markdown 是一种轻量级的「标记语言」,语法十分简单,常用的标记符号也不超过十个.虽然功能很强大,但是上手估计不用十分钟. 一些认识 Markdown 官方文档 这里可以看到官方的 Markdo ...

  5. Markdown示例

    欢迎使用 Cmd Markdown 编辑阅读器 我们理解您需要更便捷更高效的工具记录思想,整理笔记.知识,并将其中承载的价值传播给他人,Cmd Markdown 是我们给出的答案 -- 我们为记录思想 ...

  6. Markdown:纯文本进行网页排版的简单标记语言

    Markdown http://daringfireball.net/projects/markdown/ 2016-08-03 Markdown是一种标记语言,对纯文本使用简单的标记符号进行网页格式 ...

  7. MarkDown教程

    MarkDown笔记 在线编辑器其他教程 [1.标题] 标题1 标题1=== 标题2 标题2--- 标题3 1 2 3 4 5 6 7 7 #1 ##2 ###3 ####4 #####5 ##### ...

  8. 我要爱死这个markdown 了

    今天上班依旧看wpdang的文章,最后作者说,文章使用markdown写的,好奇心促使我搜了一把什么是markdown.然后看到了这篇文章,一瞬间就开始兴奋了.顿时觉得,这个东西太好用 了,简直又激起 ...

  9. 试用cmd markdown

    欢迎使用 Cmd Markdown 编辑阅读器 我们理解您需要更便捷更高效的工具记录思想,整理笔记.知识,并将其中承载的价值传播给他人,Cmd Markdown 是我们给出的答案 -- 我们为记录思想 ...

  10. 用Markdown优雅的写文章

    简介 Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式. 简单点来说,Markdown是文本标记语言,在普通文本的基础上加了一些特殊标 ...

随机推荐

  1. nexus私服搭建的上传和下载

    下载 方法1 下载应该先在nexus中创建相关的库(宿主库.代理库.仓库组),也可以使用原有的库 随后在pom文件中增加以下代码,即可从私服中下载相关的依赖包(注:依赖包的下载首先基于本地库,本地库没 ...

  2. 关于异常处理的return

    无论try代码块中是否有异常,finally里的代码都会执行 当try和catch代码块中有return语句时,finally仍然会执行 如果try-catch-finally都有return语句,则 ...

  3. JAVA8 常见用法

    1 . 集合List<T> 去单个元素,返回集合 List<Tbhr01> tbhr01List = new ArrayList<Tbhr01>(); List&l ...

  4. Symbol详解

    Symbol Symbol是es6引入的一个新的原始数据类型,是一个独一无二的值. 目前为止,js的数据类型有以下几种: 数据类型 说明 undefined undefined null null b ...

  5. RocketMQ - 生产者最佳实践总结

    相对消费者而言,生产者的使用更加简单,一般关注消息类型.消息发送方法和发送参数,即可正常使用RocketMQ发送消息 常用消息类型 消息类型 优点 缺 点 备注 普通消息(并发消息) 性能最好.单机T ...

  6. PHY状态机分析

    PHY的12种状态 enum phy_state { PHY_DOWN = 0, //关闭网卡 PHY_STARTING, //PHY设备准备好了,PHY driver尚为准备好 PHY_READY, ...

  7. HNOI2019 最小圈

    \(\text{Problem}\) 对于一张有向图,要你求图中最小圈的平均值最小是多少,即若一个圈经过 \(k\) 个节点,那么一个圈的平均值为圈上 \(k\) 条边权的和除以 \(k\),现要求其 ...

  8. element-ui引入使用

    1.全局引入 main.js import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue. ...

  9. PostgreSQL 时间/日期函数和操作符

    一.日期/时间操作符 下表演示了基本算术操作符的行为(+,*, 等): 二.日期/时间函数 二.区别 select now();select CURRENT_DATE;select CURRENT_T ...

  10. hdfs file system shell的简单使用

    目录 1.背景 2.hdfs file system shell命令有哪些 3.确定shell操作的是哪个文件系统 4.本地准备如下文件 5.hdfs file system shell 5.1 mk ...