Markdown 语言使用详细教程-md学习笔记

yeguichun
874 阅读7分钟

前言

作为一个开发者，通常需要撰写文档， 而Markdowm语法因为不需要关注复杂的排版和格式设置值而被广大开发者喜欢， 本篇将详细介绍markdown的使用。

Markdown介绍

  1. Markdown 是一种轻量级标记语言，通常用于简单文本格式和内容排版。
  2. 通过使用易读易写的纯文本格式， 可以快速的转换为HTML等格式， 用于撰写博客，论坛帖子，文档等，包括本篇介绍也是使用Markdown语法撰写。
  3. Markdown文档可以导出为各种格式， 如HTML、PDF、Word文档等， 下面目录将介绍导出常用方法。
  4. Markdown编写的后缀文档文档为.md, .markdown。

Markdown的优点

很多人看到语言就会联想到C语言、c++语言， 然后就想着为了写个文档总不能单独去学一门语言吧， 从而直接放弃。实则不然， Markdown 是一门非常简单的语言，甚至简单于word编写。 Markdown的优点包括：

  1. 简单易学： Markdown的语法简单直观， 易于学习和使用
  2. 纯文本：可在任何文本编辑器总编写， 跨平台兼容性强
  3. 快速： Markdown能快速的将内容转换为格式良好的文档
  4. 易读：Markdown文档即使未经渲染也很易读，对于版本控制系统如Git也友好
  5. 广泛支持：许多平台和工具支持Markdown， 如github、掘金。
  6. 丰富性：Markdown语法支持丰富的文本格式，如标题、列表、链接、图片等。
  7. 可扩展性：Markdown可以通过扩展语法实现更复杂的功能，如表格、脚注等。
  8. 输出格式多样性：Markdown可以轻松转换为多种格式， 如HTML、PDF等。

Markdown 语法介绍

标题

使用#标记不同级别的标题，随着#递增表示一级标题到六级标题，例如# 表示一级标题， ## 表示而二级标题， 依次类推。其中一级标题字体最大， 六级标题字体最小。语法及效果如下：

image.png

注意：

  1. 最后一个#字符与标题中间留一个空格。
  2. 标题应该在行首， 放在表格中会无法解析

段落

段落支持Markdown和HTML两种语法， 详细如下：

  1. Markdown语法： 使用空白行将多行文本分隔。
  2. HTML语法： 使用<p></p>标签分隔文本。

效果如下：

image.png

换行

