Markdown 编辑器日常使用语法记录

发表于 更新于 分类于 阅读次数： 本文字数： 5.9k 阅读时长 ≈ 5 分钟

段首缩进

  

下面用菜根谭中一段做例
  好丑心太明，则物不契；贤愚心太明，则人不亲。士君子须是内精明而外浑厚，使好丑两得其平，贤愚共受其益，才是生成的德量。

文本局中

夜宿山寺
唐 · 李白
危楼高百尺，手可摘星辰。
不敢高声语，恐惊天上人。

插入图片

![](/post/1.jpg)

{% asset_img jkp.jpeg 相对路径示例图 %}  推荐

小女孩

分页显示

<escape><!-- more --></escape>

链接

  1. 文字链接
    2. [github](www.github.com)
  2. 网址链接
    3. <www.Google.hk>

表格

| 姓名 | 性别 | 电话 |
| :--- | :----: | ----: |
| 张三 | 男 | 123456789123 |
姓名 性别 电话
张三 男 123456789123

图片墙

{% grouppicture [group]-[layout] %}{% endgrouppicture %}
{% gp [group]-[layout] %}{% endgp %}

[group]  : 要在组中添加的图片总数。
[layout] : 要显示的组下的默认图片。
{% gp 4-4 %}
  ![](/photos/images/1.jpg)
  ![](/photos/images/2.jpg)
  ![](/photos/images/3.jpg)
  ![](/photos/images/4.jpg)
{% endgp %}

按钮

