title: Markdown在Next下的高级书写 tags:

Bolg categories: Bolg abbrlink: 73564

{% note info %} 本文中列出了Next特殊的Markdown渲染格式，在其他环境写作时不一定支持。若想在不支持的环境下使用，可以在对应的环境中修改主题对应的css样式：把next主题中的这种标签的css样式复制到环境下的css源码中，这样就可以在自己使用的写作环境中支持了 {% endnote %}

{% tabs 演示, 2 %} 注意要点

Next下的note标签

0、note格式

{% note [class] [no-icon] %}
这里写你需要写的内容
{% endnote %}

// 注意上面的class和no-icon属性是可以选择的
[class]   : default | primary | success | info | warning | danger.
[no-icon] : Disable icon in note.

1、没有定义样式类别

{% note %}
(没有定义样式类别)
{% endnote %}

{% note %} (没有定义样式类别) {% endnote %}

2、默认的类别

{% note default %}
默认形式的类别
{% endnote %}

{% note default %} 默认形式的类别 {% endnote %}

3、primary形式的类别

{% note primary %}
首要类型形式
{% endnote %}

{% note primary %} 首要类型形式 {% endnote %}

4、info形式的类别

{% note info %}
info形式的类别
{% endnote %}

{% note info %} info形式的类别 {% endnote %}

5、success形式的类别

{% note success %}
success形式的类别
{% endnote %}

{% note success %} success形式的类别 {% endnote %}

6、warning形式的类别

{% note warning %}
warning形式的类别
{% endnote %}

{% note warning %} warning形式的类别 {% endnote %}

7、danger形式的类别

{% note danger %}
danger形式的类别
{% endnote %}

{% note danger %} danger形式的类别 {% endnote %}

8、无图标形式的note标签

{% note info no-icon %}
没有图标的note标签
{% code %}
code block in note tag
code block in note tag
code block in note tag
{% endcode %}
{% endnote %}

{% note info no-icon %} 没有图标的note标签 {% code %} code block in note tag code block in note tag code block in note tag {% endcode %} {% endnote %}

9、无图标形式的success标签

{% note success %}
在note中插入代码块
{% code %}
code block in note tag
code block in note tag
code block in note tag
{% endcode %}
{% endnote %}

{% note success %} 在note中插入代码块 {% code %} code block in note tag code block in note tag code block in note tag {% endcode %} {% endnote %}

10、note标签中插入有序无序列表

{% note default %}
在note中放入无序、有序列表
* ul
* ul
* ul

1\. ol
2\. ol
3\. ol
{% endnote %}

{% note default %} 在note中放入无序、有序列表

ul
ul
ul
ol
ol
ol {% endnote %}

11、note标签中插入表格
```
{% note default %}
| 1 | 2 |
| - | - |
| 3 | 4 |
| 5 | 6 |
| 7 | 8 |
{% endnote %}
```
{% note default %} | 1 | 2 | | - | - | | 3 | 4 | | 5 | 6 | | 7 | 8 | {% endnote %}

Next下的note标签(HTML)
```
<div class="note default"><p>default</p></div>
```
default

<div class="note primary"><p>primary</p></div>

primary

<div class="note success"><p>success</p></div>

success

<div class="note info"><p>info</p></div>

info

<div class="note warning"><p>warning</p></div>

warning

<div class="note danger"><p>danger</p></div>

danger

<div class="note danger no-icon"><p>danger no-icon</p></div>

danger no-icon

FontAwesome图标优化

支持 Markdown Hexo 支持 GitHub Flavored Markdown 的所有功能，甚至可以整合 Octopress 的大多数插件。
一件部署 只需一条指令即可部署到 GitHub Pages，或其他网站。
丰富的插件 Hexo 拥有强大的插件系统，安装插件可以让 Hexo 支持 Jade，CoffeeScript。

源码：

1\. <i class="fa fa-pencil"></i> 支持 Markdown
   <i>Hexo 支持 GitHub Flavored Markdown 的所有功能，甚至可以整合 Octopress 的大多数插件。</i>
2\. <i class="fa fa-cloud-upload"></i> 一件部署
   <i>只需一条指令即可部署到 GitHub Pages，或其他网站。</i>
3\. <i class="fa fa-cog"></i> 丰富的插件
   <i>Hexo 拥有强大的插件系统，安装插件可以让 Hexo 支持 Jade，CoffeeScript。</i>
   采用的是 Font Awesome 的图标，下面给出一些简单的使用例子，更多请查看官网的使用示例。

采用的是 Font Awesome 的图标，下面给出一些简单的使用例子，更多请查看官网的使用示例。

- <i class="fa fa-pencil"></i> 铅笔
- <i class="fa fa-cloud-upload"></i> 上传
- <i class="fa fa-download"></i> 下载

铅笔
上传
下载 ```
下载
下载变大 33%
下载两倍大 ```
下载
下载变大 33%
下载两倍大

diff语言完成代码块内部样式高亮

