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.pswp.cn/diannao/44083.shtml
繁體地址,請注明出處:http://hk.pswp.cn/diannao/44083.shtml
英文地址,請注明出處:http://en.pswp.cn/diannao/44083.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Linux筆記之iftop查看特定IP地址吞吐量

Linux筆記之iftop查看特定IP地址吞吐量 code review! 文章目錄 Linux筆記之iftop查看特定IP地址吞吐量一.iftop安裝與監控二.iftop 界面簡單介紹如何查看單位實時流量的顯示形式控制單位顯示示例 三.數據存儲和傳輸的單位&#xff1a;比特&#xff08;bit&#xff09;和字節&…

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 }

AI機器人在未來的應用場景預測:是否會取代人類?華為、百度、特斯拉他們在AI領域都在做什么?

引言 隨著人工智能&#xff08;AI&#xff09;技術的飛速發展&#xff0c;AI機器人在各個領域的應用變得越來越普遍。從工業自動化到日常生活&#xff0c;AI機器人已經開始展現出強大的潛力和實際應用價值。本文將深入探討AI機器人在未來的應用場景&#xff0c;并分析它們是否…

uniapp+vue3嵌入Markdown格式

使用的庫是towxml 第一步&#xff1a;下載源文件&#xff0c;那么可以git clone&#xff0c;也可以直接下載壓縮包 git clone https://github.com/sbfkcel/towxml.git 第二步&#xff1a;設置文件夾內的config.js&#xff0c;可以選擇自己需要的格式 第三步&#xff1a;安裝…

大模型/NLP/算法面試題總結3——BERT和T5的區別?

1、BERT和T5的區別&#xff1f; BERT和T5是兩種著名的自然語言處理&#xff08;NLP&#xff09;模型&#xff0c;它們在架構、訓練方法和應用場景上有一些顯著的區別。以下是對這兩種模型的詳細比較&#xff1a; 架構 BERT&#xff08;Bidirectional Encoder Representation…

【Web前端】JWT(JSON Web Tokens)概述

1、簡介 JWT&#xff08;JSON Web Tokens&#xff09;是一種用于雙方之間安全傳輸信息的簡潔的、URL安全的令牌標準。 它基于JSON對象&#xff0c;并通過數字簽名確保其完整性和真實性。 JWT因其小巧、自包含以及易于在客戶端和服務器之間傳輸的特性而被廣泛使用于身份驗證和…

python字符串驗證從基礎到進階的總結

引言 在數據處理和文本挖掘中&#xff0c;對字符串的驗證是確保數據符合特定要求的關鍵步驟之一。其中一個常見的驗證需求是確認字符串是否只包含字母。Python為此提供了多種實現的方法&#xff0c;我們將逐一討論它們。 方法1&#xff1a;使用 isalpha() 方法 def is_all_l…

UML 2.5圖的分類

新書速覽|《UML 2.5基礎、建模與設計實踐》新書速覽|《UML 2.5基礎、建模與設計實踐 UML 2.5在UML 2.4.1的基礎上進行了結構性的調整&#xff0c;簡化和重新組織了 UML規范文檔。UML規范被重新編寫&#xff0c;使其“更易于閱讀”&#xff0c;并且“盡可能減少前向引用”。 U…

php簡單實現利用飛書群里機器人推送消息的方法

這是一篇利用的飛書的自定義機器人&#xff0c;將系統中的錯誤信息推送給技術群的功能代碼示例。 飛書文檔地址&#xff1a;開發文檔 - 飛書開放平臺 自定義機器人只能在群聊中使用的機器人&#xff0c;在當前的群聊中通過調用webhook地址來實現消息的推送。 配置群邏輯可以看…

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…