Cooper's Zone

Hexo中的Markdown写作

 Tech  2554  6 分钟

Markdown是一种用于写作的标记语言, 比LaTeX轻量很多, 且神奇的时还能支持数学公式, 我的texpad都快吃灰了(/狗头emoj).

当前使用的Hexo博客框架使用Markdown写作, 同时还额外支持Tag Plugin语法; 这篇主要罗列Markdown语法以及 Tag Plugin的使用.

Markdown基本语法

基本元素

  • ~~ 删除; ** 加粗; * 倾斜; == ==高亮==; : Emoj表情 🌟
  • ^ 上标 a^2^; ~ 下标 H~2~O
  • $ 数学公式 $dy/dx$
  • 水平线: ***、 ---、___
  • 任务列表: - [x]
  • 代码块: ~~~ 或```;代码片段`或``.
  • 下划线: <u>下划线</u>.
  • Typora 可使用[TOC] 插入目录

段落

  • 使用 <br> 进行断行;
  • 使用空行进行分段

引述 (Blockquotes)

  • 在段落前添加 > 可创建引述,使用 >> 实现嵌套.

  • 添加空行可实现分段.

  • 在引述中可使用其它元素

    1
2
3
4
5
6

    > The quarterly results look great!
>
> - Revenue was off the chart.
> - Profits were higher than ever.
>
>>  *Everything* is going according to **plan**.

The quarterly results look great!

  • Revenue was off the chart.
  • Profits were higher than ever.

Everything is going according to plan.

列表

当需要在列表中添加其它元素时, 为了保持列表连续性, 需要将元素缩进四个空格或一个Tab.

1
2
3
4
5
6

1. This is the first list item.
2. Here's the second list item.

    I need to add another paragraph below the second list item.

3. And here's the third list item.

其结果如下：

  1. This is the first list item.

  2. Here's the second list item.

    I need to add another paragraph below the second list item.

  3. And here's the third list item.

链接、引用与脚注

  1. Footnotes

    You can create footnotes like this[^fn1] and this[^fn2].

[^fn1]: Here is the *text* of the first **footnote**.
[^fn2]: Here is the *text* of the second **footnote**.

  2. 链接语法为:

     1
 2
 3
 4
 5
 6
 7
 8
 9
10

    <i@typora.io>
[Link Text](link-address "Optional Title") 

![Alt text](/path/to/img.jpg "Optional title")

[Readme1](Readme1.md)
[Readme2](../Docs/Readme2.markdown)
[Readme3](Readme3)
[Readme4](/User/root/Docs/Readme1.md)
See my [About](/about/) page for details. #站内链接

  3. 引用链接可以将文本和链接分离.

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

    [Link Text][Ref] 
[Ref]: link-address  "Optional Title Here"

![an image][img]
[img]: url/to/img "Optional Title" 

<!--可以省略中括号内容-->
[Ref][]
[Ref]: link-address

![img][]
[img]: url/to/img "Optional Title"

  4. 页面内链接:

    1
2

    # This is a title
