MD技巧

发表于 更新于 分类于
搭配hexo使用的一些md技巧

MD技巧

基于hexo-theme-next-8.0.2自带的hexo插件实现

在hexo这个框架下可以使用的一些特别的md排版技巧，这里用的next默认自带的插件，如果你这么写了却无效，那是因为你的hexo主题没有默认安装对应的依赖插件，可以搜索对应的hexo插件并使用npm安装。

对了，这里用到了大量的{{}}，{% %}这种hexo无法转义的字符。如果会出现hexo g或者hexo s报错的情况，考虑你的文档里是否存在{% %}这样单独的，没有写成一对{% %}{% %}的语法。

mathjax公式

在yaml配置文件里打开开关：

一般数学公式用mathjax就行了，katex专业排论文的，关于katex，我以后会开一篇帖子记录一下语法。

mathjax项目地址：https://github.com/mathjax/MathJax

katex项目地址：https://github.com/KaTeX/KaTeX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# Math Formulas Render Support
# Warning: Please install / uninstall the relevant renderer according to the documentation.
# See: https://theme-next.js.org/docs/third-party-services/math-equations
# Server-side plugin: https://github.com/next-theme/hexo-filter-mathjax
math:
  # Default (false) will load mathjax / katex script on demand.
  # That is it only render those page which has `mathjax: true` in front-matter.
  # If you set it to true, it will load mathjax / katex srcipt EVERY PAGE.
  every_page: true

  mathjax:
    enable: true

  katex:
    enable: false
    # See: https://github.com/KaTeX/KaTeX/tree/master/contrib/copy-tex
    copy_tex: false

mathjax语法看这里：markdown中公式编辑教程 - 简书 (jianshu.com)，比较多，就不复制粘贴了。跳转页面预览：

更多介绍公式语法的博客：

Mathjax公式教程_dabokele的博客

基本数学公式语法(of MathJax)_树屋Treehouse-CSDN博客

常用数学符号的LaTeX表示方法_小龙在线

iframe的响应式

1
2
3
4
5
6
7
8
9
10
<iframe id="m4_iframe" 
        src="https://www.jianshu.com/p/25f0139637b7" 
        scrolling="yes" 
        frameborder="no" 
        width=100%> 
</iframe>
<script type="text/javascript">  
	document.getElementById("m4_iframe").style.height
        =document.getElementById("m4_iframe").scrollWidth*0.76+"px";
</script>

Center-quote引用

md写法：

1
{% centerquote %}Quote1{% endcenterquote %}

可以简写为

1
{% cq %}Quote2{% endcq %}

呈现效果：

may the flame guide thee

Button按钮

基础写法：

1
{% button #, Text,Icons %}

{% btn 链接, 按钮名称, 本地图标 %}

md:

1
2
3
4
{% btn https://example.com/sample.pdf,1%}
{% btn #,Ⅱ%}
{% btn #,叁,fa fa-heart%}
{% btn #,,fa fa-heart%}

呈现效果：

1 Ⅱ 叁

Group-pictures图片组

next主题默认开启此功能。
md里这么写：

1
2
3
4
5
{% grouppicture m4-1 %}
  ![](http://www.example.com/pic1.png)
  ![](http://www.example.com/pic2.png)
  ![](http://www.example.com/pic3.png)
{% endgrouppicture %}

Video视频

md:

1
{% video https://example.com/sample.mp4 %}

呈现效果：

PDF文档

yaml配置文件设置了默认高度为1000px，在具体使用的时候可以自定大小覆盖。

1
2
3
4
5
6
7
8
# PDF tag
# NexT will try to load pdf files natively, if failed, pdf.js will be used.
# So, you have to install the dependency of pdf.js if you want to use pdf tag and make it available to all browsers.
# Dependencies: https://github.com/next-theme/theme-next-pdf
pdf:
  enable: true
  # Default height
  height: 1000px

md:

1
{% pdf https://example.com/sample.pdf 600px %}

呈现效果:

Note便签

在Next的主题配置文件里：

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: true
  # 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

md可以这么写：

1
2
3
4
5
6
{% note default %}default{% endnote %}
{% note primary %}primary{% endnote %}
{% note success %}success{% endnote %}
{% note info %}info{% endnote %}
{% note warning %}warning{% endnote %}
{% note danger %}danger{% endnote %}

呈现效果：

default

primary

success

info

warning

danger

这里icons开关已经设置成打开了，如果想不带图标，可以这么写：

1
{% note info no-icon %}info{% endnote %}

info

Tabs标签

yaml设置：

1
2
3
4
5
# Tabs tag
tabs:
  transition:
    tabs: true
    labels: true

文档说明：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% tabs Unique name, [index] %}
<!-- tab [Tab caption] [@icon] -->
Any content (support inline tags too).
<!-- endtab -->
{% endtabs %}

Unique name   : Unique name of tabs block tag without comma.
                Will be used in #id's as prefix for each tab with their index numbers.
                If there are whitespaces in name, for generate #id all whitespaces will replaced by dashes.
                Only for current url of post/page must be unique!
[index]       : Index number of active tab.
                If not specified, first tab (1) will be selected.
                If index is -1, no tab will be selected. It's will be something like spoiler.
                Optional parameter.
[Tab caption] : Caption of current tab.
                If not caption specified, unique name with tab index suffix will be used as caption of tab.
                If not caption specified, but specified icon, caption will empty.
                Optional parameter.
[@icon]       : FontAwesome icon name (without 'fa-' at the begining).
                Can be specified with or without space; e.g. 'Tab caption @icon' similar to 'Tab caption@icon'.
                Optional parameter.

注意这里的<!-- tab -->并非省略，而是起到了标志的作用；此处的逗号是英文格式。

  • 写法1：

参数默认，展开一项：

1
2
3
4
5
6
7
8
9
10
11
{% tabs First unique name %}
<!-- tab -->
This is Tab 1
<!-- endtab -->
<!-- tab -->
This is Tab 2
<!-- endtab -->
<!-- tab -->
This is Tab 3
<!-- endtab -->
{% endtabs %}

呈现效果：

This is Tab 1

This is Tab 2

This is Tab 3

  • 写法2：

添加标签名称，-1表示折叠，2表示展开第二项：

1
2
3
4
5
6
7
8
9
10
11
{% tabs 标签集,-1 %}
<!-- tab one -->
This is Tab 1
<!-- endtab -->
<!-- tab Ⅱ -->
This is Tab 2
<!-- endtab -->
<!-- tab 叁-->
This is Tab 3
<!-- endtab -->
{% endtabs %}

折叠呈现效果：

This is Tab 1

This is Tab 2

This is Tab 3

  • 写法3：

-1改为2，默认显示第二项；注意每个tab集的名称id需要是独一无二的，将标签集改为标签集2：

1
2
3
{% tabs 标签集2,2%}
...
{% endtabs %}

默认打开第二项：