文章目录

<a href="#Markdown_2">欢迎使用Markdown编辑器</a>

<a href="#_6">新的改变</a>    <a href="#_20">功能快捷键</a>    <a href="#_37">合理的创建标题，有助于目录的生成</a>    <a href="#_45">如何改变文本的样式</a>    <a href="#_63">插入链接与图片</a>    <a href="#_78">如何插入一段漂亮的代码片</a>    <a href="#_87">生成一个适合你的列表</a>    <a href="#_101">创建一个表格</a>    
 
  <a href="#_109">设定内容居中、居左、居右</a>      <a href="#SmartyPants_118">SmartyPants</a>         <a href="#_127">创建一个自定义列表</a>    <a href="#_136">如何创建一个注脚</a>    <a href="#_143">注释也是必不可少的</a>    <a href="#KaTeX_150">KaTeX数学公式</a>    <a href="#_164">新的甘特图功能，丰富你的文章</a>    <a href="#UML__178">UML 图表</a>    <a href="#FLowchart_206">FLowchart流程图</a>    <a href="#_224">导出与导入</a>    
 
  <a href="#_226">导出</a>      <a href="#_229">导入</a>            

欢迎使用Markdown编辑器

你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。

新的改变

我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：

全新的界面设计 ，将会带来全新的写作体验； 在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示； 增加了 图片拖拽 功能，你可以将本地的图片直接拖拽到编辑区域直接展示； 全新的 KaTeX数学公式 语法； 增加了支持甘特图的mermaid语法<sup class="footnote-ref"><a href="#fn1" id="fnref1">1</a></sup> 功能； 增加了 多屏幕编辑 Markdown文章功能； 增加了 焦点写作模式、预览模式、简洁写作模式、左右区域同步滚轮设置 等功能，功能按钮位于编辑区域与预览区域中间； 增加了 检查列表 功能。

功能快捷键

撤销：<kbd>Ctrl/Command</kbd> + <kbd>Z</kbd> 重做：<kbd>Ctrl/Command</kbd> + <kbd>Y</kbd> 加粗：<kbd>Ctrl/Command</kbd> + <kbd>B</kbd> 斜体：<kbd>Ctrl/Command</kbd> + <kbd>I</kbd> 标题：<kbd>Ctrl/Command</kbd> + <kbd>Shift</kbd> + <kbd>H</kbd> 无序列表：<kbd>Ctrl/Command</kbd> + <kbd>Shift</kbd> + <kbd>U</kbd> 有序列表：<kbd>Ctrl/Command</kbd> + <kbd>Shift</kbd> + <kbd>O</kbd> 检查列表：<kbd>Ctrl/Command</kbd> + <kbd>Shift</kbd> + <kbd>C</kbd> 插入代码：<kbd>Ctrl/Command</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd> 插入链接：<kbd>Ctrl/Command</kbd> + <kbd>Shift</kbd> + <kbd>L</kbd> 插入图片：<kbd>Ctrl/Command</kbd> + <kbd>Shift</kbd> + <kbd>G</kbd> 查找：<kbd>Ctrl/Command</kbd> + <kbd>F</kbd> 替换：<kbd>Ctrl/Command</kbd> + <kbd>G</kbd>

合理的创建标题，有助于目录的生成

直接输入1次<kbd>#</kbd>，并按下<kbd>space</kbd>后，将生成1级标题。 输入2次<kbd>#</kbd>，并按下<kbd>space</kbd>后，将生成2级标题。 以此类推，我们支持6级标题。有助于使用TOC语法后生成一个完美的目录。

如何改变文本的样式

强调文本 强调文本

加粗文本 加粗文本

<mark>标记文本</mark>

<s>删除文本</s>

引用文本

H₂O is是液体。

2¹⁰ 运算结果是 1024.

插入链接与图片

链接: <a href="https://mp.csdn.net">link</a>.

图片:

带尺寸的图片:

居中的图片:

居中并且带尺寸的图片:

当然，我们为了让用户更加便捷，我们增加了图片拖拽功能。

如何插入一段漂亮的代码片

去<a href="https://mp.csdn.net/configure">博客设置</a>页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.

// An highlighted block
var foo = 'bar';

生成一个适合你的列表

项目

项目

 项目         

项目1 项目2 项目3

<input type="checkbox" class="task-list-item-checkbox" disabled> 计划任务 <input type="checkbox" class="task-list-item-checkbox" checked="true" disabled> 完成任务