A [link](#this-is-a-title) to jump towards target header

    1
2

    <a id="anchor"></a> Anchor
<a href="#anchor">Link to Anchor</a>

  5. 通过标题ID自定义anchor

    1

    ### My Great Heading {#anchor}

    1

    <h3 id="anchor">My Great Heading</h3>

  6. Typora可以对anchor定义css样式:

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

    /* hide the anchor HTML */
a[name]:empty + .md-raw-inline {
  display:none;
}
a[name]:empty {
  text-decoration: none;
}
a[name]:empty:before {
 content:"⚓";
}
/* show the anchor HTML when cursor is inside */
.md-expand .md-raw-inline {
    display: inline !important;
}

改变图片大小

1
2
3

<img src="path/to/img" width="200px" />
<img src="path/to/img" style="height:200px" />
<img src="path/to/img" style="zoom:50%" />

表格

  • 创建表格时, 使用三个或更多个连字符(---)创建表头, 同时用管道字符串(|) 分隔列.
  • 连字符的个数不影响渲染结果
  • 可以通过添加冒号 : 来设置对齐
  • 以对表格的内容进行加粗, 添加链接、代码 (代码块除外). 但不能添加标题、 块引用、 列表、 水平线、图片或HTML标签.
  • 在表格中, 管道字符需要要 HTML 字符码 &#124; 输入
1
2
3
4

| Syntax      | Description | Test Text     |
| :--- |      |    :----:   |          ---: |
| Header      | Title       | Here's this   |
| Paragraph   | Text        | And more      |
Syntax Description Test Text
Header Title Here's this
Paragraph Text And more

定义列表(Definition Lists)

创建定义列表时, 第一行写定义项目, 第二行以「: 」开头, 后面紧跟空格和定义.

1
2
3
4
5
6

First Term
: This is the definition of the first term.

Second Term
: This is one definition of the second term.
: This is another definition of the second term.

结果如下:

First Term
This is the definition of the first term.
Second Term
This is one definition of the second term.
This is another definition of the second term.

HTML

Markdown 可以直接使用HTML中的tag. 其使用规则根据其占用的空间做区分.

  1. 对于 block level 的元素(<div>, <table>, <pre>, <p>, etc.), 在使用时必须用空行做分隔. 即在开始前和结束后都需要有空行, 且标签不能有缩进. 块区域中的markdown语法将不被处理.

  2. 行内元素的使用不受限制, 且可使用Markdown语法.

  3. 由于 & 和 < 在HTML中有特殊含义, 所以需要被特殊处理. 不过一般markdown足够智能, 会结合语境自动转换.

  4. 使用HTML来给内容添加样式, 如<span style="color:red">this text is red</span>

Next标签

图片

Picture Group

{% grouppicture [number]-[layout] %}{% endgrouppicture %}
<!-- Tag Alias -->
{% gp [number]-[layout] %}{% endgp %}

例如:

{% grouppicture 3-3 %}
![](/gallery/1.png)
![](/gallery/2.png)
![](/gallery/3.png)
{% endgrouppicture %}

Label

Label可以给字体加上一些颜色, 其语法为:

1

{% label [class]@text %}

其中class 的选项有: {% label default@default %}、{% label primary@primary %}、 {% label success@success %}、{% label info@info %}、 {% label warning@warning %}、{% label danger@danger %}

Note (Bootstrap Callout)

Note的语法为:

{% note [class] [no-icon] [summary] %}
Any content (support inline tags too).
{% endnote %}

其中 class选项和note相同

{% note info no-icon %}
#### No icon note
Note **without** icon: `note info no-icon`
{% endnote %}

{% note info no-icon %}

No icon note

Note without icon: note info no-icon {% endnote %}

{% note primary This is a summary %}
#### Details and summary
Note with summary: `note primary This is a summary`
{% endnote %}

{% note primary This is a summary %}

Details and summary

Note with summary: note primary This is a summary {% endnote %}

链接网格

Link Grid

{% linkgrid [image] [delimiter] [comment] %}{% endlinkgrid %}
<!-- Tag Alias -->
{% lg [image] [delimiter] [comment] %}{% endlg %}

{% linkgrid %}
Theme NexT | https://theme-next.js.org/ | Stay Simple. Stay NexT. | /images/apple-touch-icon-next.png
Theme NexT | https://theme-next.js.org/ | Stay Simple. Stay NexT. | /images/apple-touch-icon-next.png
{% endlinkgrid %}

{% linkgrid %} Theme NexT | https://theme-next.js.org/ | Stay Simple. Stay NexT. | /images/apple-touch-icon-next.png Theme NexT | https://theme-next.js.org/ | Stay Simple. Stay NexT. | /images/apple-touch-icon-next.png {% endlinkgrid %}

标签页(Tabs)

标签页可以让页面元素可以通过标签切换, 其基本语法为:

{% tabs Unique name, [index] %}
<!-- tab [Tab caption] [@icon] -->
Any content (support inline tags too).
<!-- endtab -->
{% endtabs %}

其中 index 表示默认显示标签页, 默认为1, 即显示第一个标签页. 如果设置为-1则不展开标签页. @icon 使用 font-awesome 字体.

{% tabs Sixth unique name %}
<!-- tab Solution 1@text-width -->
**This is Tab 1.**
<!-- endtab -->

<!-- tab Solution 2@font -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab Solution 3@bold -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

{% tabs Sixth unique name %}

This is Tab 1.

This is Tab 2.

This is Tab 3.

{% endtabs %}

Hexo标签

引用(Alias: quote)

引用语法为:

{% blockquote [author[, source]] [link] [source_link_title] %}
content
{% endblockquote %}

不带链接引用时, 需有逗号.

{% blockquote BaoHengtao, Cooper’s  Zone %}
hello world
{% endblockquote %}

{% blockquote BaoHengtao, Cooper’s Zone %} hello world {% endblockquote %}

带链接引用时, 将逗号换为链接:

{% blockquote BaoHengtao https://www.coopers.zone Cooper’s  Zone %}
hello world
{% endblockquote %}

{% blockquote BaoHengtao https://www.coopers.zone Cooper’s Zone %} hello world {% endblockquote %}

代码块(Alias: code)

代码块语法为:

{% codeblock [title] [lang:language] [url] [link text] [additional options] %}
code snippet
{% endcodeblock %}

其中Options有如下选项

Extra Options Description Default
line_number Show line number true
highlight Enable code highlighting true
first_line Specify the first line number 1
mark Line highlight specific line(s), each value separated by a comma. Specify number range using a dash Example: mark:1,4-7,10 will mark line 1, 4 to 7 and 10.
wrap Wrap the code block in <table> true

举例如下

{% codeblock main.py lang:python https://www.coopers.zone Coopers Blog line_number:true first_line:5 wrap:true%}
print('Hello world')
{% endcodeblock %}

{% codeblock main.py lang:python https://www.coopers.zone Cooper's Blog line_number:true first_line:5 wrap:true%} print('Hello world')

{% endcodeblock %}

也可以直接用Markdown语法 ``` [language] [title] [url] [link text] code snippet ```.

1
2
3

```python main.py https://www.coopers.zone Coopers'ZZ
print "Hello world"
​```

从文件插入代码

将代码放入 source/downloads/code文件夹. 该目录可通过code_dir修改.使用如下语法:

{% include_code [title] [lang:language] [from:line] [to:line] path/to/file %}

例子: 将test.js的第5-第8行放入其中.

{% include_code lang:javascript from:5 to:8 test.js %}

引用文章

引用其它文章:

{% post_path filename %}
{% post_link filename [title] [escape] %}

例子:

{% post_link hexo-3-8-released 'Link to a post' %}
{% post_link hexo-4-released '<b>bold</b> custom title' false %}

引用 Assets

基本语法:

{% asset_path filename %}
{% asset_img [class names] slug [width] [height] [title text [alt text]] %}
{% asset_link filename [title] [escape] %}

图片

{% asset_img post-image foo.jpg 500 400  "lorem ipsum'dolor'"  %}

Raw

If certain content is causing processing issues in your posts, wrap it with the raw tag to avoid rendering errors.

{% raw %}
content
{% endraw %}

YouTube

嵌入Youtube视频

{% youtube video_id [type] [cookie] %}

例子

# Embed a video
{% youtube lJIrF4YjHfQ %} 
# Embed a playlist
{% youtube PL9hW1uS6HUfscJ9DHkOSoOX45MjXduUxo 'playlist' %} 
# YouTube’s cookie is not used in this mode.
{% youtube lJIrF4YjHfQ false %}
{% youtube PL9hW1uS6HUfscJ9DHkOSoOX45MjXduUxo 'playlist' false %}

嵌入 Vimeo 视频.

{% vimeo video_id [width] [height] %}

其它引用

To add pull quotes to your posts:

{% pullquote [class] %}
content
{% endpullquote %}

To embed a jsFiddle snippet:

{% jsfiddle shorttag [tabs] [skin] [width] [height] %}

To embed a Gist snippet:

{% gist gist_id [filename] %}

To embed an iframe:

{% iframe url [width] [height] %}

Inserts an image with specified size.

{% img [class names] /path/to/image [width] [height] '"title text" "alt text"' %}

Inserts a link with target="_blank" attribute.

{% link text url [external] [title] %}
updatedupdated2023-06-052023-06-05
abd4ce1
Update https-ca.md
Edit Me?

相关文章：