hexo下的markdown语法

发表于 | 分类于 | 阅读次数:
字数统计: 2,029 | 阅读时长 ≈ 8

入坑了一个新的主题-next,发现他有一些markdown的语法比较特殊，所以整理了一下相关的信息。

markdown语法

文章头部的 front-matter

目前我用的主题是next，版本是：v5.1.4 ,hexo的版本是3.7.1

1
2
3
4
5
6
title: hexo下的markdown语法
date: 2018-06-29 20:53:40
tags: 
  - hexo
  - markdown语法
categories: hexo

以前的tages的写法是 tags: [aa,bb,cc] ，现在我发现tages的写法是：隔行然后缩进前面加中划线，再加上一个空格，然后写上标签。

注意：tags 与后面的标签内容必须要有一个空格，在hexo中的很多地方都有这个要求

文章相关的语法

标题

1
2
3
=====  (等于号)是一级标题
------ （减号）是二级标题
###    是三级标题

或者使用传统的

1
2
3
4
5
#         H1
##        H2
###       H3
...
######    H6

分割线

单独一行使用***或者——————（下划线）

删除线

使用~~需要删除的文字~~来表示，这个要被删除

注意：前后~~与文字没有空格

超链接

1
[链接的文字](链接的地址 "鼠标指上后链接显示的文字")

注释

用\来注释，类似于转义字符的效果

引用

1
> 打工是不可能打工的，这辈子都不可能打工的

注意：如果仅在第一行使用 >， 后面相邻的行即使省略 >，也会变成引用内容，可以在结束的语句后面加上两个空格，或者与后面的语句直接空一行

验证写法

1
2
3
4
5
> 打工是不可能打工的，这辈子都不可能打工的
打工是不可能打工的，这辈子都不可能打工的 
打工是不可能打工的，这辈子都不可能打工的 

打工是不可能打工的，这辈子都不可能打工的

效果

打工是不可能打工的，这辈子都不可能打工的
打工是不可能打工的，这辈子都不可能打工的
打工是不可能打工的，这辈子都不可能打工的

打工是不可能打工的，这辈子都不可能打工的

推荐使用后面说的内置标签来引入，效果更好
使用>的嵌套格式，没有效果

列表

列表有无序和有序之分，考虑到用实际使用无序列表居多，这里只介绍无序列表，无序列表使用空格的缩进来表示层级，+和- 都是他的关键字符,此外给-/+ 和文字中间加入 [ ] 可以有计划表的效果
写法

1
2
3
4
5
6
+ 计划A
  + [ ] A计划第一步
    +  [x]首先XXX
- [ ] 计划B
  - [ ] B计划第一步
    -  [x]首先XXX

效果

  • 计划A
    • A计划第一步
      • 首先XXX
  • 计划B
    • B计划第一步
      • 首先XXX

注意：关键字符与文字要有空格，[]中间要用空格打开，否则不生效

插入图片

1
![Alt text](图片链接 "optional title")

Alt text：图片的Alt标签，用来描述图片的关键词，可以不写。最初的本意是当图片因为某种原因不能被显示时而出现的替代文字，后来又被用于SEO，可以方便搜索引擎根据Alt text里面的关键词搜索到图片。
图片链接：可以是图片的本地地址或者是网址。
“optional title”：鼠标悬置于图片上会出现的标题文字，可以不写。

原生的语法使用效果不好，推荐使用后面hexo以及next的插入图片对应标签语法

表格

使用|来分隔不同的单元格，使用-来分隔表头与其他行
写法

1
2
3
4
| 名字 | 性别 | 年龄 |
| ---- | ---- | --- |
| 张三 | 男 |  18 |
| 赵淑芬 | 女 | 20 |

效果

名字 性别 年龄
张三 男 18
赵淑芬 女 20

注意：为了使 Markdown 更清晰，| 和 - 两侧需要至少有一个空格（最左侧和最右侧的 | 外不需要）

如果想改变表格的对齐方式：需要在表头下方的分割线标记中加入 ：
此外，表格中可以放其他的markdown的标记

  • :— 代表左对齐
  • :–: 代表居中对齐
  • —: 代表右对齐
  • 默认是左对齐
    写法
    1
    2
    3
    4
    | 名字 | 性别 | 年龄 |
    | ----: | :----: | :--- |
    | 张三 | 男 |  18 |
    | 赵淑芬 | 女 | 20 |
    效果
名字 性别 年龄
张三 男 18
赵淑芬 女 20

hexo 的标签语法

