Markdown学习之路

    技术2022-07-11  67

    Markdown学习之路

    目录

    前言 推荐的教程 markdown语法总结

    标题及正文字体转义字符分割线列表区块引用代码框图片插入链接表格数学公式流程图脚注缩略Markdown-preview-enhanced插件的扩展语法

    遇到过的问题

    Markdown实现空格Markdown实现目录页面跳转Markdown表格内换行


    前言

      本文目的在于记录自己的Markdown学习之路,文中推荐了自己比较喜欢的教程,以及自己总结整理的Markdown语法,最后提及了自己在用Markdown时遇到的问题及其解决的方法。   如果有较好的教程,或者值得记录的问题,欢迎在评论区留言,我会视情况不定时更新该文章。


    推荐的教程

    菜鸟教程——Markdown语法Atom + markdown-preview-plus 编辑器


    markdown语法总结

    1、标题及正文

    (1)方式一

    用#可以表示1~6级标题

    # 一级标题(1) ## 二级标题 ### 三级标题 #### 四级标题 ##### 五级标题 ###### 六级标题 ####### 正文:标题最大到六级,没有七级

    效果如下所示:

    一级标题(1)

    二级标题

    三级标题

    四级标题

    五级标题
    六级标题

    ####### 正文:标题最大到六级,没有七级

    (2)方式二

    用-或=可以分别表示1~2级标题

    一级标题(2) = 二级标题 -

    效果如下所示:

    一级标题(2)

    二级标题

    方式一共有l六级,注意‘#’后有空格方式二只有两级,且‘-’或‘=’的个数均大于等于一即可


    2、字体

    *字体倾斜* _字体倾斜_ **字体加粗** __字体加粗__ ~~删除线~~ ==高亮== x^2^(上标) H~2~O(下标)

    效果: 字体倾斜 字体倾斜 字体加粗 字体加粗 删除线 高亮 x2(上标) H2O(下标)

    注意不可以在*或_后边加空格


    3、转义字符

    在字符前加\进行转义

    \\ \*

    效果: \ *

    均为’'反斜杠加要转义的符号


    4、分割线

    分割线可以分别由*、-或_这3种符号的至少3个符号表示,注意至少要3个,且不需要连续,有空格也可以。

    *** ***** --- - - - ___

    效果:







    5、列表

    (1)无序列表

    通过*、+或+后跟空格实现无序列表,同时可在开头加Tab实现子列表

    * 列表1 - 列表2 + 子列表2.1 - 子列表2.2 + 列表3

    效果:

    列表1 列表2 子列表2.1 子列表2.2 列表3

    (2)有序列表

    通过数字+.+空格实现有序列表,同时也可在开头加Tab实现子列表

    1. 列表1,注意“.”为英文的,且后边有一个空格。乱打凑字数 2. 列表2 3. 子列表2.1 4. 子列表2.2 5. 列表3

    效果:

    列表1,注意“.”为英文的,且后边有一个空格。列表2 子列表2.1子列表2.2 列表3

    特别注意,有序列表的序号是根据第一行列表的数字顺序来的,比如说:

    3. 列表3 2. 列表2 9. 列表9

    效果:

    列表3列表2列表9

    (3)任务列表

    - [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

    效果:

    @mentions, #refs, links, formatting, and tags supported list syntax required (any unordered or ordered list supported) this is a complete item this is an incomplete item


    6、区块引用

    >“>”后可以不加空格,但为了规范建议加上 回车后另起一行不必在前面再加“>” 不再采用区块引用时需要隔一行

    效果:

    “>”后可以不加空格,但为了规范建议加上 回车后另起一行不必在前面再加“>”

    不再采用区块引用时需要隔一行

    引用可嵌套使用 > A >> B >>> C >>>> D

    效果:

    A

    B

    C

    D

    区块引用可以其他语法复合使用 > ## 标题 此时换行便不再区块引用 > * 无序列表 > >空四个或使用Tab进行缩进

    效果:

    标题

    此时换行便不再区块引用

    无序列表

    空四个或使用Tab进行缩进


    7、代码框

    (1)单行代码

    ` 单行用一对反单引号 ` 或者在每行输入前tab两次(四个空格),该行将自动识别为代码

    效果:

    单行用一对反单引号

    (2)多行代码

    ``` 多行用三个或以上个数的反单引号 或者在每行输入前tab两次(四个空格),这几行将自动识别为代码 ``` 也可以在```后加上代码类型以指定代码语言,如下所示: ```javascript $(document).ready(function () { alert('RUNOOB'); }); ```

    效果:

    多行用三个或以上个数的反单引号 或者在每行输入前tab两次(四个空格),这几行将自动识别为代码

    也可以在```后加上代码类型以指定代码语言,如下所示:

    $(document).ready(function () { alert('RUNOOB'); });


    8、图片插入

    格式:![图片描述](图片地址) 示例:![在这里插入图片描述](https://img-blog.csdnimg.cn/20200702182735822.png)

    效果:  


    9、链接

    (1)文字链接

    行内式

    与图片插入的区别在于没有!

    [百度](http://www.baidu.com)一下,你就知道 [百度](http://www.baidu.com)百科

    效果:

    百度一下,你就知道 百度百科

    参数式
    [百度]: http://www.baidu.com 这是[百度] 这是[][2] 这是[淘宝] [2]: https://www.csdn.net/ [淘宝]: https://www.taobao.com/?spm=a2e15.8261149.1581860521.1.202329b4PRb9LR

    效果:

    这是百度 这是 这是淘宝

    直接使用网址
    <http://www.baidu.com>

    效果: http://www.baidu.com

    (2)图片链接

    [![在这里插入图片描述](https://img-blog.csdnimg.cn/20200702182735822.png)](https://www.baidu.com/)

    效果:点击可跳转到百度


    10、表格

    | name | age | sex | |--|:--|--:| | tony | 20 | 男 | | lucy | 18 | 女 |

    效果:

    nameagesextony20男lucy18女

    不同的编辑器可能存在跟更多的表格格式


    11、数学公式

    使用两个美元符 $$ 包裹 TeX 或 LaTeX 格式的数学公式来实现

    TeX,LaTeX和KaTeX简介KaTeX数学公式语法

    12、流程图

    ```mermaid graph LR A[方形] -->B(圆角) B --> C{条件a} C -->|a=1| D[结果1] C -->|a=2| E[结果2] F[横向流程图] ```

    效果:

    a=1 a=2 方形 圆角 条件a 结果1 结果2 横向流程图

    详细见教程:https://www.runoob.com/markdown/md-advance.html


    13脚注

    Content [^1] [^1]: Hi! This is a footnote

    效果: Content 1


    14、缩略

    *[HTML]: Hyper Text Markup Language *[W3C]: World Wide Web Consortium The HTML specification is maintained by the W3C.

    效果:

    The HTML specification is maintained by the W3C.


    13、Markdown-preview-enhanced插件的扩展语法

    Markdown-preview-enhanced


    遇到过的问题

    1、Markdown实现空格:

    markdown空格缩进以及HTML空格实体

    2、Markdown实现目录页面跳转:

    详细的跳转教程简洁的跳转教程 建议使用: 锚点: <div id="锚点">主题内容1</div> 跳转:[主题内容2](#锚点)

    【注】:id可以任意定义;主题内容1与主题内容2可以相同也可不同

    3、Markdown表格内换行:

    表格换行

    Hi! This is a footnote ↩︎

    Processed: 0.011, SQL: 9