md文档的换行方式有多种，支持Markdown语法和HTML语法， 详细如下：

  1. 在一行的末尾添加两个或者多个空格
  2. 采用HTML语法使用</br>标签换行
  3. 在行尾添加反斜杠('\')进行换行

效果如下:

image.png

字体

字体分为粗体和斜体，在文档中一般通过字体来强调起重要性。字体也支持Markdown和HTML语法。

  1. 斜体：
    Markdown语法：通过*或_来设置。
    HTML语法: 通过标签<strong></strong>设置。
  2. 粗体：
    Markdown语法：通过**或__来设置。
    HTML语法：通过标签<em></em>设置。
  3. 粗斜体：
    Markdown语法： 通过***、___ 或者__*文字*__、**_文字_**设置 HTML语法：通过<strong><em>文字<strong><em>设置

注意事项：

  1. 虽然字体设置方法有多种， 但Markdown 应用程序在处理单词或短语中间添加的下划线上并不一致， 所以为了兼容其他，请使用*去设置。
  2. 设置符与文字之间不需要留空格

效果如下：

image.png

引用

创建引用， 请在段落前加一个>。块引用中支持某些Markdown语法. 语法及效果如下：

image.png

列表

列表分为有序列表和无需列表， 支持Markdown语法和HTML语法

  1. 有序列表
    Markdown语法: 数据紧跟英文句点， 数字无需按顺序排列， 但是列表应当以数字 1 起始, 缩进一个或多个列表项可创建嵌套列表。
    HTML语法：<ol><li></li></ol>。
  2. 无序列表
    Markdown: 每个列表项前面添加破折号 -、星号 * 或加号 + ,缩进一个或多个列表项可创建嵌套列表。
    HTML语法：<ul><li></li></ul>

注意事项
为了保证兼容性， 当创建有序/无序列表时尽量使用Markdown语法。

语法与效果如下：

image.png

代码块

Markdown中代码块有两种：

  1. 一行内引用代码： 直接将也需要引用的部分包裹在反引号 (`) 中。如果你要表示为代码的单词或短语中包含一个或多个反引号，则可以通过将单词或短语包裹在双反引号(``)中。
  2. 代码块 如果需要将内容或者代码添加到一个代码块中，可以通过创建代码块来实现， 方法有两种。
    • 在需要引用内容的前一行和后一行使用三个反引号， 如果想在代码块中引入代码，则需要在前一个反引号后面西写入需要的语言， 例如js。
    • 将引用内容的每一行缩进至少四个空格或一个制表符。

语法与效果如下：

image.png

分割线

Markdown给出了多种分割线方法， 使用分割线可以是内容结构更加清晰。

  • 分割线的使用，可以在单独一行上使用三个或多个星号 (***)、破折号 (---) 或下划线 (___) ，并且不能包含其他内容。

语法及效果如下

image.png

链接

Markdown文档中添加链接， 可以直接使用户点击到对应的网址，体验更佳。添加链接的方式有两种：

  1. 超链接Markdown语法代码：[超链接显示名](超链接地址 "超链接title")， 其中title可选。
    • 例如：[Markdown](https://markdown.com.cn/ 'markdown标题')
  2. 使用尖括号把url变成可点击的链接。
    • 例如： <https://markdown.com.cn/>

语法及效果如下：

image.png

图片

Markdown文档中直接添加图片也是我们常用的方法， 这样会省去很多不必要的写入。 语法如下：\

  1. 添加展示图片: ![图片alt， 可选但中括号必须要有](图片链接 "图片title"), 图片title可选。
  2. 添加链接图片：将图像的Markdown 括在方括号中，然后将链接添加在圆括号中， 列如： [![图片](/assets/img/shiprock.jpg "Shiprock")](https://markdown.com.cn)

小知识
一般编辑器中可直接复制粘贴图片即可添加，偷懒却高效。

语法及效果如下：

image.png

删除线

Markdown文档中， 删除线效果是要在需要删除的文字前后添加两个~， 列如：

~~这一段删除了~~

效果如下： 这一段删除了

下划线

Markdown文档中， 下划线的效果类似HTML, 可通过标签<u></u>来实现。 列如 <u>这是一段下划线段落</u>, 但此方法只适用于个别编辑器， 请谨慎使用。

效果如下：

image.png

转义字符

对于Markdown中的一些语法符号， 前面加反斜杠(\)即可显示符号本身。具体可做转义的字符有哪些， 详情可查看官方文档Markdown可做转义的字符。 小编只在此列出其中最夯用的几个，例如

\\  
\+
\*
\_
\[]
等等

效果如下：

image.png

拓展
因为在md文档中， 一般都会支持HTML的写法， 所以对一些特殊的字符是会自动去转义， 比如&lt; 会转成<, &amp;会转成&。

表格

在Markdown中 虽少稍有使用表格的场景， 但是掌握表格的语法还是很有必要的。

表格使用|来分隔不同的单元格， 用-分隔表头和表体。

  • :-:: 将表头与单元格内容居中对齐。
  • :-: 将表头与单元格内容左对齐。
  • -:: 将表头与单元格内容右对齐。

语法及效果如下：

image.png

Markdown 扩展

Markdown 不仅仅只有一些常用的语法， 还有一些高级用法， 比如制作代办事项， 绘制流程图等， 如果感兴趣可到Markdown高级手册学习更多。

代办事项

- 未完成的任务：- [ ] 任务描述
- 完成的任务：- [x] 任务描述

例如

- [] 未完成作业  
- [x] 完成作业

LaTeX数学公式

Markdown支持使用LaTeX语法渲染数学公式，可以在文档中插入数学公式。 语法与效果如下：

image.png

其他妙等着大家去开发咯

Markdown 工具

支持Markdown的工具有很多，首推vs code、typora、博客、掘金、CSDN等等。 可以根据自己的习惯去选择适合自己的工具去编写文档。

总结

Markdown 确实是一款功能强大且实用的语言。 这篇文章不仅是对自己的巩固， 分享自己的经历， 也希望和大家一起学些更多的语法来填充自己的空白， 一起加油！！！

avatar
文章
阅读
粉丝