{% button #, 开始 %}
开始 
{% btn #, Text %} {% btn #, 取消,, Title %}
Text 取消 
{% button url, text, icon [class], [title] %}
<!-- 标签别名 -->
{% btn url, text, icon [class], [title] %}

url     : 绝对或相对URL
text    : 按钮文字，如果未指定图标则为必须
icon    : FontAwesome图标名称（开头没有'fa-'）。如果未指定文本，则为必需
[class] : FontAwesome类：fa-fw | fa-lg | fa-2x | fa-3x | fa-4x | fa-5X ，可选参数。
[title] : 鼠标悬停时的工具提示，可选参数。

使用：

最好添加<div>标签，测试时没加div，下面显示不完全，加上非常美观。

<div>{% btn https://www.zhyong.cn ,首页,home fa-2x,这是YouForever的首页%}</div>

显示：

标签

{% label [class]@Text %}

[class] : default | primary | success | info | warning | danger.
          '@Text' 可以指定是否有空格
          例如。 'success @text'类似于'success @ text'。
          如果未指定，则将选择默认类。
Lorem {% label @ipsum %} {% label primary@dolor sit %} amet, consectetur {% label success@adipiscing elit, %} sed {% label info@do eiusmod %} tempor incididunt ut labore et dolore magna aliqua.

Ut enim *{% label warning @ad %}* minim veniam, quis **{% label danger@nostrud %}** exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate ~~{% label default @velit %}~~ <mark>esse</mark> cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

标注

{% note [class] [no-icon] %}
任何内容（支持内联标签）
{% endnote %}

[class]   : default | primary | success | info | warning | danger.
[no-icon] : 禁用备注中的图标

所有参数都是可选的。
{% note %}
无任何样式
{% endnote %}

{% note success %}
成功的笔记
{% endnote %}

{% note primary %}
#### Primary Header
**Welcome** to [Hexo!](https://hexo.io)
{% endnote %}
Primary Header

Welcome to Hexo!

pdf 文件

1,第一方法

<iframe src="http://lc-0ww4yxjs.cn-n1.lcfile.com/510df791fa9b2590c109/Python%E5%9F%BA%E7%A1%80%E6%95%99%E7%A8%8B%EF%BC%88%E7%AC%AC3%E7%89%88%EF%BC%89.pdf" width="830" height="800" scroll="no"></iframe>

2,第二方法

<embed src="http://lc-0ww4yxjs.cn-n1.lcfile.com/510df791fa9b2590c109/Python%E5%9F%BA%E7%A1%80%E6%95%99%E7%A8%8B%EF%BC%88%E7%AC%AC3%E7%89%88%EF%BC%89.pdf" width="840" height="800">

这两种方法效果是一样的，但是不够完美，pdf 文件不能随窗口大小变化，后读发现方法在更新。

启用PDF标签插件：https://github.com/theme-next/theme-next-pdf

官方教程
https://theme-next.org/docs/tag-plugins/pdf

使用：

{% pdf url [height] %}

[url]    : 相对路径
[height] : 可选参数，pdf展示的高度, e.g. 800px.

示例1：

{% pdf https://zhyong-cn-file.oss-cn-shanghai.aliyuncs.com/books%2Fbyte-of-python-chinese-edition.pdf %}

示例2：

{% pdf http://lc-0ww4yxjs.cn-n1.lcfile.com/510df791fa9b2590c109/Python%E5%9F%BA%E7%A1%80%E6%95%99%E7%A8%8B%EF%BC%88%E7%AC%AC3%E7%89%88%EF%BC%89.pdf %}

锚点

用于页内跳转。其中定义id地方，虽然不太美观，不过只能写HTML。
语法

[点击我跳转到锚点](#jump)
<div id = "jump">我是一个锚点，跳到我这里来</div>

标题

使用 # 号可标记1 - 6级标题，一级标题对应 1 个 # 号，二级标题对应 2 个 # 号，以此类推。

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

字体


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

显示效果如下：

斜体文本

斜体文本

粗体文本

粗体文本

粗斜体文本

粗斜体文本

字号及颜色

<font size=1>大小为1的字体</font>
<font size=6>大小为6的字体</font>

<font color=gray size=4>gray颜色的字</font>
<font color=green size=4>green颜色的字</font>
<font color=hotpink size=4>hotpink颜色的字</font>
<font color=LightCoral size=4>LightCoral颜色的字</font>
<font color=LightSlateGray size=4>LightSlateGray颜色的字</font>
<font color=orangered size=4>orangered颜色的字</font>
<font color=red size=4>red颜色的字</font>
<font color=springgreen size=4>springgreen颜色的字</font>
<font color=Turquoise size=4>Turquoise颜色的字</font>

大小为1的字体

大小为6的字体

gray颜色的字

green颜色的字

hotpink颜色的字

LightCoral颜色的字

LightSlateGray颜色的字

orangered颜色的字

red颜色的字

springgreen颜色的字

Turquoise颜色的字

分隔线

有多种方法都可以建立分隔线：3个以上的星号，3个以上的减号，3个以上的下划线，也可以在星号、减号、下划线中间插入空格，这几种方式都可以建立分隔线。


***
* * *
******
- - -
_ _ _

显示效果如下：

删除线

我没有删除线
我也没有删除线
~~我有删除线~~

显示效果如下：

我没有删除线
我也没有删除线
我有删除线

下划线

Markdown中并无下划线的原生语法，可以通过HTML的标签来实现。

<u>我带下划线</u>

显示效果如下：

我带下划线

无序列表

无序列表使用星号，加号或是减号作为标记。

* 列表项1
* 列表项2

+ 列表项1
+ 列表项2

- 列表项1
- 列表项2

显示效果如下：

  • 列表项1
  • 列表项2
  • 列表项1
  • 列表项2
  • 列表项1
  • 列表项2

有序列表

有序列表使用数字加上 . 号来表示，注意 . 号和实际内容之间需要加一个空格。

1. 有序列表项1
2. 有序列表项2

显示效果如下：

  1. 有序列表项1
  2. 有序列表项2

列表嵌套

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

* 无序列表1
    1. 有序列表1.1
    2. 有序列表1.2
* 无序列表2
    - 无序列表2.1
    - 无序列表2.2
  • 无序列表1
    1. 有序列表1.1
    2. 有序列表1.2
  • 无序列表2
    • 无序列表2.1
    • 无序列表2.2

Markdown区块

区块使用 > 符号，后面加上一个空格。

> 区块
> Markdown
> 用Markdown写文章，爽！

显示效果如下：

区块 Markdown 用Markdown写文章，爽！

区块嵌套：每一层嵌套加上 > 符号和空格

> 区块
> > 嵌套1
> > > 嵌套2

区块

嵌套1

嵌套2

折叠(显示/隐藏)部分文字

npm install hexo-hide-posts --save

二选一或者
npm install hexo-spoiler --save

其他标记

这是一条删除线

这里不会显示斜体

code

more code