首页 最新 热门 推荐

  • 首页
  • 最新
  • 热门
  • 推荐

Markdown 语法(包括但不限于图片居中缩放脚注等)

  • 25-03-03 17:02
  • 2405
  • 13856
blog.csdn.net

文章目录

  • 0、演示代码
  • 1、添加目录
  • 2、文本样式
  • 3、标题
  • 4、区块引用
  • 5、列表
    • 5.1 有序列表
    • 5.2 无序列表
  • 6、代码区块
    • 6.1 行内代码
    • 6.2 代码块
  • 7、分割线
  • 8、链接
    • 8.1 行内式
    • 8.2 参考式
  • 9、复选框列表
  • 10、表格
  • 11、反斜杠转义符
  • 12、图片
    • 12.1 行内式
    • 12.2 链接式
  • 13、标注,注释,脚注
  • 14、居中
    • 14.1 文字设置居中
    • 14.2 图片设置居中、左对齐、右对齐
    • 14.3 图片设置对齐和缩放
    • 14.4 永久设置图片缩放大小
  • 15、数学表达式块
  • LAST、参考文献

0、演示代码

演示代码

1、添加目录

自定义目录标题,语法如下[toc]

2、文本样式

倾斜文本:*倾斜文本*,_倾斜文本_

加粗文本:**加粗文本** ,__加粗文本__

加粗倾斜文本:***加粗倾斜文本***

标记文本:==标记文本==

删除文本:~~删除文本~~

引用文本:> 引用文本

image-20201110150315488

3、标题

开头用#的数量表示1-6阶的标题,#结束之后需要加一个空格,结尾可以以任意数量#结尾(包括0个)

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

image-20201110150844376

4、区块引用

在每行前面使用>或者只在段落中第一行前加>

区块引用也可以嵌套,在嵌套的地方加多个> >就好
这里空行可以不加 >只要前后段落没有其他不加>的段落就不影响效果

> 数据结构
>
> > 树
> >
> > > 二叉树
> > >
> > > > 平衡二叉树
> > > >
> > > > > 满二叉树
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

image-20201110151136100

备注:引用的区块内也可以使用其他的 Markdown 语法,包括标题、列表、代码区块。

5、列表

5.1 有序列表

列表项前面是数字

有序用数字加英文. 数字是几无所谓的 生成的html代码是一样的

1. 一
2. 二
3. 三
  • 1
  • 2
  • 3

image-20201110162009654

5.2 无序列表

列表项前面是点,无序可用 * ,+, -

+ 无序列表
+ 无序列表
+ 无序列表
+ 无序列表
  • 1
  • 2
  • 3
  • 4

image-20201110161838841

6、代码区块

6.1 行内代码

使用单个`包裹代码即可

6.2 代码块

使用如下包裹代码即可

​```python
这是代码区块
​```
  • 1
  • 2
  • 3

代码区块中 markdown 语法不会转换

7、分割线

可以在一行用3个以上的 *,-,_来建立一条分割线,行内除了空格不能有其他东西,当然三条线效果是不同的,按顺序是很明显,不明显,一般。第二种不仔细看真看不到有线,我是换了暗色主题才看清。

8、链接

链接文字都是用 [方括号] 来标记。分为两种方式:

8.1 行内式

只要在方块括号后面紧接着圆括号并插入网址链接即可,如果你还想要加上链接的 title 文字,只要在网址后面,用双引号把 title 文字包起来即可,如:

[百度](www.baidu.com)
  • 1

百度

8.2 参考式

是在链接文字的括号后面再接上另一个方括号,而在第二个方括号里面要填入用以辨识链接的标记;接着,在文件的任意处,你可以把这个标记的链接内容定义出来:

[百度][链接1]
[链接1]: www.baidu.com  "链接标记(选择性添加)"
  • 1
  • 2

百度

链接内容定义的形式为:

  • 方括号(前面可以选择性地加上至多三个空格来缩进),里面输入链接文字
  • 接着一个冒号
  • 接着一个以上的空格或制表符
  • 接着链接的网址
  • 选择性地接着 title 内容,可以用单引号、双引号或是括弧包着( title 内容前需要加空格与网址隔开)

隐式链接标记

该功能让你可以省略指定链接标记,这种情形下,链接标记会视为等同于链接文字,要用隐式链接标记只要在链接文字后面加上一个空的方括号.
如果你要让 “Google” 链接到 google.com,你可以简化成:[Google co.][]
然后定义链接内容:[Google co.]: http://google.com/

效果如下:
Google co.

9、复选框列表

在列表符号后面加上[]或者[x]代表选中或者未选中情况,例如

+ [ ] 学习
+ [x] 发论文
  • 1
  • 2
  • 学习
  • 发论文

10、表格

表头1  | 表头2
------------- | -------------
Content Cell  | Content Cell
Content Cell  | Content Cell

| 表头1  | 表头2|
| ------------- | ------------- |
| Content Cell  | Content Cell  |
| Content Cell  | Content Cell  |

| 名字 | 描述          |
| ------------- | ----------- |
| Help      | Display the help window.|
| Close     | Closes a window     |

表格中也可以使用普通文本的删除线,斜体等效果

| 名字 | 描述          |
| ------------- | ----------- |
| Help      | ~~Display the~~ help window.|
| Close     | _Closes_ a window     |

表格可以指定对齐方式

| 左对齐 | 居中  | 右对齐 |
| :------------ |:---------------:| -----:|
| col 3 is      | some wordy text | $1600 |
| col 2 is      | centered        |   $12 |
| zebra stripes | are neat        |    $1 |
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
表头1表头2
Content CellContent Cell
Content CellContent Cell
表头1表头2
Content CellContent Cell
Content CellContent Cell
名字描述
HelpDisplay the help window.
CloseCloses a window

表格中也可以使用普通文本的删除线,斜体等效果

名字描述
HelpDisplay the help window.
CloseCloses a window

表格可以指定对齐方式

左对齐居中右对齐
col 3 issome wordy text$1600
col 2 iscentered$12
zebra stripesare neat$1

11、反斜杠转义符

反斜杠可以输出显示一些符号,支持的有

\   反斜线
`   反引号
*   星号
_   底线
{}  花括号
[]  方括号
()  括弧
#   井字号
+   加号
-   减号
.   英文句点
!   惊叹号
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

