以下介绍可以使用的 markdown 或者标签代码。 功能大部分基于 hexo-renderer-multi-markdown-it
渲染器,尤其是代码块的显示,与默认渲染器不兼容。
# links
链接块本功能参考 NexT,基于 Hexo Tag 功能,用来建立友链或其他网址链接功能。
文章中的使用格式:
使用 links
标签块,包围 yml
语法书写的内容,字段包括 site
站点名称 必填 owner
管理员名字 可选,默认为 site
的值 url
站点链接 必填 desc
站点描述 可选,默认为 url
的值 image
站点图片 可选,默认为 images/404.png
color
方块颜色 可选,默认为 #666
1 2 3 4 5 6 7 8 {% links %} - site: #站点名称 owner: #管理员名字 url: #站点网址 desc: #简短描述 image: #一张图片 color: #颜色代码 {% endlinks %}
举个栗子:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 {% links %} - site: Brown-Lee owner: Brown-Lee url: https://shoka.lostyu.me desc: Brown·Lee的编程笔记 image: https://cdn.jsdelivr.net/gh/amehime/shoka@latest/images/avatar.jpg color: "#e9546b" - site: Brown-Lee owner: Brown-Lee url: https://shoka.lostyu.me image: images/avatar.jpg - site: Brown-Lee url: https://shoka.lostyu.me desc: Brown·Lee的编程笔记 color: "#9d5b8b" {% endlinks %}
Brown-Lee https://shoka.lostyu.me
以上标签块里的内容,还可以保存到一个 yml
文件中,然后使用 linksfile
标签。 其中, path
位于 <root>/source
目录下。
1 {% linksfile [path] %}
举个栗子:
1 {% linksfile friends/_data.yml %}
# code
代码块使用 markdown-it-prism
进行代码高亮,支持显示行号、行高亮 mark
、命令行提示符 command
、代码块标题。
基本格式: [language] [title] [url] [link text] [mark] [command]
选项 描述 默认值 language
支持的语言戳此 如果不需要代码高亮,但希望显示代码块样式,则设为 raw
留空或设为 info
,将不显示代码高亮和代码块样式 null
title 代码块的标题文字 null url 代码块标题右侧显示的链接 null link text 上述链接显示的标题 link mark
行高亮显示,格式为 mark:行号,行号开始-行号结束,其他行号
。 例如 mark:1,4-7,10
,将高亮显示第 1、4、5、6、7、10 行
null
command
命令行提示符,格式为 command:("提示内容":行号,行号||"提示内容":行号开始-行号结束)
例如 command:("[root@localhost] $":1,9-10||"[admin@remotehost] #":4-6)
null
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 ```java 行高亮 https://shoka.lostyu.me 参考链接 mark:1,6-7 import java.util.Scanner; ... Scanner in = new Scanner(System.in); // 输入Scan之后,按下键盘 Alt + “/” 键,Eclipse下自动补全。 System.out.println(in.nextLine()); System.out.println("Hello" + " world."); ``` ```bash 命令行提示符 command:("[root@localhost] $":1,9-10||"[admin@remotehost] #":4-6) pwd /usr/home/chris/bin ls -la total 2 drwxr-xr-x 2 chris chris 11 Jan 10 16:48 . drwxr--r-x 45 chris chris 92 Feb 14 11:10 .. -rwxr-xr-x 1 chris chris 444 Aug 25 2013 backup -rwxr-xr-x 1 chris chris 642 Jan 17 14:42 deploy git add -A git commit -m "update" git push ```
行高亮 参考链接 mark:1,6-7 1 2 3 4 5 6 7 import java.util.Scanner;... Scanner in = new Scanner (System.in);System.out.println(in.nextLine()); System.out.println("Hello" + " world." );
命令行提示符 command:("[root@localhost] $":1,9-10||"[admin@remotehost] #":4-6) 1 2 3 4 5 6 7 8 9 10 11 pwd /usr/home/chris/bin ls -latotal 2 drwxr-xr-x 2 chris chris 11 Jan 10 16:48 . drwxr--r-x 45 chris chris 92 Feb 14 11:10 .. -rwxr-xr-x 1 chris chris 444 Aug 25 2013 backup -rwxr-xr-x 1 chris chris 642 Jan 17 14:42 deploy git add -A git commit -m "update" git push
# quiz
练习题与答案这个功能是用来显示练习题的。 需要在 Front Matter 中添加 quiz: true
,以正确显示题型标签。
几个例子 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 --- title: 练习题与答案 quiz: true --- 1. 编译时多态主要指运算符重载与函数重载,而运行时多态主要指虚函数。 {.quiz .true} 2. 有基类`SHAPE`,派生类`CIRCLE`,声明如下变量: {.quiz .multi} ```cpp SHAPE shape1,*p1; CIRCLE circle1,*q1; ``` 下列哪些项是“派生类对象替换基类对象”。 - `p1=&circle1;` {.correct} - `q1=&shape1;` - `shape1=circle1;` {.correct} - `circle1=shape1;` {.options} > - :heavy_check_mark: 令基类对象的指针指向派生类对象 > - :x: 派生类指针指向基类的引用 > - :heavy_check_mark: 派生类对象给基类对象赋值 > - :x: 基类对象给派生类对象赋值 > {.options} 3. 下列叙述正确的是 []{.gap} 。 {.quiz} - 虚函数只能定义成无参函数 - 虚函数不能有返回值 - 能定义虚构造函数 - A、B、C都不对 {.correct} {.options} 10. 如果定义`int e=8; double f=6.4, g=8.9;`,则表达式 `f+int(e/3*int(f+g)/2)%4` 的值为 [9.4]{.gap}。 {.quiz .fill} > 注意运算顺序和数据类型 > [8.4]{.mistake}
点击选项可以显示答案,以及答案解析。
下列叙述正确的是 。
虚函数只能定义成无参函数 虚函数不能有返回值 能定义虚构造函数 A、B、C 都不对 有基类 SHAPE
,派生类 CIRCLE
,声明如下变量: {.quiz .multi}
1 2 SHAPE shape1,*p1; CIRCLE circle1,*q1;
下列哪些项是 “派生类对象替换基类对象”。
p1=&circle1;
q1=&shape1;
shape1=circle1;
circle1=shape1;
✔️ 令基类对象的指针指向派生类对象 ❌ 派生类指针指向基类的引用 ✔️ 派生类对象给基类对象赋值 ❌ 基类对象给派生类对象赋值 编译时多态主要指运算符重载与函数重载,而运行时多态主要指虚函数。
如果定义 int e=8; double f=6.4, g=8.9;
,则表达式 f+int(e/3*int(f+g)/2)%4
的值为 9.4 。
注意运算顺序和数据类型8.4
# 使用说明本功能基于 markdown-it-bracketed-spans
和 markdown-it-attrs
标签 含义 {.quiz}
选择题 {.quiz .multi}
多选题 {.quiz .true}
正确的判断题 {.quiz .false}
错误的判断题 {.quiz .fill}
填空题 []{.gap}
空白下划线 [答案内容]{.gap}
答案内容带下划线 {.options}
ABCDE 选项 {.correct}
选择题的正确选项 >
答案解析 [8.4]{.mistake}
错题备注
# emoji
绘文字本功能基于 markdown-it-emoji
,所有标签参考戳此
1 2 3 :kissing_heart: :ring: :notes:
😘 💍 🎶
# effects
文字特效本功能基于 markdown-it-ins
、 markdown-it-bracketed-spans
和 markdown-it-attrs
本主题风格颜色通用样式:default、primary、success、info、warning、danger
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 ++下划线++ ++波浪线++{.wavy} ++着重点++{.dot} ++紫色下划线++{.primary} ++绿色波浪线++{.wavy .success} ++黄色着重点++{.dot .warning} ~~删除线~~ ~~红色删除线~~{.danger} ==荧光高亮== [赤橙黄绿青蓝紫]{.rainbow} [红色]{.red} [粉色]{.pink} [橙色]{.orange} [黄色]{.yellow} [绿色]{.green} [靛青]{.aqua} [蓝色]{.blue} [紫色]{.purple} [灰色]{.grey} 快捷键 [Ctrl]{.kbd} + [C]{.kbd .red} H~2~0 29^th^
这段代码因为自动被 pangu.js 处理了一下,加了几个空格,导致直接复制代码不能正常显示。 正确的代码是 ++下划线++
~~删除线~~
==荧光高亮==
,不能有空格哦。
下划线 波浪线 着重点 紫色下划线 绿色波浪线 黄色着重点 删除线 红色删除线 荧光高亮 赤橙黄绿青蓝紫 红色 粉色 橙色 黄色 绿色 靛青 蓝色 紫色 灰色 快捷键 Ctrl + C H2 0 29th
# spoiler
隐藏文字本功能基于 markdown-it-spoiler
和 markdown-it-attrs
1 2 !!黑幕黑幕黑幕黑幕黑幕黑幕!! : 鼠标滑过显示内容 !!模糊模糊模糊模糊模糊模糊!!{.bulr} : 选中文字显示内容
黑幕黑幕黑幕黑幕黑幕黑幕 : 鼠标滑过显示内容模糊模糊模糊模糊模糊模糊 : 选中文字显示内容
# label
标签块本功能基于 markdown-it-bracketed-spans
和 markdown-it-attrs
有以下颜色可选
1 2 3 4 5 6 [default]{.label} [primary]{.label .primary} [info]{.label .info} [:heavy_check_mark:success]{.label .success} [warning]{.label .warning} [:broken_heart:danger]{.label .danger}
default primary info ✔️success warning 💔danger
# note
提醒块本功能基于 markdown-it-container
标签为:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 :::default 默认默认 ::: :::primary 基本基本 ::: :::info 提示提示 ::: :::success 成功成功 ::: :::warning 警告警告 ::: :::danger 危险危险 ::: :::danger no-icon 危险危险 :::
# tab
标签卡本功能基于 markdown-it-container
标签为:
开始行 ;;;[同一ID] [标签名称]
结束行 ;;;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 ;;;id1 卡片1 这里是卡片1的内容 **加粗** [success]{.label .success} {% links %} - site: Brown-Lee owner: Brown-Lee url: https://shoka.lostyu.me desc: Brown-Lee的编程笔记 image: https://cdn.jsdelivr.net/gh/amehime/shoka@latest/images/avatar.jpg color: "#e9546b" {% endlinks %} ;;; ;;;id1 卡片2 这里是卡片2的内容 :::danger 危险危险 ::: - 第一行 - 第二行 ;;; ;;;id2 ②号标签卡片1 这里是卡片1的内容 ;;; ;;;id2 ②号标签卡片2 这里是卡片2的内容 ;;;
# collapse
折叠块本功能基于 markdown-it-container
标签为:
开始行 +++[风格颜色] [标题文字]
结束行 +++
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 +++ 默认默认 这里是一段文字 ++下划线++ +++ +++primary 紫色 :::info 参考信息 ::: - 第一行 - 第二行 +++ +++info 蓝色 ;;;id3 卡片1 这里是卡片1的内容 ;;; ;;;id3 卡片2 这里是卡片2的内容 ;;; +++ +++success 绿色 {% links %} - site: Brown-Lee url: https://shoka.lostyu.me color: "#e9546b" {% endlinks %} +++ +++warning 黄色 !!警告警告警告警告警告!!{.bulr} [label]{.label .success} +++ +++danger 红色 [danger]{.label .danger} +++
默认默认 这里是一段文字 紫色 蓝色 绿色
Brown-Lee https://shoka.lostyu.me
黄色 红色 # taskList
待办事项本功能基于 markdown-it-task-checkbox
。 可以利用 markdown-it-attrs
添加风格颜色,只可以给 ul
标签添加,需要新建两行。
1 2 3 4 5 6 7 8 9 10 11 12 - [ ] 这是一个小叉叉 - [x] 这是一个红色勾勾 {.danger} - [ ] 未完成 - [x] 完成 {.primary} - [ ] 未完成 - [x] 默认颜色
# furigana
文字注音原本用于日语汉字假名注音,但别的注音也可以。 为了兼容性,采用 markdown-it-ruby
的基本格式: {文字^注音}
,并且为了兼容表格,将分隔符由 |
换成了 ^
。 注音分隔基于 furigana-markdown-it
显示说明看这里
{取り返す^とりかえす}
取( と ) り 返( かえ ) す {可愛い犬^か+わい・い・いぬ}
可愛( かわい ) い 犬( いぬ ) {可愛い犬^か・わい・いいぬ}
可( か ) 愛( わい ) い 犬( いぬ ) {アクセラレータ^accelerator}
アクセラレータ( accelerator ) {accelerator^アクセラレータ}
accelerator( アクセラレータ ) {食べる^たべる}
食( た ) べる {食べる^=たべる}
食べる( たべる ) {あいうえお^*}
あ● い● う● え● お● {あいうえお^*❤}
あ❤ い❤ う❤ え❤ お❤ {常用账号^contact}
常用账号( contact )
本功能基于 Hexo Tag 功能,使用 media
标签,目前可选择两种类型,即 audio
和 video
。
1 2 3 4 5 6 7 {% media audio %} ...音频列表 {% endmedia %} {% media video %} ...视频列表 {% endmedia %}
标签包绕一段 yml
格式的内容,格式与背景音乐 的配置类似。
亦可以直接使用网易云、虾米、QQ 音乐的播放列表、单曲。
举个栗子 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 {% media audio %} - title: 列表1 list: - https://music.163.com/#/playlist?id=2943811283 - https://music.163.com/#/playlist?id=2297706586 - title: 列表2 list: - https://music.163.com/#/playlist?id=2031842656 {% endmedia %} {% media video %} - name: "测试1" url: https://cdn.kastatic.org/ka-youtube-converted/O_nY1TM2RZM.mp4/O_nY1TM2RZM.mp4#t=0 - name: "测试2" url: https://cdn.kastatic.org/ka-youtube-converted/O_nY1TM2RZM.mp4/O_nY1TM2RZM.mp4#t=0 {% endmedia %}
# math
数学公式本功能基于 markdown-it-katex
在 Front Matter 中添加 math: true
以支持 KaTex
数学公式 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 --- title: 数学公式显示 math: true --- 行内公式:$\sqrt{3x-1}+(1+x)^2$ 独立块显示: $$\begin{array}{c} \nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}} \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\ \nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\ \nabla \cdot \vec{\mathbf{B}} & = 0 \end{array}$$
行内公式:3 x − 1 + ( 1 + x ) 2 \sqrt{3x-1}+(1+x)^2 3 x − 1 + ( 1 + x ) 2
独立块显示:
∇ × B ⃗ − 1 c ∂ E ⃗ ∂ t = 4 π c j ⃗ ∇ ⋅ E ⃗ = 4 π ρ ∇ × E ⃗ + 1 c ∂ B ⃗ ∂ t = 0 ⃗ ∇ ⋅ B ⃗ = 0 \begin{array}{c} \nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}} \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\ \nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\ \nabla \cdot \vec{\mathbf{B}} & = 0 \end{array} ∇ × B − c 1 ∂ t ∂ E ∇ × E + c 1 ∂ t ∂ B ∇ ⋅ B = c 4 π j ∇ ⋅ E = 0 = 0 = 4 π ρ
# mermaid
流程图本功能基于 markdown-it-mermaid
在 Front Matter 中添加 mermaid: true
以支持 Mermaid
流程图显示 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 --- title: 流程图显示 mermaid: true --- ```mermaid graph LR A[Square Rect] -- Link text --> B((Circle)) A --> C(Round Rect) B --> D{Rhombus} C --> D ``` ```mermaid sequenceDiagram loop Daily query Alice->>Bob: Hello Bob, how are you? alt is sick Bob->>Alice: Not so good :( else is well Bob->>Alice: Feeling fresh like a daisy end opt Extra response Bob->>Alice: Thanks for asking end end ``` ```mermaid graph LR A[Square Rect] -- Link text --> B((Circle)) A --> C(Round Rect) B --> D{Rhombus} C --> D ``` ```mermaid sequenceDiagram loop Daily query Alice->>Bob: Hello Bob, how are you? alt is sick Bob->>Alice: Not so good :( else is well Bob->>Alice: Feeling fresh like a daisy end opt Extra response Bob->>Alice: Thanks for asking end end ```