Yang's Blog: markdown基本语法

title: "markdown基本语法"

slug: "markdown-yu-fa"
date: 2020-05-16T08:47:25+08:00
draft: false
toc: true
weight: false
categories: ["学习笔记"]
tags: ["tips"]

编写博客需要使用Markdown，因此需要熟记语法规则，虽然Markdown语法比较少，但是一个一个查起来也是很蛋疼的（~~目录被标题的预览搞乱了。。。~~）

常用的Markdown语法规则有：

标题（我把标题扔到网页最后面了，目录被打乱了。。。）
字体加粗倾斜
引用
分割线
图片
超链接
列表
表格
代码
小文本
特殊字符转义
字体颜色大小
文本居中
勾选框
首行缩进
链接到其他文章
文字背景色
标签
选项卡
按钮

1. 字体加粗倾斜

字体倾斜需要在文本两端各加一个*号字体加粗需要在文本两端各加两个*号字体同时倾斜加粗需要在文本两端各加三个*号字体加入删除线需要在文本两端各加两个~~

示例

*倾斜的文字*
**加粗的文字**
***倾斜加粗的文字***
~~加删除线的文字~~
++加下划线的文字++

预览效果

倾斜的文字 加粗的文字 *倾斜加粗的文字* ~~加删除线的文字~~ ++加下划线的文字++

2. 引用

引用需要在文本前加一个>,引用可以嵌套，比如两个>>或三个>>>

示例

> 引用的文本
>> 嵌套的引用文本
>>> 再次嵌套的文本

预览效果

引用的文本
嵌套的引用文本
再次嵌套的文本

3. 分割线

分割线使用连续三个及以上的*或-实现，前后都有段落时各空出一行

示例

***

*****

---

-----

预览效果

4. 图片

使用链接形式插入图片

语法

![图片alt](图片url 图片title)

其中图片alt为图片下面的文字，相当于注释，图片url为图片的地址，图片title为鼠标悬浮到图片上显示的内容，此项选填

5. 超链接

超链接形式和图片类似，删掉前面的!即可

5.1. 普通链接方法

语法

[超链接名称](超链接地址 超链接title)

超链接title选填，鼠标悬浮时显示

示例

