欢迎使用 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. Typora软件的使用、编程与编程语言、计算机基础、五大组成部分、三大核心硬件、操作系统

    目录 一.Typora软件的下载与使用 (1).软件下载 (2).markdown语法 二.编程与编程语言 (1).什么是语言 (2).什么是编程 (3).什么是编程语言 三.计算机本质 四.计算机五 ...

  2. .Net Core中使用NEST简单操作Elasticsearch

    C#中访问Elasticsearch主要通过两个包NEST和Elasticsearch.Net,NEST用高级语法糖封装了Elasticsearch.Net可以通过类Linq的方式进行操作,而Elas ...

  3. rt-thread模糊到清晰系列: timer.c

    #include <rtthread.h> #include <rthw.h> /* hard timer list */ static rt_list_t rt_timer_ ...

  4. C++练习12 字符串成员函数的使用

    1 #include <iostream> 2 #include <string> 3 using namespace std; 4 int main() 5 { 6 stri ...

  5. 提取show config命令结果

    import re import os # 从命令收集日志文件中,提取show config命令结果. file_list = os.listdir(os.getcwd()) dirname = os ...

  6. Vulhub 漏洞学习之:Couchdb

    Vulhub 漏洞学习之:Couchdb 目录 Vulhub 漏洞学习之:Couchdb 1 Couchdb 垂直权限绕过漏洞(CVE-2017-12635) 1.1 漏洞利用过程 2 Couchdb ...

  7. 代码随想录算法训练营day20 | leetcode ● 654.最大二叉树 ● 617.合并二叉树 ● 700.二叉搜索树中的搜索 ● 98.验证二叉搜索树

    LeetCode 654.最大二叉树 分析1.0 if(start == end) return节点索引 locateMaxNode(arr,start,end) new root = 最大索引对应节 ...

  8. JS获取本周、本月、本季度、本年

    ---------------------------------------------------------------------------------------------------- ...

  9. 使用Shapefile C Library读取shp文件并使用OpenGL绘制

    1. 概述 坐标数据是空间数据文件的核心,空间数据的数据量往往是很大的.数据可视化是GIS的一个核心应用,绘制海量的坐标数据始终是一个考验设备性能的难题,使用GPU进行绘制可有效减少CPU的负载,提升 ...

  10. springboot跳转页面404的问题

    今天测试的时候出现了这个问题: Cannot forward to error page for request [/] as the response has already been commit ...