欢迎使用 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. Codeforces Round #851 (Div. 2) A-E

    比赛链接 A 题意 给一串只包含 \(1,2\) 的数,找到最小的 \(k\) 使得 \(\prod_{i=1}^k a_i = \prod_{i=k+1}^n a_i\) . 题解 知识点:枚举. ...

  2. 软件设计师考试备考之UML

    UML 统一建模语言是面向对象软件的标准化建模语言. 事务 结构事务 UML模型中的名称,它们通常是模型的静态部分,描述概念或物理元素 图形表示: 行为事务 UML模型中的动态部分.它们是模型中的动词 ...

  3. 【译】.NET 7 中的性能改进(三)

    原文 | Stephen Toub 翻译 | 郑子铭 PGO 我在我的 .NET 6 性能改进一文中写了关于配置文件引导优化 (profile-guided optimization) (PGO) 的 ...

  4. 【KAWAKO】MNN-1.2.0版本交叉编译遇到的错误与解决方法

    目录 在使用gcc-linaro-7.5.0-aarch64-linux-gnu.gcc-linaro-6.3.1-aarch64-linux-gnu交叉编译链对MNN1.2.0进行交叉编译的过程中, ...

  5. 【KAWAKO】deepface-在基于m1芯片的macbook上进行安装

    ​目录 前言 本机配置 安装miniforge tips 安装tensorflow 安装deepface及相关库 Reference 前言 deepface是一款"即插即用"的人脸 ...

  6. SX【2020.01.09】NOIP提高组模拟赛(day1)

    [2020.01.09]NOIP提高组模拟赛(day1) 这次考得不理想,只做了前两题,后两题没时间做,说明做题速度偏慢. source : 100 + 20 + 0 + 0 = 120 rank7 ...

  7. Binary &Op是什么

    前言 在并行开发时我们经常会用到Pstream::gather()函数或是全局函数reduce()或者其他,需要输入参数Binary &Op,本篇主要讨论Binary &Op是什么 t ...

  8. Vue3 自定义指令执行了两次的问题

    下面是我注册全局指令的代码,这是我注册的一个通过 hljs 解析 html -> pre code 的指令,数据是异步获取的: app.directive("parse-code&qu ...

  9. XMLHttpRequest、Ajax、Fetch与Axios

    1. 引言 XMLHttpRequest.Ajax.Fetch与Axios是网页前后端交互中常见到的名词 参考MDN:Ajax - Web 开发者指南 | MDN (mozilla.org) Ajax ...

  10. Vue中实现异步加载的组件进行分割介绍

    一,传统方式 如上图所示,不管我们前端页面是否访问了About组件的内容,打包之后的代码都会将其打包到js文件中,缺点:这样是无畏的增加了请求的负担,加载了我们不需要的js代码 如果运用webpack ...