4.MkDocs样式

学习

Admonitions(警告) - Material for MkDocs (wdk-docs.github.io)

提示 - Material for MkDocs 中文文档 (llango.com)

Buttons(按钮) - Material for MkDocs (wdk-docs.github.io)

建议去看这些网站,更为详细。


常用功能

便利贴

image

开启

markdown_extensions:- admonition #便利贴- pymdownx.details #块折叠- pymdownx.superfences #块嵌套

语法格式

!!! <样式> ["标题"]内容段落。

触发条件:用三个英文感叹号!!!​表示使用便利贴

样式:支持note、tip、Info等十多个样式。

标题样式:不写标题是默认,写""​是无标题。​​

范围:从!!!​起到第一个不缩进的行结束。

!!! tip示例文字:Admonition 扩展是标准 Markdown 库的一部分,与 Material for MkDocs 集成,可以通过以下方式启用:mkdocs.yml

样式预览

image

更多样式参考附录


Annotations(注解)

开启

markdown_extensions:- attr_list- md_in_html- pymdownx.superfences

演示

recording

按钮

开启

markdown_extensions:- attr_list # 按钮- pymdownx.emoji: # 图标、emojiemoji_index: !!python/name:materialx.emoji.twemojiemoji_generator: !!python/name:materialx.emoji.to_svg

语法

  • 默认按钮[标题](URL){按钮样式}

  • 带图标的按钮[标题 :图标样式:](URL){按钮样式}

是不是眼熟?就是在md的链接语法上添加了样式。示例

普通按钮
markdown [按钮标题](跳转URL){ .md-button } 主按钮
markdown [按钮标题](跳转URL){ .md-button .md-button--primary }带图标的按钮
markdown [按钮标题 :fontawesome-solid-paper-plane:](URL){: .md-button .md-button--primary }

演示(只能在静态网站中展示,CSDN等平台不支持)

普通按钮

灵魂io - 测试站{ .md-button }

主按钮

灵魂io - 测试站{ .md-button .md-button–primary }

带图标的按钮

灵魂io - 测试站 :fontawesome-solid-paper-plane:{ .md-button .md-button–primary }


代码块

启用

markdown_extensions:- pymdownx.highlight:  # 代码高亮anchor_linenums: true- pymdownx.inlinehilite- pymdownx.snippets- pymdownx.superfences- pymdownx.keys # 样式:键盘按键

代码块标题

image

效果

image

注释折叠、展开

image

效果

recording

代码块选项卡(用的是选项卡功能,不是代码块功能)

recording

高亮指定的行

image

键盘样式

image

以及导入外部文件

选项卡

开启

选项卡

markdown_extensions:- pymdownx.superfences- pymdownx.tabbed:alternate_style: true 

选项卡链接

theme:features:- content.tabs.link

写法 从===​开始,内容要缩进,遇到===​则合并选项卡,遇到既不是===​又不是缩进​的行则结束。

image

效果

recording

!!! note “选项卡的范围”
从第一个===​ 开始,缩进的行、空行、以===​ 开头的行都属于选项卡!


预览(仅支持静态网站,CSDN等平台不支持)

=== “C”

‍```c  
#include <stdio.h>int main(void) {  printf("Hello world!\n");  return 0;  
}  
‍```

=== “C++”

‍```c++  
#include <iostream>int main(void) {  std::cout << "Hello world!" << std::endl;  return 0;  
}  
‍```

=== “Tab 1”
Markdown content.

Multiple paragraphs.

=== “Tab 2”
More Markdown content.

- list item a  
- list item b

=== “Not Me”
Markdown content.

Multiple paragraphs.

===+ “Select Me”
More Markdown content.

- list item a  
- list item b

=== “Not Me Either”
Another Tab


清单

开启

markdown_extensions:- pymdownx.tasklist:         # 开启功能clickable_checkbox: true # 允许打勾和取消,但不是持续的。custom_checkbox: true    # 将task的方框修改为圆形。

编写

image

默认效果

image

custom_checkbox 效果

