Hexo博客Markdown写作

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

<center><font size=1.5> From Pexels</center>

Markdown写作的基本语法，及一些Hexo特有的语法。

Markdown基本语法

标题

支持6种大小的标题，分别对应#,##,###,####,#####,######，和样式文件中的h1,...,h6如：
#####H5

1
#####H5

######H6

1
######H6

强调

我是强调

1
**我是强调**

斜体

试试斜体

1
试试*斜体*

强调的斜体

试试强调的斜体

1
试试***强调的斜体***

删除

试试 删除

1
试试 ~~删除~~

外链的超链接

试试外链的超链接：我是外链的超链接,markdown对链接的语法为：[](),如：[我是外链的超链接](https://upwon.github.io/)

1
[我是外链的超链接](https://upwon.github.io/),

页内的超链接

试试页内的超链接：我是页内的超链接，注：你先要在要跳转的到地方放置一个类似：<a id="jump_1">任意内容</a>的锚点。由id="jump_1" 来匹配。

1
[我是页内的超链接](#jump_1)

有序列表

  1. 有序列表 1

  2. 有序列表 2

  3. 有序列表 3

    1
    2
    3
    1. 有序列表 1
    2. 有序列表 2
    3. 有序列表 3

无序列表

  • 无序列表 1

  • 无序列表 2

  • 无序列表 3

    1
    2
    3
    - 无序列表 1
    - 无序列表 2
    - 无序列表 3

引用块

只需要在前面加 >,如下:

我是引用块

1
> 我是引用块

分隔线

1
---

换行




1
2
3
<br/> 
<br/> 
<br/>

行内代码

如：AppCompatActivity类,markdown对行内代码的语法是前后用：`,其中 ` 为键盘Tab箭上面上角那个`

1
`AppCompatActivity`

HTML 标签 键盘按键

markdown中可以插入html标签来实现更加丰富的显示效果。例如<kbd>标签来插入键盘按键 Ctrl+S

定义和用法
<kbd>标签定义键盘文本。
说到技术概念上的特殊样式时，就要提到 <kbd>标签。
正如你已经猜到的，它用来表示文本是从键盘上键入的。
浏览器通常用等宽字体来显示该标签中包含的文本。<kbd>标签经常用在于计算机相关的文档和手册中。例如：
键入<kbd>quit</kbd>来退出程序，或者键入<kbd>menu</kbd>来返回主菜单。

比如：

1
<kbd>Ctrl</kbd>+<kbd>F</kbd>

显示为：

Ctrl+F

代码块显示效果

注：markdown对代码块的语法是开始和结束行都要添加：```,其中 ` 为windows键盘左上角那个，如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
kind: RoleBinding
apiVersion: rbac.authorization.k8s.io/v1
metadata:
  name: haimaxy-sa-rolebinding
  namespace: kube-system
subjects:
- kind: ServiceAccount
  name: haimaxy-sa
  namespace: kube-system
roleRef:
  kind: Role
  name: haimaxy-sa-role
  apiGroup: rbac.authorization.k8s.io

要精确指定语言，

如：java,cpp,css,xml,javascript,python,php,go,kotlin,lua,objectivec等等时，在头部直接指定，如：```javascript，如下：

1
2
3
4
5
6
7
function showSnackbar() {
  var $snackbar = $('#snackbar');
  $snackbar.addClass('show');
  setTimeout(() => {
    $snackbar.removeClass('show');
  }, 3000);
}

```javascript

function showSnackbar() {
var $snackbar = $(‘#snackbar’);
$snackbar.addClass(‘show’);
setTimeout(() => {
$snackbar.removeClass(‘show’);
}, 3000);
}

在页面头部提供了很多中代码主题风格，可以根据需要选择合适的即可。



Markdown扩展语法

表格

班级 男生 女生
一(7)班 30 25
一(8)班 25 30

注：表格在公众号预览时，可能在PC端显示的不是正确的全屏，但在手机上预览时就会正常显示为全屏的了。


HTML

如果你懂html和css，那下面这些效果就不在话下了：

来个页内跳转，跳转到文未的：<a id="jump_1">我是页内跳转到的位置</a> ,对应：id="jump_1"

1
2
<a href="#jump_1">来个页内跳转</a>


字体颜色

先给点颜色你看看

1
<span  style="color: #5bdaed; ">先给点颜色你看看</span>

再给点颜色你看看

1
<span  style="color: #AE87FA; ">再给点颜色你看看</span>

背景色

背景色是：green
1
<table><tr><td bgcolor=green>背景色是：green</td></tr></table>

带颜色的分割线

1
<hr style="background-color : red;">

首行缩进

1
&ensp;&ensp;首行缩进测试

  首行缩进测试

这没有缩进

(每个表示一个空格，连续使用两个即可）

  • &ensp; 半角的空格
  • &emsp;全角的空格

字体大小

试试改变字体大小

1
<span  style="font-size:1.3em;">试试改变字体大小</span>

改变字体大小，再来个粗体又如何？

1
<span  style="font-size:1.3em;font-weight: bold;">改变字体大小，再来个粗体又如何？</span>

居中

试试内容居中 

1
2
3
<p style="text-align:center">
试试内容居中
</p>

那内容居右呢？ 

1
2
3
<p style="text-align:right">
那内容居右呢？
</p>

来个综合的试试
第二行 

1
2
3
4
5
<p style="text-align:center;color:#1e819e;font-size:1.3em;font-weight: bold;">
来个综合的试试
<br/>
第二行
</p>

我是页内跳转到的位置

1
<a id="jump_1">我是页内跳转到的位置</a>


Hexo 博客 Next主题特有的一些语法

文本居中的引用

此标签将生成一个带上下分割线的引用，同时引用内文本将自动居中。 文本居中时，多行文本若长度不等，视觉上会显得不对称，因此建议在引用单行文本的场景下使用。 例如作为文章开篇引用 或者 结束语之前的总结引用。

使用方式

  • HTML方式：使用这种方式时，给 img 添加属性 class="blockquote-center" 即可。
  • 标签方式：使用 centerquote 或者 简写 cq。

此标签要求 NexT 的版本在 0.4.5 或以上。 若你正在使用的版本比较低，可以选择使用 HTML 方式。 

1
2
3
4
5
6
7
<!-- 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 %}

举例

1
2
3
4
5
6
<blockquote class="blockquote-center">
HTML方式 
水止无痕地，云行不计程。
到时为彼岸，过处即前生。
——《送文畅上人东游》吕温
</blockquote>

HTML方式 水止无痕地，云行不计程。 到时为彼岸，过处即前生。 ——《送文畅上人东游》吕温 


1
2
3
4
5
6
{% centerquote %}
标签方式
晓看天色暮看云，行也思君，坐也思君。
--唐寅《一剪梅·雨打梨花深闭门》

{% endcenterquote %}

标签方式
晓看天色暮看云，行也思君，坐也思君。
–唐寅《一剪梅·雨打梨花深闭门》



1
2
3
4
5
6
7
8
9
10
{% cq %}

空山新雨后，天气晚来秋。

明月松间照，清泉石上流。

——《山居秋暝》王维

{% endcq %}

空山新雨后，天气晚来秋。

明月松间照，清泉石上流。

——《山居秋暝》王维




Note

在 Hexo中可以使用 note 标签，在主题配置文件下可以配置风格

1
2
3
4
5
6
7
8
9
10
11
12
#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: false #是否开启图标
  # 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

simple 风格的是这样的

相应的标签这样写就行啦

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{% note default %}
default 提示块标签
{% endnote %}

{% note primary %}
primary 提示块标签
{% endnote %}

{% note success %}
success 提示块标签
{% endnote %}

{% note info %}
info 提示块标签
{% endnote %}

{% note warning %}
warning 提示块标签
{% endnote %}

{% note danger %}
danger 提示块标签
{% endnote %}


modern 风格的是这样的



flat 风格的是这样的

个人感觉 flat 扁平化的最为美观。



开启 ico 后的效果是这样的：



选项卡

选项卡 1

选项卡 2(加粗)

选项卡 3 (加粗斜体)

1
2
3
4
5
6
7
8
9
10
11
{% tabs tab,2 %} 名字为tab，默认在第2个选项卡，如果是-1则隐藏
<!-- tab -->
选项卡 1
<!-- endtab -->
<!-- tab -->
**选项卡 2(加粗)**
<!-- endtab -->
<!-- tab A -->
***选项卡 3*** (加粗斜体)
<!-- endtab -->
{% endtabs %}

选项卡名称自定义

1
2
3
4
5
6
7
8
9
10
11
{% tabs 选项卡 2 %}
<!-- tab 自定义名称1 -->
这是选项卡 1
<!-- endtab -->
<!-- tab 自定义名称2 -->
这是选项卡 2
<!-- endtab -->
<!-- tab 自定义名称3 -->
这是选项卡 3
<!-- endtab -->
{% endtabs %}

这是选项卡 1

这是选项卡 2

这是选项卡 3

选项卡名称使用 icon

1
2
3
4
5
6
7
8
9
10
11
{% tabs 选项卡 2 %}
<!-- tab 自定义名称1@text-width -->
这是选项卡 1
<!-- endtab -->
<!-- tab 自定义名称2@amazon -->
这是选项卡 2
<!-- endtab -->
<!-- tab 自定义名称3@bold -->
这是选项卡 3
<!-- endtab -->
{% endtabs %}

这是选项卡 1

这是选项卡 2

这是选项卡 3



图标

hexo 使用的是fontawesome图标，有国内网站和国外网站。使用的时候对应相应的图标名称即可


telegram

1
<i class="fa fa-telegram" aria-hidden="true"></i>telegram

Google

1
<i class="fa fa-google" ></i> Google

为了增加图标大小相对于它们的容器, 使用 fa-lg (33% 递增), fa-2x, fa-3x, fa-4x, 或 fa-5x classes.

fa-lg


fa-2x


fa-3x


fa-4x


fa-5x

1
2
3
4
5
<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x


Button 标签

使用方式

1
2
3
4
5
6
<!-- 标签 方式 -->
{% button /path/to/url/, text, icon [class], title %}
<!-- 标签别名 -->
{% btn /path/to/url/, text, icon [class], title %}
<!-- HTML标签 -->
<button type="button">这是标签名Click Me!</button>

示例：

TextText & Title 
1
{% btn #, Text %}{% btn #, Text & Title, home, Title %}

1
{% btn url, text, icon [class], [title] %}
1
{% btn https://upwon.github.io ,首页,home fa-2x,这是YouForever的首页%}

google一下 
1
{% btn https://www.google.com, google一下,  google fa-fw %}

HTML示例

1
<button type="button" style="color: #d54b44> Click Me!</button>

1
2
3
<button type="button" class="btn"  style="background-color: #c35655;width: 76px;height: 36px;color: #FFFFFF">
    新建
</button>

1
<center><button type="button" class="btn"  style="background-color: #c35655; width: 76px;height: 36px;color: #FFFFFF">居中的</button> </center>

1
2
3
<div style="text-align: center;">
   <input type="button" value="button">
</div>

1
2
3
<div>
  <input type="button" value="button" style="display: block; margin: 0 auto;">
</div>


代码添加改动标记

只需将代码块中的语言指定为 diff，同时每行行首使用 + 和 - 来控制代码增减。

语法

1
2
3
4
{% codeblock lang:diff %}
- code snippet deleted
+ code snippet added
{% endcodeblock %}

示例代码

1
2
3
4
{% codeblock lang:diff %}
- print("删除的")
+ print("增加的")
{% endcodeblock %}

效果

1
2
3
4
5

- print("删除的")

+ print("增加的")

示例代码2

1
2
3
4
5
diff

- print("删除的")

+ print("增加的")

效果2
​```diff

  • print(“删除的”)
  • print(“增加的”)
    1
    2
    3
    4
    5
    6
    7
    8
    9





    ### 标签效果

    **例：**

我坐在床前，望着窗外，回忆满天。生命是华丽错觉，时间是贼偷走一切。

七岁的那一年，抓住那只蝉，以为能抓住夏天。十七岁的那年，吻过他的脸，就以为和他能永远。

有没有那么一种永远，永远不改变，拥抱过的美丽，都再也不破碎。
让险峻岁月不能，在脸上撒野，让生离和死别都遥远，有谁能听见。

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



**效果：**

我坐在床前，望着窗外，{% label @回忆满天 %}。生命是{% label primary @华丽错觉 %}，时间是贼偷走一切。

七岁的那一年，抓住那只{% label success @蝉 %}，以为能抓住夏天。十七岁的那年，吻过他的脸，就以为和他能{% label info @永远 %}。

有没有那么一种永远，{% label warning @永远不改变 %}，拥抱过的美丽，都再也不破碎。
让险峻岁月不能，在脸上撒野，让{% label danger @生离和死别都遥远 %}，有谁能听见。


   

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

 

 <br/>

{% note info %}
记得图片路径加上英文的双引号 '' ''

我使用的是HTML方式，因为我尝试标签方式出不来

{% endnote %}

   <br/>



<img src="https://lifeee-picture-bed.oss-cn-hangzhou.aliyuncs.com/image_bed/2020/20200422083632.jpg" class="full-image" />







Reference：

Md2All

内置标签

在hexo-NexT中插入note提示块

打造个性超赞博客 Hexo + NexT + GitHub Pages 的超深度优化

Hexo 搭建个人博客系列：写作技巧篇

NexT 主题内置标签
W3school HTML 标签