12、图片

12.1 行内式

行内式格式:! + [图片描述] + (路径 URL)

![图片描述](路径或者URL)

![image-20201110155239356](https://img1.iyenn.com/thumb02/c4a7c49ea7f8a7i3/22001715141877152632.jpeg)
  • 1
  • 2
  • 3

image-20201110155239356

12.2 链接式

链接式格式:! + [替代图片的文字,可空] + [参考id]
[参考id]: 路径 URL

![替代图片的文字,可空][参考id]
[参考id]: 路径 URL  "图片描述"

![image-20201110155239356][大象图片]
[大象图片]: https://img1.iyenn.com/thumb02/c4a7c49ea7f8a7i3/22001715141877152632.jpeg	"添加描述"
  • 1
  • 2
  • 3
  • 4
  • 5

image-20201110155239356

13、标注,注释,脚注

语法

哈哈哈[^注释]
[]中间加^添加脚注 然后点击出现的黑框  之后到最下面去编辑注释
[]中间加^加上英文冒号空格加上注释语句
哈哈[^注释]
[^注释]: haha  


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

哈哈哈1

image-20201110192833862

14、居中

14.1 文字设置居中

这是要居中的文本内容
或者
这是要居中的文本内容
  • 1
  • 2
  • 3

14.2 图片设置居中、左对齐、右对齐


或者
  • 1
  • 2
  • 3
  • 4
  • 5

14.3 图片设置对齐和缩放


或者
或者
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

14.4 永久设置图片缩放大小

之前一直苦恼于截图放进Typora里面之后显示过大。。。占好多地方

刚刚研究了一下,发现最简便的方法是修改你使用的Markdown主题的.css文件,在里面添加一个代码,让以后插入的所有图片都缩小50%(个人感觉50%刚好),就解决这个问题了

以我使用Github主题为例:

  1. 打开设置
  2. 点击“Open Theme Folder”
  3. 打开文件夹下的“github.css”文件
  4. 在文件最后添加以下代码后保存就行了

img { zoom: 50%; }

15、数学表达式块

输入两个美元符号,然后回车,就可以输入数学表达式块了。

$$a=b$$单行公式 
$a=b$行内公式
  • 1
  • 2

a = b a = b a=b

$ a = b $

LAST、参考文献

Markdown-图片设置(大小,居中)_quanwei的博客-CSDN博客_markdown 图片居中

markdown中插入图片怎么定义图片的大小或比例? - 知乎

使markdown文档中的图片居中_吴芒果的博客-CSDN博客

Typora怎么插入行内公式? - 知乎

如何让 Typora 插入图片居左对齐 | Forece Blog

如何让Markdown图片居中 - 简书

[MarkDown] markdown语法小结 - Wossoneri - 博客园博客园](https://www.cnblogs.com/rossoneri/p/4446440.html)


  1. haha ↩︎

文章知识点与官方知识档案匹配,可进一步学习相关知识
CS入门技能树MarkDown入门MarkDown介绍40155 人正在系统学习中
注:本文转载自blog.csdn.net的呆呆象呆呆的文章"https://blog.csdn.net/qq_41554005/article/details/109599364"。版权归原作者所有,此博客不拥有其著作权,亦不承担相应法律责任。如有侵权,请联系我们删除。
复制链接
复制链接
相关推荐
发表评论
登录后才能发表评论和回复 注册

/ 登录

评论记录:

未查询到任何数据!
回复评论:

分类栏目

后端 (14832) 前端 (14280) 移动开发 (3760) 编程语言 (3851) Java (3904) Python (3298) 人工智能 (10119) AIGC (2810) 大数据 (3499) 数据库 (3945) 数据结构与算法 (3757) 音视频 (2669) 云原生 (3145) 云平台 (2965) 前沿技术 (2993) 开源 (2160) 小程序 (2860) 运维 (2533) 服务器 (2698) 操作系统 (2325) 硬件开发 (2491) 嵌入式 (2955) 微软技术 (2769) 软件工程 (2056) 测试 (2865) 网络空间安全 (2948) 网络与通信 (2797) 用户体验设计 (2592) 学习和成长 (2593) 搜索 (2744) 开发工具 (7108) 游戏 (2829) HarmonyOS (2935) 区块链 (2782) 数学 (3112) 3C硬件 (2759) 资讯 (2909) Android (4709) iOS (1850) 代码人生 (3043) 阅读 (2841)

热门文章

101
推荐
关于我们 隐私政策 免责声明 联系我们
Copyright © 2020-2025 蚁人论坛 (iYenn.com) All Rights Reserved.
Scroll to Top