创建一个表格

一个简单的表格是这么创建的：

<table> <thead> <tr> <th>项目</th> <th>Value</th> </tr> </thead> <tbody> <tr> <td>电脑</td> <td>$1600</td> </tr> <tr> <td>手机</td> <td>$12</td> </tr> <tr> <td>导管</td> <td>$1</td> </tr> </tbody> </table>nn### 设定内容居中、居左、居右

使用:---------:居中 使用:----------居左 使用----------:居右

<table> <thead> <tr> <th align="center">第一列</th> <th align="right">第二列</th> <th align="left">第三列</th> </tr> </thead> <tbody> <tr> <td align="center">第一列文本居中</td> <td align="right">第二列文本居右</td> <td align="left">第三列文本居左</td> </tr> </tbody> </table>nn### SmartyPants

SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如：

<table> <thead> <tr> <th>TYPE</th> <th>ASCII</th> <th><abbr title="超文本标记语言">HTML</abbr></th> </tr> </thead> <tbody> <tr> <td>Single backticks</td> <td>'Isn't this fun?'</td> <td>‘Isn’t this fun?’</td> </tr> <tr> <td>Quotes</td> <td>"Isn't this fun?"</td> <td>“Isn’t this fun?”</td> </tr> <tr> <td>Dashes</td> <td>-- is en-dash, --- is em-dash</td> <td>– is en-dash, — is em-dash</td> </tr> </tbody> </table>nn## 创建一个自定义列表

<dl> Markdown <dd> Text-to- <abbr title="超文本标记语言">HTML</abbr> conversion tool </dd> Authors <dd> John </dd> <dd> Luke </dd> </dl>

如何创建一个注脚

一个具有注脚的文本。<sup class="footnote-ref"><a href="#fn2" id="fnref2">2</a></sup>

注释也是必不可少的

Markdown将文本转换为 <abbr title="超文本标记语言">HTML</abbr>。

KaTeX数学公式

您可以使用渲染LaTeX数学表达式 <a href="https://khan.github.io/KaTeX/">KaTeX</a>:

Gamma公式展示 Γ ( n ) = ( n − 1 ) ! ∀ n ∈ N \Gamma(n) = (n-1)!\quad\forall n\in\mathbb N Γ(n)=(n−1)!∀n∈N 是通过欧拉积分

Γ ( z ) = ∫ 0 ∞ t z − 1 e − t d t   . \Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt,. Γ(z)=∫0∞​tz−1e−tdt.

你可以找到更多关于的信息 LaTeX 数学表达式<a href="http://meta.math.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference">here</a>.

新的甘特图功能，丰富你的文章

<svg xmlns="http://www.w3.org/2000/svg" id="mermaid-svg-As3WUQoPKvAc33Lt" height="100%" viewbox="0 0 500 196"> <g></g> <g class="grid" transform="translate(75, 146)"> <g class="tick" transform="translate(0,0)" style="opacity: 1;"> </line> <text dy="1em" y="3" x="0" fill="#000" stroke="none" font-size="10" style="text-anchor: middle;"> Mon 06 </text> </g> <g class="tick" transform="translate(153,0)" style="opacity: 1;"> </line> <text dy="1em" y="3" x="0" fill="#000" stroke="none" font-size="10" style="text-anchor: middle;"> Mon 13 </text> </g> <g class="tick" transform="translate(306,0)" style="opacity: 1;"> </line> <text dy="1em" y="3" x="0" fill="#000" stroke="none" font-size="10" style="text-anchor: middle;"> Mon 20 </text> </g>

</path> </g> <g> <rect x="0" y="48" width="462.5" height="24" class="section section0"></rect> <rect x="0" y="72" width="462.5" height="24" class="section section0"></rect> <rect x="0" y="96" width="462.5" height="24" class="section section0"></rect> <rect x="0" y="120" width="462.5" height="24" class="section section0"></rect> </g> <g> <rect rx="3" ry="3" x="75" y="50" width="44" height="20" class="task done0"></rect> <rect rx="3" ry="3" x="141" y="74" width="65" height="20" class="task active0"></rect> <rect rx="3" ry="3" x="206" y="98" width="110" height="20" class="task task0"></rect> <rect rx="3" ry="3" x="316" y="122" width="109" height="20" class="task task0"></rect> <text font-size="11" x="97" y="63.5" text-height="20" class="taskText taskText0 doneText0"> 已完成 </text> <text font-size="11" x="173.5" y="87.5" text-height="20" class="taskText taskText0 activeText0"> 进行中 </text> <text font-size="11" x="261" y="111.5" text-height="20" class="taskText taskText0 "> 计划一 </text> <text font-size="11" x="370.5" y="135.5" text-height="20" class="taskText taskText0 "> 计划二 </text> </g> <g> <text x="10" y="98" class="sectionTitle sectionTitle0"> 现有任务 </text> </g> <g class="today"> </line> </g> <text x="250" y="25" class="titleText"> Adding GANTT diagram functionality to mermaid </text> </svg>

