快来美化你的MKDocs吧

简介: 快来美化你的MKDocs吧

前言


前面我们介绍过 MKDocs 的基础用法(MKDocs 入门)。很多同学都表示非常香,但是默认的主题不够美观,虽然我们可以通过内置的 readthedocs 主题来改善,但是还不够美,今天我们就一起来尝试一款比较现代的 MKDocs 主题 material


关于 material


material 主题是基于 MKDocs 的面向现代化技术文档网站的一个主题,非常的漂亮。


网络异常,图片无法展示
|


呆猫


首先我们 mkdocs init 初始化一个 MKDocs 项目。


网络异常,图片无法展示
|


然后我们 pip install mkdocs-material 下载 material 主题。


最后我们启动项目时指定主题为 material


网络异常,图片无法展示
|


网络异常,图片无法展示
|


网络异常,图片无法展示
|


怎么样,相比 readthedocsmaterial 的效果还是比较清新现代的。


material 配置


通常我们会将主题配置到 mkdocs.yaml 中,而非命令行指定。

所以我们需要将主题和 markdown 的高亮配置写到配置文件中。


site_name: My Docs
theme:
  name: material
markdown_extensions:
  - pymdownx.highlight:
      anchor_linenums: true
  - pymdownx.inlinehilite
  - pymdownx.snippets
  - pymdownx.superfences
复制代码


配置主题到 mkdocs.yaml 后,启动服务不需要指定主题了。直接 mkdocs serve 即可


代码高亮和标题


material 不但支持代码高亮还支持代码标题。


```python title='demo.py'
def sayhi():
    return "hi,Python全栈开发"
```
复制代码


网络异常,图片无法展示
|


不但如此,material 还支持代码自由注释,并且交互良好。


```python title='demo.py'
def sayhi():
    return "hi,Python全栈开发" # (1)
```
1. 这是我自由注释的内容,欢迎关注我的公众号。
复制代码


网络异常,图片无法展示
|


好看的提示框


提示框的配置:


markdown_extensions:
  - admonition
  - pymdownx.details
  - pymdownx.superfences
theme:
  icon:
    admonition:
      note: octicons/tag-16
      abstract: octicons/checklist-16
      info: octicons/info-16
      tip: octicons/squirrel-16
      success: octicons/check-16
      question: octicons/question-16
      warning: octicons/alert-16
      failure: octicons/x-circle-16
      danger: octicons/zap-16
      bug: octicons/bug-16
      example: octicons/beaker-16
      quote: octicons/quote-16
复制代码


md 内容:


!!! note "这是 note 类型的提示框"
提示:更多精彩内容记得关注我啊
!!! success "这是 success 类型的提示框"
成功!
!!! failure "这是 failure 类型的提示框"
失败!
!!! bug "这是 bug 类型的提示框"
发现一个 bug,请尽快修复!
复制代码


网络异常,图片无法展示
|


对于提示框中很多内容的场景,该如何处理呢?material 支持提示框的折叠。


!!! --> ??? 即可。


md 内容:


??? note "这是 note 类型的提示框"
提示:更多精彩内容记得关注我啊
    第二行
    第三行
    第四行
    第五行
    ...
复制代码


网络异常,图片无法展示
|


更多内容:material 官方文档


最后


以上 material 只展示了部分功能,material 还支持单词缩写、按钮、数据表格、mermaid、锚、字符格式化、EmojiIcon、图片、数学公式等。总之,很强大。

最后,希望我的分享能够对你有所帮助!


相关文章
|
Python
Markdown 拓展-Docsify 主题美化
docsify-themeable - A delightfully simple theme system for docsify.js https://jhildenbiddle.github.io/docsify-themeable/#/
1266 0
SublimeText配置Markdown编辑及预览
本文详细介绍了如何配置Sublime Text及相关插件,使之成为Markdown编辑器并且能够在浏览器中实现预览功能。
|
6月前
|
Web App开发 移动开发 搜索推荐
常见的Markdown在线编辑器
在线Markdown编辑器提供了更加稳定和流畅的用户体验。用户无需下载安装任何软件,只需打开浏览器,即可在任何设备上轻松使用这款编辑器,实现随时随地的写作。基于HTML5的在线Markdown编辑器可实现即时的编辑和预览功能
103 2
|
6月前
vscode快捷HTML结构 | Emmet
vscode快捷HTML结构 | Emmet
45 1
|
JavaScript 小程序 开发工具
WebStorm中如何设置wepy文件代码高亮
WebStorm中如何设置wepy文件代码高亮
112 0
|
图形学 UED
GLTF在线编辑器
GLTF在线编辑器提供了一系列功能,支持对GLTF模型的在线查看、材质修改、模型大小修改、模型网格属性修改、重置原点、模型合批等功能
357 0
Hugo教程#3单页面布局
上集我们学习了如何创建一个index的布局,那么是不是所有的页面都要创建一个布局,那肯定不是的,那样的话实在太麻烦,因为只显对应页面的markdown里面的内容,所以创建一个single.html布局就可以了,所有的页面都可以使用这个布局
86 0
|
Rust JavaScript 前端开发
【Neovim】配置美化完整流程
【Neovim】配置美化完整流程
5727 0
【Neovim】配置美化完整流程
butterfly主题的下载及美化
butterfly主题的下载及美化
202 0