hexo 为了显示的效果更好，自身定义了一些标签插件，hexo中文文档链接

引用块

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

普通的引用

在blockquote后面不写任何参数，就只是单纯的引用，效果与使用>一样

对书上语言的引用

1
2
3
{% blockquote 作者, 出处 %}
xxxxxxxxxxxxxxxxxxxxxxxxxxxx
{% endblockquote %}

黑夜无论怎样悠长，白昼总会到来。

莎士比亚麦克白

对网络上的引用

1
2
3
{% blockquote @作者 网络地址 %}
xxxxxxxxxxxxxxxxxxxxxxxxxx
{% endblockquote %}

有时候，“爱国”，是一个空洞的词语。更多的人是在言语里，在诗歌里”爱国“，他们没有一点点实际行动，甚至充满抱怨。

代码块

1
2
3
{% codeblock [title] [lang:language] [url] [link text] %}
code snippet
{% endcodeblock %}

普通代码块

在codeblock不加任何参数的标签，和使用`（单行的时候使用）以及` ` `（多行的时候使用）效果一样

1
2
3
{% codeblock  %}
console.log("我叫丰木木")
{% endcodeblock %}

1
console.log("我叫丰木木")

带有使用语言的代码块（有高亮）

1
2
3
{% codeblock lang:JavaScript %}
console.log("我叫丰木木")
{% endcodeblock %}
1
console.log("我叫丰木木")

带有说明的代码块

1
2
3
{% codeblock js控制台输出语句 %}
console.log("我叫丰木木")
{% endcodeblock %}
控制台输出语句
1
console.log("我叫丰木木")

附带有说明网址的代码块

1
2
3
{% codeblock 控制台输出语句 https://developer.mozilla.org/zh-CN/docs/Web/API/Console/log 查看MDN相关解释%}
console.log("我叫丰木木")
{% endcodeblock %}
控制台输出语句查看MDN相关解释
1
console.log("我叫丰木木")

反引号代码块

使用``` [title] [lang:language] [url] [link text] ``` 一样可以使用以上几个标签效果

注意：反引号代码块后面的参数 在本博客环境下实测没有效果，也就是说使用`是可以当做普通代码块使用

插入iframe

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

插入image

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

插入Include Code

插入source文件夹中的代码文件

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

next中的标签

next文档中文传门

文本居中

1
2
3
4
5
6
7
8
9
<!-- HTML方式: 直接在 Markdown 文件中编写 HTML 来调用 -->
<!-- 其中 class="blockquote-center" 是必须的 -->
<blockquote class="blockquote-center">blah blah blah</blockquote>

<!-- 标签 方式，要求版本在0.4.5或以上 -->
{% centerquote %}blah blah blah{% endcenterquote %}

<!-- 标签别名 -->
{% cq %} blah blah blah {% endcq %}

当我看到人和草木一样生长繁衍，
任凭同一个老天他们鼓励阻拦。
青春时蓬蓬勃勃，全盛时又该走向凋落，
繁华和璀璨都将从记忆中消散。
——Shakespeare 《莎士比亚十四行诗》

插入的图片变大

使用方式

  • HTML方式：使用这种方式时，为 img 添加属性 class=”full-image”即可。
  • 标签方式：使用 fullimage 或者 简写 fi， 并传递图片地址、 alt 和 title 属性即可。 属性之间以逗号分隔。
    突破容器宽度限制的图片文档链接
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11

    <!-- HTML方式: 直接在 Markdown 文件中编写 HTML 来调用 -->
    <!-- 其中 class="full-image" 是必须的 -->
    <img src="/image-url" class="full-image" />

    <!-- 标签 方式，要求版本在0.4.5或以上 -->
    <span itemprop="image" itemscope itemtype="http://schema.org/ImageObject"><img itemprop="url image" src="/image-url" class="full-image" alt="alt" title="title" /><meta itemprop="width" content="auto"><meta itemprop="height" content="auto"></span>

    <!-- 别名 -->
    <span itemprop="image" itemscope itemtype="http://schema.org/ImageObject"><img itemprop="url image" src="/image-url" class="full-image" alt="alt" title="title" /><meta itemprop="width" content="auto"><meta itemprop="height" content="auto"></span>

Bootstrap Callout

1
2
3
{% note class_name %} 
xxxxxxxxxxxxxxxxxxx 
{% endnote %}

class_name 数值可以为

  • default
  • primary
  • success
  • info
  • warning
  • danger
感觉不错的话给博主赞助一下呗