image

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/44083.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Gemma2——Google 新开源大型语言模型完整应用指南

0.引言 Gemma 2以前代产品为基础&#xff0c;提供增强的性能和效率&#xff0c;以及一系列创新功能&#xff0c;使其在研究和实际应用中都具有特别的吸引力。Gemma 2 的与众不同之处在于&#xff0c;它能够提供与更大的专有模型相当的性能&#xff0c;但其软件包专为更广泛的可…

hdfs大规模数据存储底层原理详解(第31天)

系列文章目录 一、HDFS设计原理 二、HDFS系统架构 三、HDFS关键技术 四、HDFS应用实例 五、解决HDFS不能处理小文件详解问题 文章目录 系列文章目录前言一、设计原理二、系统架构三、关键技术四、应用实例五、解决HDFS不能处理小文件详解问题1. 合并小文件2. 优化Hive配置3. 使…

DDR3 SO-DIMM 内存条硬件总结(一)

最近在使用fpga读写DDR3&#xff0c;板子上的DDR3有两种形式与fpga相连&#xff0c;一种是直接用ddr3内存颗粒&#xff0c;另一种是通过内存条的形式与fpga相连。这里我们正好记录下和ddr3相关的知识&#xff0c;先从DDR3 SO-DIMM 内存条开始。 1.先看内存条的版本 从JEDEC下载…

Mysql练习题目【7月10日更新】

七、Mysql练习题目 https://zhuanlan.zhihu.com/p/38354000 1. 创建表 创建学生表 mysql> create table if not exists student(-> student_id varchar(255) not null,-> student_name varchar(255) not null,-> birthday date not null,-> gender varchar(…

前端面试题33(实时消息传输)

前端实时传输协议主要用于实现实时数据交换&#xff0c;特别是在Web应用中&#xff0c;它们让开发者能够构建具有实时功能的应用&#xff0c;如聊天、在线协作、游戏等。以下是几种常见的前端实时传输协议的讲解&#xff1a; 1. Short Polling (短轮询) 原理&#xff1a;客户…

【1】A-Frame整体介绍

1.A-Frame是什么&#xff1f; A-Frame 是一个用于构建虚拟现实 (VR) 体验的 Web 框架。 A-Frame 基于 HTML 之上&#xff0c;因此上手简单。但 A-Frame 不仅仅是 3D 场景图或标记语言&#xff1b;它还是一种标记语言。其核心是一个强大的实体组件框架&#xff0c;为 Three.js …

Golang | Leetcode Golang题解之第226题翻转二叉树

题目&#xff1a; 题解&#xff1a; func invertTree(root *TreeNode) *TreeNode {if root nil {return nil}left : invertTree(root.Left)right : invertTree(root.Right)root.Left rightroot.Right leftreturn root }

uniapp+vue3嵌入Markdown格式

使用的库是towxml 第一步&#xff1a;下载源文件&#xff0c;那么可以git clone&#xff0c;也可以直接下载压缩包 git clone https://github.com/sbfkcel/towxml.git 第二步&#xff1a;设置文件夹内的config.js&#xff0c;可以选择自己需要的格式 第三步&#xff1a;安装…

UML 2.5图的分类

新书速览|《UML 2.5基础、建模与设计实践》新书速览|《UML 2.5基础、建模与设计实践 UML 2.5在UML 2.4.1的基础上进行了结构性的调整&#xff0c;简化和重新组织了 UML规范文档。UML规范被重新编写&#xff0c;使其“更易于阅读”&#xff0c;并且“尽可能减少前向引用”。 U…

LLM应用构建前的非结构化数据处理(三)文档表格的提取

1.学习内容 本节次学习内容来自于吴恩达老师的Preprocessing Unstructured Data for LLM Applications课程&#xff0c;因涉及到非结构化数据的相关处理&#xff0c;遂做学习整理。 本节主要学习pdf中的表格数据处理 2.环境准备 和之前一样&#xff0c;可以参考LLM应用构建前…

金蝶部署常见问题解决

