使用 Markdown-it
来对 Hexo 的 Markdown 进行扩展。😃 😈 👍 💯 🚛
Hexo
默认的Markdown
渲染引擎不支持emoji
和自定义容器,我这里把它换成了 Markdown-it。
安装:
shellnpm un hexo-renderer-marked -S npm i hexo-renderer-markdown-it -S
在根目录下的_config.yml
文件最后添加以下配置项:
yml# Markdown-it config
markdown:
render:
html: true
xhtmlOut: false
breaks: true
linkify: true
typographer: true
quotes: '“”‘’'
plugins:
# hexo-renderer-markdown-it 自带几个插件
- markdown-it-abbr
- markdown-it-footnote
- markdown-it-ins
- markdown-it-sub
- markdown-it-sup
anchors:
level: 2
collisionSuffix: 'v'
permalink: true
permalinkClass: header-anchor
permalinkSymbol: ''
::: tip 配置信息可参考 Github - wiki :::
安装emoji
插件:
npm i markdown-it-emoji -S
编辑_config.yml
文件:
ymlmarkdown:
render:
html: true
xhtmlOut: false
breaks: true
linkify: true
typographer: true
quotes: '“”‘’'
plugins:
- markdown-it-abbr
- markdown-it-footnote
- markdown-it-ins
- markdown-it-sub
- markdown-it-sup
- markdown-it-emoji # 加上这一行
anchors:
level: 2
collisionSuffix: 'v'
permalink: true
permalinkClass: header-anchor
permalinkSymbol: ''
md 文件中输入
:tada: :100: :smile:
输出
:tada: :100: :smile:
::: warning
如果没有显示emoji
表情,可以先检查一下浏览器是否支持emoji
。
:::
需要安装插件:
shellnpm i markdown-it-container -S
配置:
yml# Markdown-it config
markdown:
render:
html: true
xhtmlOut: false
breaks: true
linkify: true
typographer: true
quotes: '“”‘’'
plugins:
- markdown-it-abbr
- markdown-it-footnote
- markdown-it-ins
- markdown-it-sub
- markdown-it-sup
- markdown-it-emoji
# 添加以下几行
- name: markdown-it-container
options: success
- name: markdown-it-container
options: tip
- name: markdown-it-container
options: warning
- name: markdown-it-container
options: danger
- name: markdown-it-container
options: custom-block
markdown-it-container
插件会在渲染.md
文件的时候,生成一个带特定类名的div
,把要提醒的区域包裹起来。
比如在.md
文件中输入以下:
::: success This is a success :::
渲染之后F12
查看Elements
,上面的代码html
结构如下:
html<div class="success">
<p>This is a success</p>
</div>
但是注意,此时的success
类名是我们自己定义的,所以还要添加自定义的css
样式代码!
styl// 文件路径:themes/hexo-theme-next/source/_custom/custom.styl // 自定义容器样式 .tip { padding-left: 10px; background-color rgba(52,152,219,.3); border-left 4px solid rgb(52,152,219); color: darken(rgb(52,152,219),20%); } .success { padding-left: 10px; background-color rgba(46,204,113,.3); border-left 4px solid rgb(46,204,113); color: darken(rgb(46,204,113),20%); } .warning { padding-left: 10px; background-color rgba(241,196,15,.3); border-left 4px solid rgb(241,196,15); color: darken(rgb(241,196,15),20%); } .danger { padding-left: 10px; background-color rgba(231,76,60,.3); border-left 4px solid rgb(231,76,60); color: darken(rgb(231,76,60),20%); }
::: warning 2020-2-1 更新 next 7.0 之后添加自定义样式请参考 973#issuecomment-511168511 :::
至此,在.md
文件中输入以下内容:
::: tip This is a tip ::: ::: success This is a success ::: ::: warning This is a warning ::: ::: danger This is a dangerous warning :::
效果:
::: tip This is a tip :::
::: success This is a success :::
::: warning This is a warning :::
::: danger This is a dangerous thing :::
目前还不支持自定义块中的标题:
::: danger STOP Danger zone, do not proceed :::
不过可以先使用#
代替:
::: danger ### STOP Danger zone, do not proceed :::
::: danger
Danger zone, do not proceed :::
配色来自:Flat UI
本文作者:青波
本文链接:
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!