Markdown语法与外挂标签

196 阅读12分钟

1.Markdown语法自带格式

参考:Markdown语法图文全面详解(10分钟学会)

1.1 代码块

{% tabs 分栏 %}

 ```shell
 # VSCode终端
 hexo clean; hexo s
 hexo clean; hexo g; hexo d
 git add .; git commit -m "npm publish"; npm version patch; 
 git push
 ​
 # Cmder终端
 hexo clean && hexo s
 hexo clean && hexo g && hexo d
 git add . && git commit -m "npm publish" && npm version patch
 git push
 ```
 # VSCode终端
 hexo clean; hexo s
 hexo clean; hexo g; hexo d
 git add .; git commit -m "npm publish"; npm version patch; 
 git push
 ​
 # Cmder终端
 hexo clean && hexo s
 hexo clean && hexo g && hexo d
 git add . && git commit -m "npm publish" && npm version patch
 git push

{% endtabs %}

1.2 多级标题

{% tabs 分栏 %}

 # H1
 ## H2
 ### H3
 #### H4
 ##### H5
 ###### H6
见本文章标题!

{% endtabs %}

1.3 文字样式

{% tabs 分栏 %}

 <u>下划线演示</u>
 ​
 文字**加粗**演示
 ​
 文字*斜体*演示
 ​
 文本`高亮`演示
 ​
 文本~~删除~~线演示
 ​
 <font size = 5>5号字</font>
 <font face="黑体">黑体</font>
 <font color=blue>蓝色</font>
 ​
 <table><tr><td bgcolor=MistyRose>这里的背景色是:MistyRosen,此处输入任意想输入的内容</td></tr></table>
下划线演示

文字加粗演示

文字斜体演示

文本高亮演示

文本删除线演示

5号字 黑体 蓝色

这里的背景色是:MistyRosen,此处输入任意想输入的内容

{% endtabs %}

{% note info flat %}上述要点可参考:【Markdown语法】字体颜色大小及文字底色设置 {% endnote %}

1.4 引用

{% tabs 分栏 %}

 >  Java
 > 二级引用演示
 > MySQL
 > >外键
 > >
 > >事务
 > >
 > >**行级锁**(引用内部一样可以用格式)
 > 
 > ....

Java 二级引用演示 MySQL

外键

事务

行级锁(引用内部一样可以用格式)

....

{% endtabs %}

1.5 分割线

{% tabs 分栏 %}

 ---
 ***


{% endtabs %}

1.6 列表(*,+,-跟空格都可以)

1.6.1 无序列表

{% tabs 分栏 %}

 * Java
 * Python
 * ...
 ​
 + Java
 + Python
 + ...
 ​
 - Java
 - Python
 - ...
  • Java
  • Python
  • ...
  • Java
  • Python
  • ...
  • Java
  • Python
  • ...

{% endtabs %}

1.6.2 有序列表

{% tabs 分栏 %}

 # 注意后面有空格
 1. 
 2. 
 3. 
 4. 

{% endtabs %}

1.7 图片

{% tabs 分栏 %}

 # 本地图片
 <img src="/assets/pusheencode.webp" alt="示例图片" style="zoom:50%;" />
 # 在线图片
 ![code]()
