使用typehco写文章的人都知道Markdown是什么。
Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档。
Markdown 语言在 2004 由约翰·格鲁伯(英语:John Gruber)创建。
Markdown 编写的文档可以导出 HTML 、Word、图像、PDF、Epub 等多种格式的文档。
Markdown 编写的文档后缀为 .md, .markdown。
原生的Markdown语法只包含了一些简单的语法,例如:标题、段落格式、列表、区块、代码、链接、图片、表格等。

Markdown是纯文本格式编写,和HTML语言一样,使用一些简单的符合就可以代替样式,相比于HTML语言它跟简单,我们只需要专注文字的内容而不是排版样式。
因为是纯文本内容可以轻松的导出 HTML、PDF 和本身的 .md 文件,兼容所有的文本编辑器与字处理软件。
相比与其他纯文本编写例如word,markdown不如word一样可以花里胡哨的设置一些格式。
原始的Markdown支持的格式有限,它的扩展兼容性也是个问题。
对于初学者来说需要记住一些简单的语法

1.标题

Markdown的标题就类似HTML语言中的<h1~h6></h1~h6>,只不过Markdown的写法更加简单。
Markdown 标题有两种格式。

1.1使用 = 和 - 标记一级和二级标题

利用 = (最高阶标题)和 - (第二阶标题),例如:

代码

111111
==
2222
--

1.2使用 # 号标记1-6 级标题

一个#是一级标题,二个#是二级标题,以此类推。因为由Markdown处理器产生HTML所以解析时候和HTML一样直到六级标题。

代码

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

2.段落格式

2.1换行

Markdown 段落没有特殊的格式,直接编写文字就好,段落的换行是使用两个以上空格加上回车。

代码

第一行内容
第二行内容

当然也可以在段落后面使用一个空行来表示重新开始一个段落。

代码

第一行内容
第二行内容

2.2字体

Markdown 可以使用以下几种字体:

代码

*斜体文本*
_斜体文本_
**粗体文本**
__粗体文本__
***粗斜体文本***
___粗斜体文本___

效果示例如下:
斜体文本
斜体文本
粗体文本
粗体文本
粗斜体文本
粗斜体文本

2.3分割线

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

代码

***
* * *
*****
- - -
----------

效果示例如下:






2.4删除线

如果段落上的文字要添加删除线,只需要在文字的两端加上两个波浪线 ~~ 即可。

代码

正常文字显示
~~删除线文字显示~~

效果示例如下:
正常文字显示
删除线文字显示

3.列表

Markdown 支持有序列表和无序列表。

3.1有序列表

有序列表使用数字并加上 . 号来表示

代码

1. 第一项
2. 第二项
3. 第三项

  1. 第一项
  2. 第二项
  3. 第三项

3.2无序列表

无序列表使用星号(*)、加号(+)或是减号(-)作为列表标记,这些标记后面要添加一个空格,然后再填写内容

代码

- 列表内容
+ 列表内容
* 列表内容

  • 列表内容
  • 列表内容
  • 列表内容

3.3列表嵌套

列表嵌套只需在子列表中的选项前面添加四个空格即可

代码

1. 第一项:
    - 第一项嵌套的第一个元素
    - 第一项嵌套的第二个元素
2. 第二项:
    - 第二项嵌套的第一个元素
    - 第二项嵌套的第二个元素

  1. 第一项:

    • 第一项嵌套的第一个元素
    • 第一项嵌套的第二个元素
  2. 第二项:

    • 第二项嵌套的第一个元素
    • 第二项嵌套的第二个元素

4.区块

Markdown 区块引用是在段落开头使用 > 符号 ,然后后面紧跟一个空格符号,另外区块是可以嵌套的,一个 > 符号是最外层,两个 > 符号是第一层嵌套,以此类推。

4.1区块嵌套

代码

> 最外层
> > 第一层嵌套
> > > 第二层嵌套

最外层

第一层嵌套

第二层嵌套

4.2区块中使用列表

区块中也是可以使用列表的

代码

> 区块中使用列表
> 1. 第一项
> 2. 第二项
> + 第一项
> + 第二项
> + 第三项

区块中使用列表

  1. 第一项
  2. 第二项
  3. 第一项
  4. 第二项
  5. 第三项

4.3列表中使用区块

如果要在列表项目内放进区块,那么就需要在 > 前添加四个空格的缩进。

代码

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

  • 第一项

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

5.代码块

