0x00 CSDN-MarkDown官方文档学习

    xiaoxiao2025-06-14  18

     从本节开始,我会介绍-MarkDown相关用法,让大家想要在写博客的可以得心应手,用一些骚操作写出漂亮的博客。

    文章目录

    1.标题显示2.快捷键3.标题样式4.链接与图片5.列表6.表格设定内容居中、居左、居右 SmartyPants列表 8.注脚注释 9.KaTeX数学公式10.甘特图11.UML 图表12.FLowchart流程图13. 导出与导入导出导入

     本文章是剖析-MarkDown官方文档。

    1.标题显示

    MarkDown编辑器(以下简称编辑器)最多支持6级标题

    直接输入1次#,并按下space后,将生成1级标题。 输入2次#,并按下space后,将生成2级标题。 以此类推,标题的使用有助于TOC语法生成一个完美的目录

    代码及效果如下

    # 一级标题 ## 二级标题 ### 三级标题 #### 四级标题 ##### 五级标题 ###### 六级标题 ####### 不支持7级级以后标题

    注意: # 前一定不能字符,空格不会影响。但#后一定要有一个空格,否则不会正常显示。 Ps: 上面的形如按键的白色小方块,可以用<kbd>按键名称</kbd>实现,例如

    <kbd>1</kbd> <kbd>2</kbd> <kbd>...</kbd>

    1 2 …

    2.快捷键

     个人不太喜欢用快捷键,因为记不住。。。   其实,在提供的编辑器上方会有工具栏,快捷键的功能都可以通过点击工具栏相应图标实现。 快捷键如下:  撤销:Ctrl/Command + Z  重做:Ctrl/Command + Y  加粗:Ctrl/Command + B  斜体:Ctrl/Command + I  标题:Ctrl/Command + Shift + H  无序列表:Ctrl/Command + Shift + U  有序列表:Ctrl/Command + Shift + O  检查列表:Ctrl/Command + Shift + C  插入代码:Ctrl/Command + Shift + K  插入链接:Ctrl/Command + Shift + L  插入图片:Ctrl/Command + Shift + G

    3.标题样式

    *强调文本* _强调文本_ **加粗文本** __加粗文本__ ==标记文本== ~~删除文本~~ > 引用文本 H~2~O is是液体。 2^10^ 运算结果是 1024.

     强调文本 强调文本

     加粗文本 加粗文本

     标记文本

     删除文本

    引用文本

     H2O is是液体。

     210 运算结果是 1024.

    Ps: 在MarkDown中,每行的首字符是无法显示tab和space 的,所以需要用一些特殊字符:

    ---  //Tab缩进 ---  //空格 ---<br/> //空行

    效果如下: —  //Tab缩进 —  //空格 — //空行

    4.链接与图片

    语法:

    链接: [link](https://mp.csdn.net). 图片: ![Alt](https://avatar.csdn.net/7/7/B/1_ralf_hx163com.jpg) 带尺寸的图片: ![Alt](https://avatar.csdn.net/7/7/B/1_ralf_hx163com.jpg =30x30) 居中的图片: ![Alt](https://avatar.csdn.net/7/7/B/1_ralf_hx163com.jpg#pic_center) 居中并且带尺寸的图片: ![Alt](https://avatar.csdn.net/7/7/B/1_ralf_hx163com.jpg#pic_center =30x30) 当然,我们为了让用户更加便捷,我们增加了图片拖拽功能。

    效果如下:

    链接: link.

    图片:

    带尺寸的图片:

    居中的图片:

    居中并且带尺寸的图片:

     实际上,更快捷的方法是直接图片拖拽或者Ctrl+V直接粘贴。  对于截图,推荐大家在qq后台运行时直接Ctrl+Alt+V拖拽截图后,用Ctrl+C复制,Ctrl+V粘贴到编辑器位置。  当然,对于图片的排版你还是需要用到上面实例代码中的语法,此操作只是让插入图片变简单了而已。

    以下代码是摘自官方给出的文档,其实大部分功能对于IT博客来说不常用,这里我就比细说了,大家可以有选择的学习

    5.列表

    - 项目 - 项目 - 项目 1. 项目1 2. 项目2 3. 项目3 - [ ] 计划任务 - [x] 完成任务 项目 项目 项目 项目1项目2项目3 计划任务 完成任务

    6.表格

    项目 | Value -------- | ----- 电脑 | $1600 手机 | $12 导管 | $1 项目Value电脑$1600手机$12导管$1

    设定内容居中、居左、居右

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

    第一列第二列第三列第一列文本居中第二列文本居右第三列文本居左

    SmartyPants

    SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如: | TYPE |ASCII |HTML |----------------|-------------------------------|-----------------------------| |Single backticks|`'Isn't this fun?'` |'Isn't this fun?' | |Quotes |`"Isn't this fun?"` |"Isn't this fun?" | |Dashes |`-- is en-dash, --- is em-dash`|-- is en-dash, --- is em-dash|

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

    TYPEASCIIHTMLSingle backticks'Isn't this fun?'‘Isn’t this fun?’Quotes"Isn't this fun?"“Isn’t this fun?”Dashes-- is en-dash, --- is em-dash– is en-dash, — is em-dash

    列表

    Markdown : Text-to-HTML conversion tool Authors : John : Luke Markdown Text-to- HTML conversion tool Authors John Luke

    8.注脚

    一个具有注脚的文本。[^2] [^2]: 注脚的解释

    一个具有注脚的文本。1

    注释

    Markdown将文本转换为 HTML。 *[HTML]: 超文本标记语言

    Markdown将文本转换为 HTML。

    9.KaTeX数学公式

    可以使用渲染LaTeX数学表达式 [KaTeX](https://khan.github.io/KaTeX/): Gamma公式展示 $\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$ 是通过欧拉积分 $$ \Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,. $$ > 你可以找到更多关于的信息 **LaTeX** 数学表达式[here][1].

    可以使用渲染LaTeX数学表达式 KaTeX:

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

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

    你可以找到更多关于的信息 LaTeX 数学表达式here.

    10.甘特图

     由于符号冲突,这里的源码就不给大家了。

    Mon 06 Mon 13 Mon 20 已完成 进行中 计划一 计划二 现有任务 Adding GANTT diagram functionality to mermaid 关于 甘特图 语法,参考 这儿,

    11.UML 图表

     由于符号冲突,这里的源码就不给大家了。

    可以使用UML图表进行渲染。 Mermaid. 例如下面产生的一个序列图::

    张三 李四 王五 你好!李四, 最近怎么样? 你最近怎么样,王五? 我很好,谢谢! 我很好,谢谢! 李四想了很长时间, 文字太长了 不适合放在一行. 打量着王五... 很好... 王五, 你怎么样? 张三 李四 王五

    这将产生一个流程图。:

    链接 长方形 圆 圆角长方形 菱形 关于 Mermaid 语法,参考 这儿,

    12.FLowchart流程图

     由于符号冲突,这里的源码就不给大家了。

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

    Created with Raphaël 2.2.0 开始 我的操作 确认? 结束 yes no 关于 Flowchart流程图 语法,参考 这儿.

    13. 导出与导入

    导出

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

    导入

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

     ***博主整理不易,若有转载请联系我并标注出处,谢谢合作***


    注脚的解释 ↩︎

    最新回复(0)