本地图片: ![示例图片]() 在线图片: ![code](https://cdn.jsdelivr.net/gh/fomalhaut1998/markdown_pic/img/code.png)

{% endtabs %}

1.8 表格

{% tabs 分栏 %}

 | 项目标号 | 资金     | 备注 |
 | -------- | -------- | ---- |
 | 1        | 100000 | 无   |
 | 2        | 200000 | 无   |
 | 3        | 300,600  | 重要 |
项目标号资金备注
1100,000
2200,000
3300,600重要

{% endtabs %}

1.9 公式

{% tabs 分栏 %}

 $$
 \Gamma(z)=\int_0^\infty t^{z-1}e^{-t}dt.
 $$
Γ(z)=0tz1etdt.\Gamma(z)=\int_0^\infty t^{z-1}e^{-t}dt.

{% endtabs %}

2.外挂标签

2.1 行内文本样式 text

{% tabs 分栏 %}

 {% u 文本内容 %}
 {% emp 文本内容 %}
 {% wavy 文本内容 %}
 {% del 文本内容 %}
 {% kbd 文本内容 %}
 {% psw 文本内容 %}
 1. 带 {% u 下划线 %} 的文本
 2. 带 {% emp 着重号 %} 的文本
 3. 带 {% wavy 波浪线 %} 的文本
 4. 带 {% del 删除线 %} 的文本
 5. 键盘样式的文本 {% kbd command %} + {% kbd D %}
 6. 密码样式的文本:{% psw 这里没有验证码 %}
  1. 带 {% u 下划线 %} 的文本
  2. 带 {% emp 着重号 %} 的文本
  3. 带 {% wavy 波浪线 %} 的文本
  4. 带 {% del 删除线 %} 的文本
  5. 键盘样式的文本 {% kbd command %} + {% kbd D %}
  6. 密码样式的文本:{% psw 这里没有验证码 %}

{% endtabs %}

2.2 行内文本 span

{% tabs 分栏 %}

 {% span 样式参数(参数以空格划分), 文本内容 %}
  1. 字体: logo, code
  2. 颜色: red,yellow,green,cyan,blue,gray
  3. 大小: small, h4, h3, h2, h1, large, huge, ultra
  4. 对齐方向: left, center, right
 - 彩色文字
 在一段话中方便插入各种颜色的标签,包括:{% span red, 红色 %}、{% span yellow, 黄色 %}、{% span green, 绿色 %}、{% span cyan, 青色 %}、{% span blue, 蓝色 %}、{% span gray, 灰色 %}。
 - 超大号文字
 文档「开始」页面中的标题部分就是超大号文字。
 {% span center logo large, Volantis %}
 {% span center small, A Wonderful Theme for Hexo %}
  • 彩色文字 在一段话中方便插入各种颜色的标签,包括:{% span red, 红色 %}、{% span yellow, 黄色 %}、{% span green, 绿色 %}、{% span cyan, 青色 %}、{% span blue, 蓝色 %}、{% span gray, 灰色 %}。
  • 超大号文字 文档「开始」页面中的标题部分就是超大号文字。 {% span center logo large, Volantis %} {% span center small, A Wonderful Theme for Hexo %}

{% endtabs %}

2.3 段落文本 p

{% tabs 分栏 %}

 {% p 样式参数(参数以空格划分), 文本内容 %}
  1. 字体: logo, code
  2. 颜色: red,yellow,green,cyan,blue,gray
  3. 大小: small, h4, h3, h2, h1, large, huge, ultra
  4. 对齐方向: left, center, right
- 彩色文字
在一段话中方便插入各种颜色的标签,包括:{% p red, 红色 %}、{% p yellow, 黄色 %}、{% p green, 绿色 %}、{% p cyan, 青色 %}、{% p blue, 蓝色 %}、{% p gray, 灰色 %}。
- 超大号文字
文档「开始」页面中的标题部分就是超大号文字。
{% p center logo large, Volantis %}
{% p center small, A Wonderful Theme for Hexo %}
  • 彩色文字 在一段话中方便插入各种颜色的标签,包括:{% p red, 红色 %}、{% p yellow, 黄色 %}、{% p green, 绿色 %}、{% p cyan, 青色 %}、{% p blue, 蓝色 %}、{% p gray, 灰色 %}。
  • 超大号文字 文档「开始」页面中的标题部分就是超大号文字。 {% p center logo large, Volantis %} {% p center small, A Wonderful Theme for Hexo %}

{% endtabs %}

2.4 引用note

{% tabs 分栏 %}

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: simple
  icons: false
  border_radius: 3
  # 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
# 自带icon
{% note [class] [no-icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}
# 外部icon
{% note [color] [icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}

1.自带icon

参数用法
class【可选】标识,不同的标识有不同的配色 ( default / primary / success / info / warning / danger )
no-icon【可选】不显示 icon
style【可选】可以覆盖配置中的 style (simple/modern/flat/disabled)

2.外部icon

参数用法
class【可选】标识,不同的标识有不同的配色 ( default / blue / pink / red / purple / orange / green )
no-icon【可选】可配置自定义 icon (只支持 fontawesome 图标, 也可以配置 no-icon )
style【可选】可以覆盖配置中的 style (simple/modern/flat/disabled)

{% folding blue, 1.自带icon %} 1.simple样式

{% note simple %}默认 提示块标签{% endnote %}

{% note default simple %}default 提示块标签{% endnote %}

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

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

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

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

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

2.modern样式

{% note modern %}默认 提示块标签{% endnote %}

{% note default modern %}default 提示块标签{% endnote %}

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

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

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

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

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

3.flat样式

{% note flat %}默认 提示块标签{% endnote %}

{% note default flat %}default 提示块标签{% endnote %}

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

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

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

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

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

4.disabled样式

{% note disabled %}默认 提示块标签{% endnote %}

{% note default disabled %}default 提示块标签{% endnote %}

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

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

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

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

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

5.no-icon样式

{% note no-icon %}默认 提示块标签{% endnote %}

{% note default no-icon %}default 提示块标签{% endnote %}

{% note primary no-icon %}primary 提示块标签{% endnote %}

{% note success no-icon %}success 提示块标签{% endnote %}

{% note info no-icon %}info 提示块标签{% endnote %}

{% note warning no-icon %}warning 提示块标签{% endnote %}

{% note danger no-icon %}danger 提示块标签{% endnote %}

{% endfolding %}

{% folding blue, 2.外部icon %}

1.simple样式

{% note 'fab fa-cc-visa' simple %}你是刷 Visa 还是 UnionPay{% endnote %}

{% note blue 'fas fa-bullhorn' simple %}2021年快到了....{% endnote %}

{% note pink 'fas fa-car-crash' simple %}小心开车 安全至上{% endnote %}

{% note red 'fas fa-fan' simple%}这是三片呢?还是四片?{% endnote %}

{% note orange 'fas fa-battery-half' simple %}你是刷 Visa 还是 UnionPay{% endnote %}

{% note purple 'far fa-hand-scissors' simple %}剪刀石头布{% endnote %}

{% note green 'fab fa-internet-explorer' simple %}前端最讨厌的浏览器{% endnote %}

2.modern样式

{% note 'fab fa-cc-visa' modern %}你是刷 Visa 还是 UnionPay{% endnote %}

{% note blue 'fas fa-bullhorn' modern %}2021年快到了....{% endnote %}

{% note pink 'fas fa-car-crash' modern %}小心开车 安全至上{% endnote %}

{% note red 'fas fa-fan' modern%}这是三片呢?还是四片?{% endnote %}

{% note orange 'fas fa-battery-half' modern %}你是刷 Visa 还是 UnionPay{% endnote %}

{% note purple 'far fa-hand-scissors' modern %}剪刀石头布{% endnote %}

{% note green 'fab fa-internet-explorer' modern %}前端最讨厌的浏览器{% endnote %}

3.flat样式

{% note 'fab fa-cc-visa' flat %}你是刷 Visa 还是 UnionPay{% endnote %}

{% note blue 'fas fa-bullhorn' flat %}2021年快到了....{% endnote %}

{% note pink 'fas fa-car-crash' flat %}小心开车 安全至上{% endnote %}

{% note red 'fas fa-fan' flat%}这是三片呢?还是四片?{% endnote %}

{% note orange 'fas fa-battery-half' flat %}你是刷 Visa 还是 UnionPay{% endnote %}

{% note purple 'far fa-hand-scissors' flat %}剪刀石头布{% endnote %}

{% note green 'fab fa-internet-explorer' flat %}前端最讨厌的浏览器{% endnote %}

4.disabled样式

{% note 'fab fa-cc-visa' disabled %}你是刷 Visa 还是 UnionPay{% endnote %}

{% note blue 'fas fa-bullhorn' disabled %}2021年快到了....{% endnote %}

{% note pink 'fas fa-car-crash' disabled %}小心开车 安全至上{% endnote %}

{% note red 'fas fa-fan' disabled %}这是三片呢?还是四片?{% endnote %}

{% note orange 'fas fa-battery-half' disabled %}你是刷 Visa 还是 UnionPay{% endnote %}

{% note purple 'far fa-hand-scissors' disabled %}剪刀石头布{% endnote %}

{% note green 'fab fa-internet-explorer' disabled %}前端最讨厌的浏览器{% endnote %}

5.no-icon样式

{% note no-icon %}你是刷 Visa 还是 UnionPay{% endnote %}

{% note blue no-icon %}2021年快到了....{% endnote %}

{% note pink no-icon %}小心开车 安全至上{% endnote %}

{% note red no-icon %}这是三片呢?还是四片?{% endnote %}

{% note orange no-icon %}你是刷 Visa 还是 UnionPay{% endnote %}

{% note purple no-icon %}剪刀石头布{% endnote %}

{% note green no-icon %}前端最讨厌的浏览器{% endnote %}

{% endfolding %}

{% folding blue, 1.自带icon %} 1.simple样式 {% note simple %}默认 提示块标签{% endnote %}

{% note default simple %}default 提示块标签{% endnote %}

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

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

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

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

{% note danger simple %}danger 提示块标签{% endnote %} 2.modern样式 {% note modern %}默认 提示块标签{% endnote %}

{% note default modern %}default 提示块标签{% endnote %}

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

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

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

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

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

3.flat样式 {% note flat %}默认 提示块标签{% endnote %}

{% note default flat %}default 提示块标签{% endnote %}

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

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

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

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

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

4.disabled样式

{% note disabled %}默认 提示块标签{% endnote %}

{% note default disabled %}default 提示块标签{% endnote %}

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

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

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

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

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

5.no-icon样式

{% note no-icon %}默认 提示块标签{% endnote %}

{% note default no-icon %}default 提示块标签{% endnote %}

{% note primary no-icon %}primary 提示块标签{% endnote %}

{% note success no-icon %}success 提示块标签{% endnote %}

{% note info no-icon %}info 提示块标签{% endnote %}

{% note warning no-icon %}warning 提示块标签{% endnote %}

{% note danger no-icon %}danger 提示块标签{% endnote %}

{% endfolding %}

{% folding blue, 2.外部icon %}

1.simple样式

{% note 'fab fa-cc-visa' simple %}你是刷 Visa 还是 UnionPay{% endnote %}

{% note blue 'fas fa-bullhorn' simple %}2021年快到了....{% endnote %}

{% note pink 'fas fa-car-crash' simple %}小心开车 安全至上{% endnote %}

{% note red 'fas fa-fan' simple%}这是三片呢?还是四片?{% endnote %}

{% note orange 'fas fa-battery-half' simple %}你是刷 Visa 还是 UnionPay{% endnote %}

{% note purple 'far fa-hand-scissors' simple %}剪刀石头布{% endnote %}

{% note green 'fab fa-internet-explorer' simple %}前端最讨厌的浏览器{% endnote %}

2.modern样式

{% note 'fab fa-cc-visa' modern %}你是刷 Visa 还是 UnionPay{% endnote %}

{% note blue 'fas fa-bullhorn' modern %}2021年快到了....{% endnote %}

{% note pink 'fas fa-car-crash' modern %}小心开车 安全至上{% endnote %}

{% note red 'fas fa-fan' modern%}这是三片呢?还是四片?{% endnote %}

{% note orange 'fas fa-battery-half' modern %}你是刷 Visa 还是 UnionPay{% endnote %}

{% note purple 'far fa-hand-scissors' modern %}剪刀石头布{% endnote %}

{% note green 'fab fa-internet-explorer' modern %}前端最讨厌的浏览器{% endnote %}

3.flat样式

{% note 'fab fa-cc-visa' flat %}你是刷 Visa 还是 UnionPay{% endnote %}

{% note blue 'fas fa-bullhorn' flat %}2021年快到了....{% endnote %}

{% note pink 'fas fa-car-crash' flat %}小心开车 安全至上{% endnote %}

{% note red 'fas fa-fan' flat%}这是三片呢?还是四片?{% endnote %}

{% note orange 'fas fa-battery-half' flat %}你是刷 Visa 还是 UnionPay{% endnote %}

{% note purple 'far fa-hand-scissors' flat %}剪刀石头布{% endnote %}

{% note green 'fab fa-internet-explorer' flat %}前端最讨厌的浏览器{% endnote %}

4.disabled样式

{% note 'fab fa-cc-visa' disabled %}你是刷 Visa 还是 UnionPay{% endnote %}

{% note blue 'fas fa-bullhorn' disabled %}2021年快到了....{% endnote %}

{% note pink 'fas fa-car-crash' disabled %}小心开车 安全至上{% endnote %}

{% note red 'fas fa-fan' disabled %}这是三片呢?还是四片?{% endnote %}

{% note orange 'fas fa-battery-half' disabled %}你是刷 Visa 还是 UnionPay{% endnote %}

{% note purple 'far fa-hand-scissors' disabled %}剪刀石头布{% endnote %}

{% note green 'fab fa-internet-explorer' disabled %}前端最讨厌的浏览器{% endnote %}

5.no-icon样式

{% note no-icon %}你是刷 Visa 还是 UnionPay{% endnote %}

{% note blue no-icon %}2021年快到了....{% endnote %}

{% note pink no-icon %}小心开车 安全至上{% endnote %}

{% note red no-icon %}这是三片呢?还是四片?{% endnote %}

{% note orange no-icon %}你是刷 Visa 还是 UnionPay{% endnote %}

{% note purple no-icon %}剪刀石头布{% endnote %}

{% note green no-icon %}前端最讨厌的浏览器{% endnote %}

{% endfolding %}

{% endtabs %}

2.5 上标标签 tip

{% tabs 分栏 %}

{% tip [参数,可选] %}文本内容{% endtip %}
  1. 样式: success,error,warning,bolt,ban,home,sync,cogs,key,bell
  2. 自定义图标: 支持fontawesome。
{% tip %}default{% endtip %}
{% tip info %}info{% endtip %}
{% tip success %}success{% endtip %}
{% tip error %}error{% endtip %}
{% tip warning %}warning{% endtip %}
{% tip bolt %}bolt{% endtip %}
{% tip ban %}ban{% endtip %}
{% tip home %}home{% endtip %}
{% tip sync %}sync{% endtip %}
{% tip cogs %}cogs{% endtip %}
{% tip key %}key{% endtip %}
{% tip bell %}bell{% endtip %}
{% tip fa-atom %}自定义font awesome图标{% endtip %}
{% tip %}default{% endtip %} {% tip info %}info{% endtip %} {% tip success %}success{% endtip %} {% tip error %}error{% endtip %} {% tip warning %}warning{% endtip %} {% tip bolt %}bolt{% endtip %} {% tip ban %}ban{% endtip %} {% tip home %}home{% endtip %} {% tip sync %}sync{% endtip %} {% tip cogs %}cogs{% endtip %} {% tip key %}key{% endtip %} {% tip bell %}bell{% endtip %} {% tip fa-atom %}自定义font awesome图标{% endtip %}

{% endtabs %}

2.6 动态标签 anima

{% tabs 分栏 %}

{% tip [参数,可选] %}文本内容{% endtip %}
{% note info flat %}
  1. 将所需的CSS类添加到图标(或DOM中的任何元素)。
  2. 对于父级悬停样式,需要给目标元素添加指定CSS类,同时还要给目标元素的父级元素添加CSS类faa-parent animated-hover。(详情见示例及示例源码) You can regulate the speed of the animation by adding the CSS class or . faa-fastfaa-slow
  3. 可以通过给目标元素添加CSS类faa-fastfaa-slow来控制动画快慢。 {% endnote %} 1.On DOM load(当页面加载时显示动画)
{% tip warning faa-horizontal animated %}warning{% endtip %}
{% tip ban faa-flash animated %}ban{% endtip %}

2.调整动画速度

{% tip warning faa-horizontal animated faa-fast %}warning{% endtip %}
{% tip ban faa-flash animated faa-slow %}ban{% endtip %}

3.On hover(当鼠标悬停时显示动画)

{% tip warning faa-horizontal animated-hover %}warning{% endtip %}
{% tip ban faa-flash animated-hover %}ban{% endtip %}

4.On parent hover(当鼠标悬停在父级元素时显示动画)

{% tip warning faa-parent animated-hover %}<p class="faa-horizontal">warning</p>{% endtip %}
{% tip ban faa-parent animated-hover %}<p class="faa-flash">ban</p>{% endtip %}
1.On DOM load(当页面加载时显示动画) {% tip warning faa-horizontal animated %}warning{% endtip %} {% tip ban faa-flash animated %}ban{% endtip %} 2.调整动画速度 {% tip warning faa-horizontal animated faa-fast %}warning{% endtip %} {% tip ban faa-flash animated faa-slow %}ban{% endtip %} 3.On hover(当鼠标悬停时显示动画) {% tip warning faa-horizontal animated-hover %}warning{% endtip %} {% tip ban faa-flash animated-hover %}ban{% endtip %} 4.On parent hover(当鼠标悬停在父级元素时显示动画) {% tip warning faa-parent animated-hover %}

warning

{% endtip %} {% tip ban faa-parent animated-hover %}

ban

{% endtip %}

{% endtabs %}