Markdown 1 - 图文音视频等

AI工程仔

已于 2022-07-30 00:21:05 修改

阅读量276

点赞数

分类专栏：其它编程语言/框架文章标签： markdown

于 2022-07-29 23:45:29 首次发布

本文链接：https://blog.csdn.net/lovechris00/article/details/126065244

版权

其它编程语言/框架专栏收录该内容

61 篇文章 3 订阅

订阅专栏

Markdown 2 - Latex 数学
https://blog.csdn.net/lovechris00/article/details/122120691
Markdown 3 - 流程图表
https://blog.csdn.net/lovechris00/article/details/126065946

标题

类 Atx 形式

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

类 Setext

类 Setext 形式则是用底线的形式（不常用，了解即可）

利用 = （最高阶标题）和 - （第二阶标题），例如：

This is an H1
=============

This is an H2
-------------

任何数量的 = 和 - 都可以有效果。

快捷键

设置标题：Command + 1/2/3/4/5/6

去除标题：Command + 0

文本样式

*强调文本*

强调文本 强调文本

**加粗文本**

加粗文本

==标记文本==

标记文本

~~删除文本~~

~~删除文本~~

_斜体文本_

斜体文本

<u>带下划线文本</u>

带下划线文本

H~2~O is是液体。

H₂O is是液体。

2^10^ 运算结果是 1024。

2¹⁰ 运算结果是 1024。

分割线

可以在一行中用三个以上的星号、减号、底线来建立一个分隔线，行内不能有其他东西。
你也可以在星号或是减号中间插入空格。
下面每种写法都可以建立分隔线：

***

* * *

*****

- - -

----------

引用

> 引用文本

引用文本

嵌套

> 区块引用
> > 第一层嵌套
> > > 第二层嵌套

区块引用

第一层嵌套

第二层嵌套

区块和列表可以叠加使用

列表

* 第一项
    > 菜鸟教程
    > 学的不仅是技术更是梦想
* 第二项

无序列表

- 项目
  * 项目
    + 项目

效果：

项目
- 项目
  - 项目

* 第一项
* 第二项
* 第三项

+ 第一项
+ 第二项
+ 第三项


- 第一项
- 第二项
- 第三项

第一项
第二项
第三项

第一项
第二项
第三项

第一项
第二项
第三项

有序列表

1. 项目1
2. 项目2
3. 项目3

效果：

项目1
项目2
项目3

复选框

- [ ] 计划任务
- [x] 完成任务

效果：

计划任务
完成任务

链接

链接: [link](https://www.csdn.net/)

链接: link

自动链接

<http://example.com/>
<address@example.com>

http://example.com/
1625608596@qq.com

锚点

添加锚点,跳到本页指定位置

在预览状态下跳转，跳转时按住ctrl/cmd点击

<a href="#文本样式">点击跳转到文本样式</a>

点击跳转到文本样式

代码片

前后各使用三个` 为一行包起来。为了显示三个，可以用四个把他们包起来。

```
// A code block
var foo = 'bar';
```

// A code block
var foo = 'bar';

```javascript
// An highlighted block
var foo = 'bar';
```

// An highlighted block
var foo = 'bar';

表格

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

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

表格的对齐方式

-: 设置内容和标题栏居右对齐。
:- 设置内容和标题栏居左对齐。
:-: 设置内容和标题栏居中对齐。


| Column 1 | Column 2      |
|:--------:| -------------:|
| centered 文本居中 | right-aligned 文本居右 |

Column 1	Column 2
centered 文本居中	right-aligned 文本居右

注脚

一个具有注脚的文本。[^1]

一个具有注脚的文本。¹

效果会显示到文章的最后

[^1]: 注脚的解释

音频

<audio id="audio" controls="" preload="none">
<source id="mp3" src="/Users/shushu/Music/Music/Mika_Emily.mp3">
</audio>

效果如下
在这里插入图片描述

视频

这里放的是本地 mp4 地址
如果你有合适的网上视频源，也可以那个 url
显示尺寸为 320*180

<video src="/Users/xx/Movies/a.mp4" width="320" height="180"
controls="controls"></video>

图片

下面几种方式主要是 csdn 支持，其他编辑器不一定支持。
可以使用 html 的方式设置格式。

图片: ![Alt](https://i-blog.csdnimg.cn/blog_migrate/8f1b213356ed81d5a706d52c6ab7cb6d.png)

图片: Alt

带尺寸的图片: ![Alt](https://i-blog.csdnimg.cn/blog_migrate/8f1b213356ed81d5a706d52c6ab7cb6d.png =60x60)

带尺寸的图片: Alt

宽度确定高度等比例的图片: ![Alt](https://i-blog.csdnimg.cn/blog_migrate/8f1b213356ed81d5a706d52c6ab7cb6d.png =60x)

宽度确定高度等比例的图片: Alt

高度确定宽度等比例的图片: ![Alt](https://i-blog.csdnimg.cn/blog_migrate/8f1b213356ed81d5a706d52c6ab7cb6d.png =x60)

高度确定宽度等比例的图片: Alt

居中的图片: ![Alt](https://i-blog.csdnimg.cn/blog_migrate/8f1b213356ed81d5a706d52c6ab7cb6d.png#pic_center)

居中的图片: Alt

居中并且带尺寸的图片: ![Alt](https://i-blog.csdnimg.cn/blog_migrate/8f1b213356ed81d5a706d52c6ab7cb6d.png#pic_center =60x60)

居中并且带尺寸的图片: Alt

居右的图片: ![Alt](https://i-blog.csdnimg.cn/blog_migrate/8f1b213356ed81d5a706d52c6ab7cb6d.png#pic_right)

居右的图片: Alt

使用 base64 插入图片

![image][data:image/png;base64, ......]

当然 base64 编码一般很长，直接将编码放入段落内部会影响正常编辑。通常的做法是将 base64 编码定义到一个中间变量中，将编码本体放到文档末：

![image][tmp]
your document here ...

[tmp]:data:image/png;base64, ......

注脚的解释 ↩︎