Markdown在Next下的高级书写


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图标优化

  1. 支持 Markdown Hexo 支持 GitHub Flavored Markdown 的所有功能,甚至可以整合 Octopress 的大多数插件。
  2. 一件部署 只需一条指令即可部署到 GitHub Pages,或其他网站。
  3. 丰富的插件 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 [email protected] %}

{% label [email protected] %}

{% label [email protected] %}

{% label [email protected] %}

{% label [email protected] %}

{% label [email protected] %}

{% label [email protected] %}

{% label [email protected] %}

{% label [email protected] %}

{% label [email protected] %}

{% label [email protected] %}

{% label [email protected] %}

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>

    例子:

    ```

    标题


目录

  1. 目录1
  2. 目录2

1. 目录1


2. 目录2

 ## <span id="jump4">note标签的官方文档使用</span>
首先我们需要在Next主题`_config.xml`中设置一下功能开关,有些默认是开的,有些默认是关的:

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

## <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 %}

目录

  1. 目录1
  2. 目录2 文章末尾

1. 目录1


2. 目录2


文章末尾

``````

发表评论 / Comment

用心评论~