[Github](https://github.com github)

预览效果

Github

5.2. 高级链接方法

示例

使用1作为变量 [Github][1]
    在末尾为1赋值
[1]:https://github.com github

预览效果

使用1作为变量 Github 在末尾为1赋值 [1]:https://github.com github

6. 列表

列表分为有序列表和无序列表,都可以嵌套，嵌套时在下一个列表前加Tab或加三个空格其中有序列表使用符号*或+或-即可

示例

- C
+ C++
* Java

- 嵌套1
    - 嵌套2
        - 嵌套3

1. C
2. C++
3. Java

1. 嵌套1
    1. 嵌套2
    2. 嵌套2（1）
    3. 嵌套2（2）
        1. 嵌套3
        2. 嵌套3（1）
    2. 嵌套2（3）
2. 嵌套1（1）

预览效果

C
C++
Java
嵌套1
- 嵌套1
  - 嵌套3

C
C++
Java
嵌套1
1. 嵌套2
2. 嵌套2（1）
3. 嵌套2（2）
  1. 嵌套3
  2. 嵌套3（1）
4. 嵌套2（3）
嵌套1（1）

7. 表格

示例

表头|表头|表头
-|:-:|-:
内容|内容|内容
内容|内容|内容

其中第二行表示对齐方式

默认为左对齐，只写-
居中为:-:
右对齐为-:

预览效果

表头	表头	表头
内容	内容	内容
内容	内容	内容

8. 代码

代码使用反引号 表示，反引号是键盘左上角的~`键输入，而不是键盘右边的引号连续三个反引号可以生成代码块，代码块后面的字符表示不同的语言类型，示例中多打了括号

示例

`Hello World！`
	(```cpp)
    #include <stdio.h>
    int main(void){
    	printf("Hello World!");
        return 0;
    }
    (```)

预览效果

Hello World!

#include <stdio.h>
int main(void){
	printf("Hello World!");
    return 0;
}

8.1. 代码块语言说明

三个反引号后面的语言格式说明

语言	格式
Bash	bash
C#	cs
C语言	cpp
CSS	css
DOS	dos
Go	go
HTML	xml
ini	ini
Matlab	matlab
Markdown	markdown
makefile	makefile
Json	json
Java	java
JavaScript	js / javascript
Objective-C	objectivec
PHP	php
PowerShell	powershell
Processing	processing
Python	python
R	r
Ruby	ruby
SQL	sql
Swift	swift
TeX	tex
VBScript	vbscript
VB.Net	vbnet
Vim Script	vim

9. 小文本

在文本两端分别加入和即可生成小文本

示例 小文本

预览效果

小文本

10. 转义

在使用一些特殊符号(如#)时需要在符号前加\进行转义，否则符号不会正确显示

示例

\#
\*
\!
\+
\-

预览效果

# * ! + -

10.1. 特殊转义

部分特殊字符需要使用字符串转义

特殊字符	转义符号	中文名称	英文名称
!	`!`	感叹号	Exclamation mark
"	`"` `"`	双引号	Quotation mark
#	`#`	数字标志	Number sign
$	`$`	美元标志	Dollar sign
%	`%`	百分号	Percent sign
&	`&` `&`	与	Ampersand
'	`'`	单引号	Apostrophe
(	`(`	小括号左边部分	Left parenthesis
)	`)`	小括号右边部分	Right parenthesis
*	`*`	星号	Asterisk
+	`+`	加号	Plus sign
<	`<` `<`	小于号	Less than
=	`=`	等于符号	Equals sign
-	`-` `−`	减号	Minus
>	`>` `>`	大于号	Greater than
?	`?`	问号	Question mark
@	`@`	艾特	Commercial at
[	`[`	中括号左边部分	Left square bracket
\	`\`	反斜杠	Reverse solidus (backslash)
]	`]`	— 中括号右边部分	Right square bracket
{	`{`	大括号左边部分	Left curly brace
\|	`\|`	竖线	Vertical bar
}	`}`	大括号右边部分	Right curly brace
		空格	Space

11. 字体颜色大小

Hexo只支持黑色字体，可以使用Html语言调整颜色，使用和包裹需要变色的字体，ff0000可以替换为其他颜色代码。
字号同样使用Html语言调整，使用和包裹需要改变大小的字体，font size=后是调整的字号。
字体同样使用Html语言调整，使用和包裹需要改变的字体，font face=后是调整的字体名称。
颜色字号字体三者可以叠加使用

示例

<font color="ff0000">这是红色字</font>
<font size=2>这是2号字</font>
<font face="华文彩云">这是华文彩云字</font>
<font face="华文彩云" size=2 color="ff0000">这是2号红色华文彩云字</font>

预览这是红色字这是2号字这是华文彩云字这是2号红色华文彩云字

12. 字体居中

字体居中同样使用Html语言包裹，有三种格式示例

{% centerquote %}这是居中字体{% endcenterquote %}
 <blockquote class="blockquote-center">这是居中字体</blockquote>
{% cq %}这是居中字体{% endcq %}

预览

{% centerquote %}这是居中字体{% endcenterquote %}

这是居中字体

{% cq %}这是居中字体{% endcq %}

13. 勾选框

一种类似todo list的东西示例

- [ ]这是勾选框

预览

[ ]这是勾选框

14. 首行缩进

Hexo会把缩进的空格忽略掉，所以需要使用转义来进行首行缩进示例

&emsp;&emsp;这是首行缩进的文本

预览这是首行缩进的文本

15. 链接到其他文章

Hexo支持引入其他文章链接，语法为和,其中slug是要引用markdown的文件名，title是引用文章的标题

{% post_link Hexo博客踩坑指北 [Hexo博客指北] %}

预览

[Hexo博客指北]

16. 文字背景色

文字背景色需要使用Html表格设置，在bgcolor后设置文字背景色，使用颜色英文名预览

<table><tr><td bgcolor=lightblue>背景色yellow</td></tr></table>

示例

背景色yellow

17. Note标签

17.1. 配置

需要在Next主题配置文件中选择样式，打开_config.yml并搜索Note tag (bs-callout),下面是我的配置,style共有五种，预览可以在这里查看，icon用于设置是否显示图标

# Note tag (bs-callout)
note:
  # Note tag style values:
  #  - simple    bs-callout old alert style. Default.
  #  - modern    bs-callout new (v2-v3) alert style.
  #  - flat      flat callout style with background, like on Mozilla or StackOverflow.
  #  - disabled  disable all CSS styles import of note tag.
  style: flat
  icons: true
  border_radius: 3
  # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
  # Offset also applied to label tag variables. This option can work with disabled note tag.
  light_bg_offset: 0

17.2. 用法

使用<div>包裹需要显示的内容，class后面显示note的风格，加上no-icon可以隐藏图标示例

<div class="note default"><p>default</p></div>
<div class="note primary"><p>primary</p></div>
<div class="note success"><p>success</p></div>
<div class="note info"><p>info</p></div>
<div class="note warning"><p>warning</p></div>
<div class="note danger"><p>danger</p></div>
<div class="note default no-icon"><p>danger no-icon</p></div>

预览

default

primary

success

info

warning

danger

danger no-icon

18. Label标签

在@前调整label的风格，@后输入显示的内容示例

{% label default@这是default %}
{% label primary@这是primary %}
{% label success@这是success %}
{% label info@这是info %}
{% label warning@这是warning %}
{% label danger@这是danger %}

**预览

{% label default@这是default %} {% label primary@这是primary %} {% label success@这是success %} {% label info@这是info %} {% label warning@这是warning %} {% label danger@这是danger %}

19. Tab tag选项卡

19.1. 配置

在Next主题文件中搜索Tabs tag，然后将enable设置为true，下面是我的配置

# Tabs tag
tabs:
  enable: true
  transition:
    tabs: true
    labels: true
  border_radius: 0

19.2. 用法

自定义的选项较多示例

{% tabs First unique name %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->
<!-- tab -->
**This is Tab 2.**
<!-- endtab -->
<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

预览

{% tabs First unique name %}  This is Tab 1.   This is Tab 2.   This is Tab 3.  {% endtabs %}

示例第一行的数字3表示默认显示的Tabs,设置为-1时表示不显示默认Tabs

{% tabs Second unique name, 3 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->
<!-- tab -->
**This is Tab 2.**
<!-- endtab -->
<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

预览

{% tabs Second unique name, 3 %}  This is Tab 1.   This is Tab 2.   This is Tab 3.  {% endtabs %}

示例选项的名称和图标可以自定义，在中调整。具体效果省略。

20. 按钮

示例使用button或者btn，在两者后面加入要跳转的链接，不加链接的话默认跳转到当前页面

//只显示文字，Text是文字内容
{% button https://siriusq.top/, 主页 %}

//多个按钮并列
{% btn https://siriusq.top/, 主页 %} {% btn #, Text & Title,, Title %}

//只显示图标
<p>{% btn https://siriusq.top/,, home fa-5x %}
{% btn #,, home fa-4x %}
{% btn #,, home fa-3x %}{% btn #,, home fa-2x %}{% btn #,, home fa-lg %}{% btn #,, home %}</p>

//显示文字和图标
<p>{% btn #, Text & Icon (buggy), home %}
{% btn #, Text & Icon (fixed width), home fa-fw %}</p>

预览只显示文字，Text是文字内容 {% button https://siriusq.top/, 主页 %}

多个按钮并列 {% btn https://siriusq.top/, 主页 %} {% btn #, Text & Title,, Title %}

只显示图标

{% btn https://siriusq.top/,, home fa-5x %} {% btn #,, home fa-4x %} {% btn #,, home fa-3x %}{% btn #,, home fa-2x %}{% btn #,, home fa-lg %}{% btn #,, home %}

显示文字和图标

{% btn #, Text & Icon (buggy), home %} {% btn #, Text & Icon (fixed width), home fa-fw %}

21. 插入视频

因为Github Page提供的空间有限，音乐和视频建议上传到B站或Youtube等平台，通过Html语言嵌入，直接复制网页提供的分享链接即可，使用width设置宽度，height设置高度。

21.1. `<video>`标签

使用source src设置视频路径示例

<video width="480" height="320" controls>
<source src="movie.mp4">
</video>

预览（并没有视频）

21.2. `<embed>`标签

示例

<embed src='http://player.youku.com/player.php/sid/XMzUzNjg1OTQzNg==/v.swf' allowFullScreen='true' quality='high' width='480' height='400' align='middle' allowScriptAccess='always' type='application/x-shockwave-flash'></embed>

预览（随便放的）

21.3. `<iframe>`标签

示例

<iframe height=400 width=600 src="//player.bilibili.com/player.html?aid=14176961&cid=23141262&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

预览（自己的B站软广）

21.4. HTML 标签

可以直接用 HTML 的标签，写法如下：

<video poster="https://封面图.jpg" src="https://什么什么什么.mp4" style="max-height :100%; max-width: 100%; display: block; margin-left: auto; margin-right: auto;" controls="controls" loop="loop" preload="meta">Your browser does not support the video tag.</video>

如果想用插件的话，这里推荐 hexo-tag-dplayer，和音乐播放器 Aplayer 属于同一系列插件，是 Dplayer 播放器的 Hexo 标签插件，支持弹幕。

安装：

npm install hexo-tag-dplayer --save

在文章中的写法：

{% dplayer "url=https://什么什么什么.mp4" "https://封面图.jpg" "api=https://api.prprpr.me/dplayer/" "id=" "loop=false" %}

要使用弹幕，必须有 api 和 id 两项。

22. 插入音乐

首先，你可以直接使用 HTML 的标签，格式如下，其中 music-url 替换为你需要加载的音乐即可：

<audio src="music-url" style="max-height :100%; max-width: 100%; display: block; margin-left: auto; margin-right: auto;" controls="controls" loop="loop" preload="meta">Your browser does not support the audio tag.</audio>

当然，网易云音乐的外链很好用，不仅有可以单曲，还能有歌单。在网易云音乐的播放列表中有生成外链播放器，配置好样式直接复制代码插入文章即可。但是有一些音乐因为版权原因放不了，还有就是不完全支持 https，导致小绿锁不见了。要解决这些缺点，就需要安装插件。

这里推荐 hexo-tag-aplayer，APlayer 播放器的 Hexo 标签插件。安装：

npm install hexo-tag-aplayer --save

载入标签格式如下：

{% aplayer "歌曲名" "歌手名" "https://什么什么什么.mp3" "https://封面图.jpg" "lrc:https://歌词.lrc" %}

还可以支持歌单：

{% aplayerlist %}
{
    "autoplay": false,
    "showlrc": 3,
    "mutex": true,
    "music": [
        {
            "title": "歌曲名",
            "author": "歌手名",
            "url": "https://什么什么什么.mp3",
            "pic": "https://封面图.jpg",
            "lrc": "https://歌词.lrc"
        },
        {
            "title": "歌曲名",
            "author": "歌手名",
            "url": "https://什么什么什么.mp3",
            "pic": "https://封面图.jpg",
            "lrc": "https://歌词.lrc"
        }
    ]
}
{% endaplayerlist %}

具体的参数设置可以参考该插件的 README 和这插件的 Aplayer 的官方文档。

另外，该插件与 hexo-filter-optimize 插件共同使用会出现 BUG，对该问题的具体分析可参见我的文章《加速 Hexo 博客的方法及遇到的问题》。

23. 插入图片

使用图床最方便

24. 标题

在文字前加#和空格，支持六级标题和大小标题，一定不要漏了空格，空格漏掉的话会和普通字符一样显示

示例

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

大标题
===

小标题
---

预览效果略

25. 完成

Hexo中常用的Markdown语法大概就这些了，填坑结束~

2021年7月16日星期五

markdown基本语法

1. 字体加粗倾斜

2. 引用

3. 分割线

4. 图片

5. 超链接

5.1. 普通链接方法

5.2. 高级链接方法

6. 列表

7. 表格

8. 代码

8.1. 代码块语言说明

9. 小文本

10. 转义

10.1. 特殊转义

11. 字体颜色大小

12. 字体居中

13. 勾选框

14. 首行缩进

15. 链接到其他文章

16. 文字背景色

17. Note标签

17.1. 配置

17.2. 用法

18. Label标签

19. Tab tag选项卡

19.1. 配置

19.2. 用法

20. 按钮

21. 插入视频

21.1. <video>标签

21.2. <embed>标签

21.3. <iframe>标签

21.4. HTML 标签

22. 插入音乐

23. 插入图片

24. 标题

25. 完成

26. 参考链接

没有评论:

发表评论

21.1. `<video>`标签

21.2. `<embed>`标签

21.3. `<iframe>`标签