Next主题其实是自带代码块高亮显示的，但是有另外一种好玩的代码块高亮写法，叫diff语言 ```diff highlight: enable: true line_number: true

代码自动高亮
auto_detect: false

auto_detect: true

只需要在markdown语法代码块的语言选择处写上`diff`即可，然后在相应代码前面加上`-`和`+`就行了。不过默认的`-`是绿色，`+`是红色，与 GitHub 上相反，也可以自己修改成Github上样式。

// 文章```代码块diff样式 pre .addition { background: #e6ffed; } pre .deletion { background: #ffeef0; }

当然，要是你不满意顶部的文字样式，也可以自己在`custom.styl`自定义：

// 文章代码块顶部样式 .highlight figcaption { margin: 0em; padding: 0.5em; background: #eee; border-bottom: 1px solid #e9e9e9; } .highlight figcaption a { color: rgb(80, 115, 184); }

文本居中引用

效果： {% cq %} 人生乃是一面镜子，从镜子里认识自己，我要称之为头等大事，也只是我们追求的目的！ {% endcq %}

{% cq %}
人生乃是一面镜子，
从镜子里认识自己，
我要称之为头等大事，
也只是我们追求的目的！
{% endcq %}

Next下的label标签

首先需要在Next主题_config.xml中配置：

# Label tag.
label: true

然后效果如下（@ 前面的是label的名字，后面的是要显示的文字）：

{% label default@default %}

{% label default@default %}

{% label primary@primary %}

{% label primary@primary %}

{% label success@success %}

{% label success@success %}

{% label info@info %}

{% label info@info %}

{% label warning@warning %}

{% label warning@warning %}

{% label danger@danger %}

{% label danger@danger %}

Next下的tabs标签

效果： {% tabs 选项卡, 2 %} 这是选项卡 1 11111 这是选项卡 2 22222 这是选项卡 3 33333 {% endtabs %} 源码：

{% tabs 选项卡, 2 %}
<!-- tab 自定义名1-->
**这是选项卡 1** 11111
<!-- endtab -->
<!-- tab 自定义名2-->
**这是选项卡 2** 22222
<!-- endtab -->
<!-- tab 自定义名3-->
**这是选项卡 3** 33333
<!-- endtab -->
{% endtabs %}

首先还是需要在Next主题配置文件中配置

# Tabs tag.
tabs:
  enable: true
  transition:
    tabs: true
    labels: true
  border_radius: 0

然后上面源码中, 2表示一开始在第二个选项卡，非必须，若数值为-1则隐藏选项卡内容。更多用法请查看这个页面。

Next下的样式按钮

效果： {% btn https://www.baidu.com, 点击下载百度, download fa-lg fa-fw %}

源码：

{% btn https://www.baidu.com, 点击下载百度, download fa-lg fa-fw %}

关于按钮的更多使用可以前往这个页面查看。

页面内锚点

在需要跳转的位置添加锚点

 <span id="jump">跳转到的地方</span>

在需要点击跳转的位置，使用上面的id，格式类似超链接的形式：
```
 [点击跳转](#jump)
```
如目录语法为：
```
 [MarkDown页面内跳转测试](#jump)
```

下面实际目录语法为：

 <span id="jump">MarkDown页面内跳转测试</span>

例子：

```

标题

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

## <span id="jump5">注意事项</span>
内容`必须`要跟note标签`不在`一行：
{% note success %}

{% note danger %} note text, note text, note text note text, note text, note text note text, note text, note text {% endnote %}

{% endnote %}
错误演示：
{% note danger %}

{% note danger %}note text, note text, note text{% endnote %}

{% endnote %}
{% note danger %}

{% note danger %}note text note text note text {% endnote %}

{% endnote %}
# <span id="jump3">个人常用格式</span>

```

{% tabs 选项卡, 2 %} 这是选项卡 1 内容1 这是选项卡 2 内容2 这是选项卡 3 内容3 {% endtabs %}

Markdown在Next下的高级书写

Next下的note标签

0、note格式

1、没有定义样式类别

2、默认的类别

3、primary形式的类别

4、info形式的类别

5、success形式的类别

6、warning形式的类别

7、danger形式的类别

8、无图标形式的note标签

9、无图标形式的success标签

10、note标签中插入有序无序列表

11、note标签中插入表格

Next下的note标签(HTML)

FontAwesome图标优化

diff语言完成代码块内部样式高亮

代码自动高亮

文本居中引用

Next下的label标签

Next下的tabs标签

Next下的样式按钮

页面内锚点

标题

目录

1. 目录1

2. 目录2

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.

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.

目录

1. 目录1

2. 目录2

Markdown在Next下的高级书写

Next下的note标签

0、note格式

1、没有定义样式类别

2、默认的类别

3、primary形式的类别

4、info形式的类别

5、success形式的类别

6、warning形式的类别

7、danger形式的类别

8、无图标形式的note标签

9、无图标形式的success标签

10、note标签中插入有序无序列表

11、note标签中插入表格

Next下的note标签(HTML)

FontAwesome图标优化

diff语言完成代码块内部样式高亮

代码自动高亮

文本居中引用

Next下的label标签

Next下的tabs标签

Next下的样式按钮

页面内锚点

标题

目录

1. 目录1

2. 目录2

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.

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.

目录

1. 目录1

2. 目录2

相关推荐

DYBLOG-专注内容创作