测试markdown编辑器

2020年05月31日未雨晴空 6评论 1683阅读 0喜欢阅读模式

欢迎使用 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

字符效果和横线等

~~删除线~~ <s>删除线（开启识别HTML标签时）</s>

斜体字 斜体字

粗体粗体

粗斜体 粗斜体

上标：X2，下标：O2

缩写(同HTML的abbr标签)

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

The <abbr title="Hyper Text Markup Language">HTML</abbr> specification is maintained by the <abbr title="World Wide Web Consortium">W3C</abbr>.

引用 Blockquotes

引用文本 Blockquotes

引用的行内混合 Blockquotes

引用：如果想要插入空白换行即 标签，在插入处先键入两个以上的空格然后回车即可，普通链接。

锚点与链接 Links

普通链接
 普通链接带标题
直接链接：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 (-)

第一行
第二行
第三行

GFM task list

[x] GFM task list 1
[x] 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

[x] @mentions, #refs, links, formatting, and <del>tags</del> supported ;
[x] list syntax required (any unordered or ordered list supported) ;
[x] [ ] this is a complete item ;
[ ] []this is an incomplete item test link @pandao;
[ ] [ ]this is an incomplete item ;
- [ ] this is an incomplete item test link ;
- [ ] this is an incomplete item test link;

反斜杠 Escape

*literal asterisks*

科学公式 TeX(KaTeX)

E=mc^2

行内的公式E=mc^2行内的公式，行内的E=mc^2公式。

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

博客

最后编辑：

光阴逆旅

2021-07-21 09:07:43

兄弟，https://www.mdeditor.com挂了
回复
1. admin 光阴逆旅
  
  2021-07-21 09:07:58
  
  那只是一个编辑器demo网站啊，github还是有源码的吧。
  回复
  1. 光阴逆旅 admin
    
    2021-07-21 09:07:05
    
    我自己用Flask写了个博客，感觉原版的editor.md编辑器代码高亮不好看，你的代码高亮风格很不错，你的是如何修改的？
    回复
    1. admin 光阴逆旅
      
      2021-07-21 09:07:15
      
      确实，editormd自带的代码高亮确实不太行。我用的是prism.js➕GrayMac.css,你想用的话这两个文件可以在我页面取到。有博客可以互换友链啊。
      回复
      1. 光阴逆旅 admin
        
        2021-07-21 09:07:46
        
        博客功能好写，网站的样式风格有一些难搞，我把代码高亮搞完应该可以上线了，到时候加一下友链。
        回复
        
        admin 光阴逆旅
        
        2021-07-21 10:07:26
        
        ojbk
        回复

发表评论取消回复

电子邮件地址不会被公开。

表情

请输入以http或https开头的URL,格式如:https://oneisall.top

测试markdown编辑器

未雨晴空 • 2020年05月31日

欢迎使用 Markdown在线编辑器 MdEditor

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

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

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

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

MdEditor的功能列表演示

标题H1

标题H2

标题H3

标题H4

标题H5

字符效果和横线等

~~删除线~~ <s>删除线（开启识别HTML标签时）</s>

斜体字 斜体字

粗体粗体

粗斜体 粗斜体

上标：X2，下标：O2

缩写(同HTML的abbr标签)

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

The <abbr title="Hyper Text Markup Language">HTML</abbr> specification is maintained by the <abbr title="World Wide Web Consortium">W3C</abbr>.

引用 Blockquotes

引用文本 Blockquotes

引用的行内混合 Blockquotes

引用：如果想要插入空白换行即 标签，在插入处先键入两个以上的空格然后回车即可，普通链接。

锚点与链接 Links

普通链接
 普通链接带标题
直接链接：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 (-)

第一行
第二行
第三行

GFM task list

[x] GFM task list 1
[x] 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

[x] @mentions, #refs, links, formatting, and <del>tags</del> supported ;
[x] list syntax required (any unordered or ordered list supported) ;
[x] [ ] this is a complete item ;
[ ] []this is an incomplete item test link @pandao;
[ ] [ ]this is an incomplete item ;
- [ ] this is an incomplete item test link ;
- [ ] this is an incomplete item test link;

反斜杠 Escape

*literal asterisks*

科学公式 TeX(KaTeX)

E=mc^2

行内的公式E=mc^2行内的公式，行内的E=mc^2公式。

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!

欢迎使用 Markdown在线编辑器 MdEditor

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

MdEditor的功能列表演示

标题H1

标题H2

标题H3

标题H4

标题H5

标题H5

字符效果和横线等

引用 Blockquotes

锚点与链接 Links

多语言代码高亮 Codes

行内代码 Inline code

缩进风格

JS代码

HTML 代码 HTML codes

图片 Images

列表 Lists

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

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

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

有序列表 Ordered Lists (-)

GFM task list

绘制表格 Tables

特殊符号 HTML Entities Codes

Emoji表情

GFM task lists & Emoji & fontAwesome icon emoji & editormd logo emoji

反斜杠 Escape

科学公式 TeX(KaTeX)

分页符 Page break

绘制流程图 Flowchart

绘制序列图 Sequence Diagram

End

发表评论 取消回复

测试markdown编辑器

欢迎使用 Markdown在线编辑器 MdEditor

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

MdEditor的功能列表演示

标题H1

标题H2

标题H3

标题H4

标题H5

标题H5

字符效果和横线等

引用 Blockquotes

锚点与链接 Links

多语言代码高亮 Codes

行内代码 Inline code

缩进风格

JS代码

HTML 代码 HTML codes

图片 Images

列表 Lists

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

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

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

有序列表 Ordered Lists (-)

GFM task list

绘制表格 Tables

特殊符号 HTML Entities Codes

Emoji表情

GFM task lists & Emoji & fontAwesome icon emoji & editormd logo emoji

反斜杠 Escape

科学公式 TeX(KaTeX)

分页符 Page break

绘制流程图 Flowchart

绘制序列图 Sequence Diagram

End

发表评论取消回复