markdown 学习指南

定义

使用纯文本格式编写,再转化为结构上有效的xhtml或html

为什么

使用场景

Markdown文件工作原理

文本编辑器/专用应用软件,文件应具有 .md或 .Markdown 文件后缀名。应用程序打开。转化格式,在浏览器中查看或者应用程序中转换格式

基本语法

1.分级标题

标题前加#,第几级标题就加几个#号

2.段落

段落间存在空行

3.换行符

以两个 或 多个空格结束一行,然后键入 return。

<br>换行前有>=2个空格

4.字体设置

符号不带空格 但是如果vs code没识别 就加上空格试试看

以下字体设置最好选择*来表示,不然容易出现兼容性问题

4.1加粗

前后添加两个星号 或 下划线,

4.2斜体

前后添加一个星号 或 下划线

4.3删除线

用一对双飘号~~包裹内容,或者使用快捷键 Shift+Alt+5

4.4.下划线

用一对 u 标签<u>包裹内容,或者使用快捷键 Ctrl+U(注意,部分 Markdown 编辑器可能不支持)

4.5文字高亮

用一对双等号==包裹内容(注意,部分 Markdown 编辑器可能不支持)

4.6字体、色号、颜色

5.外链接

查看[新闻联播](网页链接)

效果:查看新闻链接

点击新闻链接即可跳转

5.1格式化链接

要强调链接,请在方括号 和 圆括号前后添加星号。

要将链接表示为 code,请在括号 中 添加反引号 ` 包裹,在1的左边。(<#链接>)

用html实现就是<code>标签对,直接显示代码

6.插入图像(直接显示图像)

插入图像的语法:![描述](图片链接地址)

或者用html

7.链接图像

点击图片即可跳转链接

!\[图片描述\](图片链接地址)\](跳转链接) ![](https://i-blog.csdnimg.cn/direct/0860a86d8103475ea89eaf281242e970.png) ### 8.块引用 请在段落前添加一个 `>` 效果 ![](https://i-blog.csdnimg.cn/direct/b3a9d03793f34f0a8546df16a9bfdd37.png) #### 8.1多个段落 再段落间的空白行加上\>即可,空白行不显示 ![](https://i-blog.csdnimg.cn/direct/7ed3e593c0eb4c6b9076317e93b76194.png) #### 8.2嵌套使用 在要嵌套的段落前面添加两个 `>>` #### 8.3带其他元素的块引用 有些不支持,试试就可以试出来,在\>后即可 ### 9.有序列表 * 在每一行的前面加上一个数字和一个点号(`.`),然后跟一个空格,在内容之前 ### 10.无序列表 行项目前添加破折号 `-` 星号 `*` 或 加号 `+,` `嵌套进行缩进即可` ### 11.分割线 在一行上单独使用三个 或 更多星号 `***`、破折号`---` 或 下划线 `___` 效果如图 ![](https://i-blog.csdnimg.cn/direct/09a21ef081914397ba61cd2a231076cb.png) ### 12.代码块 代码行:单行就单对反引号包裹, 代码块:使用三个反引号 \`\`\` 将代码块包裹起来,并可以在反引号后指定代码的语言(可选) 语法格式 ![](https://i-blog.csdnimg.cn/direct/ee309aff05d543f3a039e7f67df02f58.png) ## 进阶语法 ### 1.显示特殊符号 前加一个 / , 可使用反斜杠来显示的符号 ![](https://i-blog.csdnimg.cn/direct/80200f6e83e240e2886ba25c97425507.png) ### 2.表格 ![](https://i-blog.csdnimg.cn/direct/35699722cb264f649cc9450ed1da94a3.png) #### 2.1基础表格 ![](https://i-blog.csdnimg.cn/direct/5d0161c1c9c54c679b473c686cf7ea50.png) 对齐就看分割线的冒号位置,左侧就左对齐,以此类推 #### 2.2合并单元格 需要借助html标签,和html5中的表格类似 ### 3.脚注 (添加解释/引用有效信息) 格式,这里的"标识符"可以是数字、单词或短语,只要在整个文档中保持唯一即可。 ![](https://i-blog.csdnimg.cn/direct/71dc8e3b6a714509baa9d3f929e2a62c.png) ### 4.上标 **^** 需要的字符包裹 **^**`符号,或者标签对包裹,呈现平方的角标效果` ### 5.下标 \~ \~包裹字符,呈现化学式下角标 ### 6.任务列表 语法,属于无序,但有\[ \]表示任务状态 ![](https://i-blog.csdnimg.cn/direct/ad66d32368fb4299a04358a924d0b613.png) ### 7.锚点 点击即可跳转 Markdown 锚点允许在文档内部创建链接,指向同一个页面上的特定部分 #### 语法 定义锚点;使用\标签,并设置一个唯一的id属性 ![](https://i-blog.csdnimg.cn/direct/8466e23c69334a3485b731100338bd66.png) 再引用:在链接文本前加上`#`符号和锚点的 ID ![](https://i-blog.csdnimg.cn/direct/76fbbb318767468e87241ec22e4e42f2.png) ps:如果不需要显示 a 标签中的内容,可以直接去掉,放一个空链接即可 ### 8.内容目录 在支持toc语法的解析器中,在标题后的第1/2行添加 `[TOC],接口对于生成目录`

相关推荐
crary,记忆1 小时前
Angular微前端架构:Module Federation + ngx-build-plus (Webpack)
前端·webpack·angular·angular.js
漂流瓶jz1 小时前
让数据"流动"起来!Node.js实现流式渲染/流式传输与背后的HTTP原理
前端·javascript·node.js
SamHou02 小时前
手把手 CSS 盒子模型——从零开始的奶奶级 Web 开发教程2
前端·css·web
我不吃饼干2 小时前
从 Vue3 源码中了解你所不知道的 never
前端·typescript
开航母的李大2 小时前
【中间件】Web服务、消息队列、缓存与微服务治理:Nginx、Kafka、Redis、Nacos 详解
前端·redis·nginx·缓存·微服务·kafka
Bruk.Liu2 小时前
《Minio 分片上传实现(基于Spring Boot)》
前端·spring boot·minio
鱼樱前端2 小时前
Vue3+d3-cloud+d3-scale+d3-scale-chromatic实现词云组件
前端·javascript·vue.js
zhangxingchao3 小时前
Flutter入门:Flutter开发必备Dart基础
前端
佚名猫3 小时前
vue3+vite+pnpm项目 使用monaco-editor常见问题
前端·vue3·vite·monacoeditor
满分观测网友z3 小时前
vue的<router-link>的to里面的query和params的区别
前端·javascript·vue.js