快来美化你的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、图片、数学公式等。总之,很强大。

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


相关文章
|
存储 算法 编译器
【Linux 应用开发 】交叉编译的浮点数处理问题:从表象到底层原理的探索与解决
【Linux 应用开发 】交叉编译的浮点数处理问题:从表象到底层原理的探索与解决
424 1
|
存储 SQL Cloud Native
深入了解云原生数据库CockroachDB的概念与实践
作为一种全球领先的分布式SQL数据库,CockroachDB以其高可用性、强一致性和灵活性等特点备受关注。本文将深入探讨CockroachDB的概念、设计思想以及实践应用,并结合实例演示其在云原生环境下的优越表现。
|
Shell
百度搜索:蓝易云【Ros终端出现找不到bash: /home/***/devel/setup.bash: 没有那个文件或目录怎么办?】
通过以上步骤,您应该能够解决 "找不到bash: /home/ *** /devel/setup.bash: 没有那个文件或目录" 错误,并正常使用ROS环境。如果问题仍然持续存在,建议您检查您的ROS安装和配置,并参考ROS官方文档或ROS社区寻求帮助。
857 0
ArcGIS:解决ArcGIS一添加数据就闪退的问题.
ArcGIS:解决ArcGIS一添加数据就闪退的问题.
988 0
|
API 调度 C语言
C++实现进程调度模拟程序——哲学家进餐问题
C++实现进程调度模拟程序——哲学家进餐问题
650 0
|
前端开发 JavaScript 安全
探索 JAMstack 架构:现代Web开发的新范式
【10月更文挑战第20天】JAMstack(JavaScript、APIs、Markup)架构是一种现代Web开发方法,通过预构建静态页面、动态功能通过APIs实现和依赖JavaScript,提供高性能、安全和可扩展的Web开发新范式。本文深入探讨其核心理念、优势、工具和最佳实践,帮助开发者理解和应用JAMstack。
|
资源调度
机器人学 markdown数学公式常用语法
本文提供了Markdown中数学公式的常用语法,包括行内公式、行间公式、基本运算、矩阵、微积分、大小比较、开根号、表格、角标、头顶标、空格、括号、特殊字符、分式、文字、希腊字母以及分类括号的详细使用方法和示例。
723 1
|
开发框架 前端开发 JavaScript
前端框架Layui的使用讲解(Layui搭建登录注册页面)(一)
前端框架Layui的使用讲解(Layui搭建登录注册页面)
1105 0
|
弹性计算
阿里云马来西亚服务器租赁费用、吉隆坡公网带宽收费价格整理
阿里云马来西亚(吉隆坡)服务器提供多种配置如2核2G至16核64G等, 实例规格涵盖经济型e、通用算力型u1等。示例价格:2核2G经济型e约56.53元/月, 4核32G通用算力型u1约809.62元/月。公网带宽预付费价格从1Mbps起22元/月, 按量付费0.529元/GB。
576 1
|
开发者 图形学 C#
深度解密:Unity游戏开发中的动画艺术——Mecanim状态机如何让游戏角色栩栩如生:从基础设置到高级状态切换的全面指南,助你打造流畅自然的游戏动画体验
【8月更文挑战第31天】Unity动画系统是游戏开发的关键部分,尤其适用于复杂角色动画。本文通过具体案例讲解Mecanim动画状态机的使用方法及原理。我们创建一个游戏角色并设计行走、奔跑和攻击动画,详细介绍动画状态机设置及脚本控制。首先导入动画资源并添加Animator组件,然后创建Animator Controller并设置状态间的转换条件。通过编写C#脚本(如PlayerMovement)控制动画状态切换,实现基于玩家输入的动画过渡。此方法不仅适用于游戏角色,还可用于任何需动态动画响应的对象,增强游戏的真实感与互动性。
766 0

热门文章

最新文章