关于 甘特图 语法，参考 <a href="https://mermaidjs.github.io/">这儿</a>,

UML 图表

可以使用UML图表进行渲染。 <a href="https://mermaidjs.github.io/">Mermaid</a>. 例如下面产生的一个序列图：:

<svg xmlns="http://www.w3.org/2000/svg" id="mermaid-svg-616op7WhCT3b3eZq" height="100%" width="100%" style="max-width:750px;" viewbox="-50 -10 750 460.5"> <g></g> <g> </line> <rect x="0" y="0" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect> <text x="75" y="32.5" dominant-baseline="central" alignment-baseline="central" class="actor" style="text-anchor: middle;"> <tspan x="75" dy="0"> 张三 </tspan> </text> </g> <g> </line> <rect x="200" y="0" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect> <text x="275" y="32.5" dominant-baseline="central" alignment-baseline="central" class="actor" style="text-anchor: middle;"> <tspan x="275" dy="0"> 李四 </tspan> </text> </g> <g> </line> <rect x="400" y="0" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect> <text x="475" y="32.5" dominant-baseline="central" alignment-baseline="central" class="actor" style="text-anchor: middle;"> <tspan x="475" dy="0"> 王五 </tspan> </text> </g> <defs> <marker id="arrowhead" refx="5" refy="2" markerwidth="6" markerheight="4" orient="auto">

</path> </marker> </defs> <defs> <marker id="crosshead" markerwidth="15" markerheight="8" orient="auto" refx="16" refy="4">

</path>

</path> </marker> </defs> <g> <text x="175" y="93" class="messageText" style="text-anchor: middle;"> 你好！李四, 最近怎么样? </text> </line> </g> <g> <text x="375" y="128" class="messageText" style="text-anchor: middle;"> 你最近怎么样，王五？ </text> </line> </g> <g> <text x="175" y="163" class="messageText" style="text-anchor: middle;"> 我很好，谢谢! </text> </line> </g> <g> <text x="375" y="198" class="messageText" style="text-anchor: middle;"> 我很好，谢谢! </text> </line> </g> <g> <rect x="500" y="215" fill="#EDF2AE" stroke="#666" width="150" height="79.5" rx="0" ry="0" class="note"></rect> <text x="516" y="244" fill="black" class="noteText"> <tspan x="516"> 李四想了很长时间, </tspan> <tspan dy="22" x="516"> 文字太长了 </tspan> <tspan dy="22" x="516"> 不适合放在一行. </tspan> </text> </g> <g> <text x="175" y="322.5" class="messageText" style="text-anchor: middle;"> 打量着王五... </text> </line> </g> <g> <text x="275" y="357.5" class="messageText" style="text-anchor: middle;"> 很好... 王五, 你怎么样? </text> </line> </g> <g> <rect x="0" y="384.5" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect> <text x="75" y="417" dominant-baseline="central" alignment-baseline="central" class="actor" style="text-anchor: middle;"> <tspan x="75" dy="0"> 张三 </tspan> </text> </g> <g> <rect x="200" y="384.5" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect> <text x="275" y="417" dominant-baseline="central" alignment-baseline="central" class="actor" style="text-anchor: middle;"> <tspan x="275" dy="0"> 李四 </tspan> </text> </g> <g> <rect x="400" y="384.5" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect> <text x="475" y="417" dominant-baseline="central" alignment-baseline="central" class="actor" style="text-anchor: middle;"> <tspan x="475" dy="0"> 王五 </tspan> </text> </g> </svg>

这将产生一个流程图。:

<svg xmlns="http://www.w3.org/2000/svg" id="mermaid-svg-13Vr6XATvBEbuEja" height="182" width="418.4000015258789" viewbox="0 0 438.4000015258789 202"> <g> <g class="output"> <g class="clusters"></g> <g class="edgePaths"> <g class="edgePath" style="opacity: 1;">

</path> <defs> <marker id="arrowhead249" viewbox="0 0 10 10" refx="9" refy="5" markerunits="strokeWidth" markerwidth="8" markerheight="6" orient="auto">

</path> </marker> </defs> </g> <g class="edgePath" style="opacity: 1;">

</path> <defs> <marker id="arrowhead250" viewbox="0 0 10 10" refx="9" refy="5" markerunits="strokeWidth" markerwidth="8" markerheight="6" orient="auto">

</path> </marker> </defs> </g> <g class="edgePath" style="opacity: 1;">

</path> <defs> <marker id="arrowhead251" viewbox="0 0 10 10" refx="9" refy="5" markerunits="strokeWidth" markerwidth="8" markerheight="6" orient="auto">

</path> </marker> </defs> </g> <g class="edgePath" style="opacity: 1;">

</path> <defs> <marker id="arrowhead252" viewbox="0 0 10 10" refx="9" refy="5" markerunits="strokeWidth" markerwidth="8" markerheight="6" orient="auto">

</path> </marker> </defs> </g> </g> <g class="edgeLabels"> <g class="edgeLabel" transform="translate(129,43)" style="opacity: 1;"> <g transform="translate(-16,-13)" class="label"> <foreignobject width="32" height="26"> 链接
</foreignobject> </g> </g> <g class="edgeLabel" transform="" style="opacity: 1;"> <g transform="translate(0,0)" class="label"> <foreignobject width="0" height="0">

</foreignobject> </g> </g> <g class="edgeLabel" transform="" style="opacity: 1;"> <g transform="translate(0,0)" class="label"> <foreignobject width="0" height="0">

</foreignobject> </g> </g> <g class="edgeLabel" transform="" style="opacity: 1;"> <g transform="translate(0,0)" class="label"> <foreignobject width="0" height="0">

</foreignobject> </g> </g> </g> <g class="nodes"> <g class="node" id="A" transform="translate(54,91)" style="opacity: 1;"> <rect rx="0" ry="0" x="-34" y="-23" width="68" height="46"></rect> <g class="label" transform="translate(0,0)"> <g transform="translate(-24,-13)"> <foreignobject width="48" height="26">
长方形
</foreignobject> </g> </g> </g> <g class="node" id="B" transform="translate(220,43)" style="opacity: 1;"> <circle x="-18" y="-23" r="23"></circle> <g class="label" transform="translate(0,0)"> <g transform="translate(-8,-13)"> <foreignobject width="16" height="26">
圆
</foreignobject> </g> </g> </g> <g class="node" id="C" transform="translate(220,139)" style="opacity: 1;"> <rect rx="5" ry="5" x="-50" y="-23" width="100" height="46"></rect> <g class="label" transform="translate(0,0)"> <g transform="translate(-40,-13)"> <foreignobject width="80" height="26">
圆角长方形
</foreignobject> </g> </g> </g> <g class="node" id="D" transform="translate(359.20000076293945,91)" style="opacity: 1;">

</polygon> <g class="label" transform="translate(0,0)"> <g transform="translate(-16,-13)"> <foreignobject width="32" height="26">
菱形
</foreignobject> </g> </g> </g> </g>

</g> </g> </svg>

关于 Mermaid 语法，参考 <a href="https://mermaidjs.github.io/">这儿</a>,

FLowchart流程图

我们依旧会支持flowchart的流程图：