金蝶部署常见问题解决 金蝶版本&#xff1a; Apusic Application Server Enterprise Edition 9.0 SP8 kbc build 202312041121 报错信息&#xff1a; 与金蝶官方人员沟通&#xff0c;发现lib包版本太低&#xff0c;升级后可正常使用。替换lib包后重启服务。 下载lib: 链接: …

西瓜杯CTF(1)

#下班之前写了两个题&#xff0c;后面继续发 Codeinject <?php#Author: h1xaerror_reporting(0); show_source(__FILE__);eval("var_dump((Object)$_POST[1]);"); payload 闭合后面的括号来拼接 POST / HTTP/1.1 Host: 1dc86f1a-cccc-4298-955d-e9179f026d54…

公司内部配置GitLab,通过SSH密钥来实现免密clone、push等操作

公司内部配置GitLab&#xff0c;通过SSH密钥来实现免密clone、push等操作。以下是配置SSH密钥以实现免密更新的步骤&#xff1a; 1.生成SSH密钥 在本地计算机上打开终端或命令提示符。输入以下命令以生成一个新的SSH密钥&#xff1a;ssh-keygen -t rsa -b 4096 -C "your…

VBA实现Excel数据排序功能

前言 本节会介绍使用VBA如何实现Excel工作表中数据的排序功能。 本节会通过下表数据内容为例进行实操&#xff1a; 1. Sort 单列排序 语法&#xff1a;Sort key1,Order1 说明&#xff1a; Key1&#xff1a;表示需要按照哪列进行排序 Order1&#xff1a;用来指定是升序xlAsce…

D2D用户的功率优化算法研究

D2D通信技术是指两个对等的用户节点之间直接进行通信的一种通信方式。在由D2D通信用户组成的分布式网络中&#xff0c;每个用户节点都能发送和接收信号&#xff0c;并具有自动路由(转发消息)的功能。网络的参与者共享它们所拥有的一部分硬件资源&#xff0c;包括信息处理、存储…

短视频矩阵搭建,用云微客获客更方便

你的同行都爆单了&#xff0c;你还在问什么是矩阵&#xff1f;让我来告诉你。短视频矩阵是短视频获客的一种全新玩法&#xff0c;是以品牌宣传、产品推广为核心的一个高端布局手段&#xff0c;也是非常省钱的一种方式。 1.0时代&#xff0c;一部手机一个账号&#xff1b;2.0时代…

GD 32中断系统实现

1.0 中断的概念 中断&#xff1a;简单来说就是打断的意思&#xff0c;在计算机系统中CPU在执行一个操作的时候&#xff0c;有一个比当前任务更为紧急的任务需要执行,cpu暂停当前任务转而去执行更为紧急任务的操作&#xff0c;执行完更为紧急任务之后再返回来执行原来未执行完的…

高铁站客运枢纽IPTV电视系统-盐城高铁站西广场IP电视系统应用浅析

高铁站客运枢纽IPTV电视系统-盐城高铁站西广场IP电视系统应用浅析 由北京海特伟业科技有限公司任洪卓于2024年7月9日发布 随着科技的飞速发展&#xff0c;特别是“互联网”战略的深入推进&#xff0c;高铁站客运枢纽的信息化建设成为提升服务质量、增强乘客体验的重要手段。盐…

【1.3】动态规划-解码方法

一、题目 一条包含字母A-Z的消息通过以下映射进行了编码&#xff1a; A -> 1 B -> 2 ... Z -> 26 要解码已编码的消息&#xff0c;所有数字必须基于上述映射的方法&#xff0c;反向映射回字母&…

新能源汽车充电站远程监控系统S275钡铼技术无线RTU

新能源汽车充电站的远程监控系统在现代城市基础设施中扮演着至关重要的角色&#xff0c;而钡铼技术的S275无线RTU作为一款先进的物联网数据监测采集控制短信报警终端&#xff0c;为充电站的安全运行和高效管理提供了强大的技术支持。 技术特点和功能 钡铼S275采用了基于UCOSI…