使用反引号进行包裹即可。如果是段落上的一个函数或片段的代码可以用反引号把它包起来(

代码

`printf()` 函数

printf() 函数

代码区块使用 4 个空格或者一个制表符(Tab 键)。

代码

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>test</title>
    <style>
        .container {
            width: 60%;
            margin: 10% auto 0;
            background-color: #f0f0f0;
            padding: 2% 5%;
            border-radius: 10px
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>恭喜, 你找到了隐藏页面!!</h1>
        <h1>test~</h1>
    </div>
</body>
</html>

你也可以用 ` 包裹一段代码,并指定一种语言(也可以不指定)

代码

<div class="container">
    <h1>恭喜, 你找到了隐藏页面!!</h1>
    <h1>test~</h1>
</div>

6.链接

6.1普通链接

代码

[链接名称](链接地址)
或者
<链接地址>
使用如下:
这是一个链接 [Markdown使用方法](https://kouketsu.top/index.php/archives/1/)

效果如下:这是一个链接 Markdown使用方法

6.2高级链接

通过变量来设置一个链接,变量赋值在文档末尾。

代码

这个链接用 1 作为网址变量 [home][2]
这个链接用 Markdown作为网址变量 [markdown][Markdown]
然后在文档的结尾为变量赋值(网址)

  [1]: https://kouketsu.top/
  [Markdown]https://kouketsu.top/index.php/archives/1/

这个链接用 1 作为网址变量 Home
这个链接用 markdown 作为网址变量 Markdown
然后在文档的结尾为变量赋值(网址)

7.图片

添加图片、引用图片和链接的唯一区别就是在最前方添加一个感叹号!

代码

![alt 属性文本](图片地址)
![alt 属性文本](图片地址 "可选标题")

  • 开头一个感叹号 !
  • 接着一个方括号,里面放上图片的替代文字
  • 接着一个普通括号,里面放上图片的网址,最后还可以用引号包住并加上选择性的 'title' 属性的文字。

当然,你也可以像网址那样对图片网址使用变量:

代码

这个链接用 1 作为图片变量 [testimage][4].
[1]: https://kouketsu.top/src/assets/images/logo_preview.png

这个链接用 1 作为图片变量 testimage.
Markdown 还没有办法指定图片的高度与宽度,如果你需要的话,你可以使用普通的 img 标签。

代码

<img src="https://kouketsu.top/src/assets/images/logo_preview.png" width="50%">

8.表格

Markdown 制作表格使用 | 来分隔不同的单元格,使用 - 来分隔表头和其他行。

代码

|  表头   | 表头  |
|  ----  | ----  |
| 单元格  | 单元格 |
| 单元格  | 单元格 |

表头表头
单元格单元格
单元格单元格

设置表格的对齐方式:

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

代码

| 左对齐 | 右对齐 | 居中对齐 |
| :-----| ----: | :----: |
| 单元格 | 单元格 | 单元格 |
| 单元格 | 单元格 | 单元格 |

左对齐右对齐居中对齐
单元格单元格单元格
单元格单元格单元格

9.时间线

timeline 属性列表:

  • type:可选项,默认为small, 可选值:

    • small 小巧款式的时间线
    • large 大款式的时间线
  • 对于 large样式的时间线,提供时间线开始和结束的一个文字自定义:

    • start:一些简单的文字
    • end:一些简单的文字
  • 对于 large样式的时间线,提供时间线开始和结束的一个文字自定义:

    • start:一些简单的文字
    • end:一些简单的文字

    item 属性列表:

  • date :可选项,默认不显示时间,可选值:

    • 一个日期文字,实际上可以填写任何类型文字(不要太长)
  • 对于 large样式的时间线,提供时间线开始和结束的一个文字自定义:

    • start:一些简单的文字
    • end:一些简单的文字
  • color:可选项,设置当前时间线条的颜色,可选值:"light", "info", "dark", "success", "black", "warning", "primary", "danger"

代码

[timeline title="2020大事记" type="small" start="梦开始的地方" end="新的一年开始"]
[item date="2020-1-20"] 武汉封城,疫情让一起变得慌乱起来 [/item]
[item date="2020-3-20"] 开始远程办公,慢慢有序起来[/item]
[item]生活变得好起来了[/item]
[item date="2020-10-1"] 国庆节去哈尔滨旅行,和老同学见面[/item]
[/timeline]

2020大事记
2020-1-20

武汉封城,疫情让一起变得慌乱起来

2020-3-20

开始远程办公,慢慢有序起来

生活变得好起来了
2020-10-1

国庆节去哈尔滨旅行,和老同学见面

10.计划表

计划表中包含了三种类型的任务:

  • check类型,该类型任务只有两种状态,完成和未完成
  • progress,该类型任务可以显示任务执行的进度,需要手动填写进度
  • start、end,该类型任务设置一个起始时间和终止时间,进度会根据当前时间自动更新进度
  • 时间格式:必须是正确的时间格式,比如2021-01-02 12:00 ,也可以只写日期2021-01-02

代码

[goal title="2021的小目标"]
[item check="true"] 每天早睡 [/item]
[item check="false"] 每天早起 [/item]
[item progress="50%"] 阅读10本书 [/item]
[item start="2021-01-02" end="2021-10-1"] 每天锻炼30分钟 [/item]
[/goal]

2021的小目标

阅读10本书 :

50%

每天锻炼30分钟 :

448%

11.视频

11.1不能全屏

代码

<iframe align="center" width="100%" height="500px" src="https://bili.sangxuesheng.com/player/?url=(视频链接)"frameborder="no" border="0"  scrolling="no"marginwidth="0" marginheight="0" ></iframe>

11.2可以全屏

代码

<iframe src="//player.bilibili.com/player.html?aid=925322101&bvid=BV19T4y1G7j5&cid=178955548&page=1" allowfullscreen="allowfullscreen" mozallowfullscreen="mozallowfullscreen" msallowfullscreen="msallowfullscreen" oallowfullscreen="oallowfullscreen" webkitallowfullscreen="webkitallowfullscreen" width="100%" height="500px" frameborder="0"></iframe>

11.3插入本地资源的视频

代码

[vplayer url="http://xxx.com/xxx.mp4" pic="http://xxx.com/xxx.png"]

11.4插入第三方云解析视频

  • vplayer 属性:

    • status:可选,true 表示不折叠,默认折叠
  • vplayer 内部每个video 代表一个需要等待解析的视频,video的属性见下:

    • url:第三方视频平台的页面地址,具体支持哪些平台需要看你使用的第三方解析接口支持情况
    • title: 视频的标题
  • 默认使用的第三方云解析视频地址 https://okjx.cc/?url=,支持b站、爱奇艺、优酷等常见平台

代码

[vplayer status="true"]
[Video url="(视频链接)" title="" /]
[Video url="(视频链接)" title="" /]
[/vplayer]

12.卡片

12.1链接卡片

代码

[link]
[item name="百度一些" link="http://baidu.com" desc="百度一下你就知道" /]
[item name="网站名称" link="链接" desc="一些链接描述" pic="图片地址" /]
[/link]

13.相册与图集

相册与图集的区别是:

  • 相册样式是固定一行N个,N会根据屏幕尺寸调整
  • 图集会自动将图集内部的所有图片显示在一行中(如果图片太多,需要分成多个图集),并且大小会自动调整

相册代码

[album]
[普通的图片插入,支持markdown语法和html语法,混合也可以]
[/album]

图集代码

[album type="photos"]
[普通的图片插入,支持markdown语法和html语法,混合也可以]
[/album]

14.内容加密

14.1部分内容回复可见

代码

此处内容需要评论回复后(审核通过)方可阅读。

此处内容需要评论回复后(审核通过)方可阅读。

14.2部分内容登录可见

代码

该部分仅登录用户可见

该部分仅登录用户可见

15.收缩框

代码

【collapse title="标题" status="false"】一些文字内容【/collapse】
其中status为false 表示默认不显示文字内容,为true表示默认显示内容。
不写status 属性,默认是展开内容的。
注:【】修改为[]才可以使用

15.选项卡

代码

【tabs】
【tab name="标签页 1" active="true" color:"#000" font-weight="bold"】内容 1【/tab】
【tab name="标签页 2"]内容 2【/tab】
【/tabs】
注:【】修改为[]才可以使用

  • 每个tab 都必须包括name属性,只能有一个tab 添加active属性,表示默认显示该tab的内容。
  • 此外tab支持更多css的属性,比如颜色,字体粗细等:

16.标签tag

代码

[
tag]默认白色文字[/tag]
[
tag type="primary"]紫色文字[/tag]
[
tag type="info"]蓝色文字[/tag]
[
tag type="warning"]黄色文字[/tag]
[
tag type="danger"]红色文字[/tag]
[
tag type="success"]绿色文字[/tag]
[
tag type="dark"]黑色文字[/tag]

默认白色文字
紫色文字
蓝色文字
黄色文字
红色文字
绿色文字
黑色文字

17.高亮文本提示

代码

[
scode type="share"]这是灰色的短代码框,常用来引用资料什么的[/scode]
[
scode type="yellow"]这是黄色的短代码框,常用来做提示,引起读者注意。[/scode]
[
scode type="red"]这是红色的短代码框,用于严重警告什么的。[/scode]
[
scode type="lblue"]这是浅蓝色的短代码框,用于显示一些信息。[/scode]
[
scode type="green"]这是绿色的短代码框,显示一些推荐信息。[/scode]


这是黄色的短代码框,常用来做提示,引起读者注意。

这是红色的短代码框,用于严重警告什么的。

这是浅蓝色的短代码框,用于显示一些信息。

这是绿色的短代码框,显示一些推荐信息。

END
文章标题:Typecho上常用的Markdown 语法
本文作者:
本文链接:https://kouketsu.top/archives/1/
版权说明:若无注明,本文皆kouketsuの小窝原创,转载请保留文章出处。
转载声明:进行许可转载引用文章应遵循相同协议
最后修改:2022 年 04 月 12 日
如果觉得我的文章对你有用,请随意赞赏