<svg height="356.25" version="1.1" width="139" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative;" viewbox="0 0 139 356.25" preserveaspectratio="xMidYMid meet"> <desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"> Created with Raphaël 2.2.0 </desc> <defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"> <marker id="raphael-marker-endblock33-obj9ik0m" markerheight="3" markerwidth="3" orient="auto" refx="1.5" refy="1.5" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"> <use transform="rotate(180 1.5 1.5) scale(0.6,0.6)" stroke-width="1.6667" fill="black" stroke="none" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></use> </marker> <marker id="raphael-marker-endblock33-objbsclq" markerheight="3" markerwidth="3" orient="auto" refx="1.5" refy="1.5" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"> <use transform="rotate(180 1.5 1.5) scale(0.6,0.6)" stroke-width="1.6667" fill="black" stroke="none" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></use> </marker> <marker id="raphael-marker-endblock33-objviuft" markerheight="3" markerwidth="3" orient="auto" refx="1.5" refy="1.5" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"> <use transform="rotate(180 1.5 1.5) scale(0.6,0.6)" stroke-width="1.6667" fill="black" stroke="none" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></use> </marker> <marker id="raphael-marker-endblock33-objs4wpa" markerheight="3" markerwidth="3" orient="auto" refx="1.5" refy="1.5" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"> <use transform="rotate(180 1.5 1.5) scale(0.6,0.6)" stroke-width="1.6667" fill="black" stroke="none" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></use> </marker> </defs> <rect x="0" y="0" width="48" height="35.5" rx="20" ry="20" fill="#ffffff" stroke="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" stroke-width="2" class="flowchart" id="st" transform="matrix(1,0,0,1,34,13.25)"></rect> <text x="10" y="17.75" text-anchor="start" font-size="14px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: start; font-family: sans-serif; font-size: 14px; font-weight: normal;" id="stt" class="flowchartt" transform="matrix(1,0,0,1,34,13.25)" stroke-width="1"> <tspan dy="4.75" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"> 开始 </tspan> </text> <rect x="0" y="0" width="76" height="35.5" rx="0" ry="0" fill="#ffffff" stroke="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" stroke-width="2" class="flowchart" id="op" transform="matrix(1,0,0,1,20,112)"></rect> <text x="10" y="17.75" text-anchor="start" font-size="14px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: start; font-family: sans-serif; font-size: 14px; font-weight: normal;" id="opt" class="flowchartt" transform="matrix(1,0,0,1,20,112)" stroke-width="1"> <tspan dy="4.75" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"> 我的操作 </tspan> </text> </path> <text x="32" y="27" text-anchor="start" font-size="14px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: start; font-family: sans-serif; font-size: 14px; font-weight: normal;" id="condt" class="flowchartt" transform="matrix(1,0,0,1,4,201.5)" stroke-width="1"> <tspan dy="4.75" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"> 确认？ </tspan> </text> <rect x="0" y="0" width="48" height="35.5" rx="20" ry="20" fill="#ffffff" stroke="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" stroke-width="2" class="flowchart" id="e" transform="matrix(1,0,0,1,34,318.75)"></rect> <text x="10" y="17.75" text-anchor="start" font-size="14px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: start; font-family: sans-serif; font-size: 14px; font-weight: normal;" id="et" class="flowchartt" transform="matrix(1,0,0,1,34,318.75)" stroke-width="1"> <tspan dy="4.75" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"> 结束 </tspan> </text> </path> </path> </path> <text x="63" y="265.5" text-anchor="start" font-size="14px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: start; font-family: sans-serif; font-size: 14px; font-weight: normal;" stroke-width="1"> <tspan dy="4.75" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"> yes </tspan> </text> </path> <text x="117" y="218.5" text-anchor="start" font-size="14px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: start; font-family: sans-serif; font-size: 14px; font-weight: normal;" stroke-width="1"> <tspan dy="4.75" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"> no </tspan> </text> </svg>

关于 Flowchart流程图 语法，参考 <a href="http://adrai.github.io/flowchart.js/">这儿</a>.

导出与导入

导出

如果你想尝试使用此编辑器, 你可以在此篇文章任意编辑。当你完成了一篇文章的写作, 在上方工具栏找到 文章导出 ，生成一个.md文件或者.html文件进行本地保存。

导入

如果你想加载一篇你写过的.md文件，在上方工具栏可以选择导入功能进行对应扩展名的文件导入， 继续你的创作。

<hr class="footnotes-sep"> <section class="footnotes">

<a href="https://mermaidjs.github.io/">mermaid语法说明</a> <a href="#fnref1" class="footnote-backref">↩︎</a>

注脚的解释 <a href="#fnref2" class="footnote-backref">↩︎</a>

</section>

原文地址：https://blog.csdn.net/a417125111/article/details/101103664?ops_request_misc=&request_id=2b738d7fd40e442a82fd9ffe84137110&biz_id=&utm_medium=distribute.pc_search_result.none-task-blog-2~all~koosearch~default-18-101103664-null-null.142^v88^insert_down28v1,239^v2^insert_chatgpt&utm_term=markdown