使用自定义主题更改mkdocs代码块
使用自定义主题可以更改mkdocs代码块的样式和外观。mkdocs是一个基于Python的静态网站生成器，用于创建漂亮的文档网站。它使用Markdown语法编写文档，并提供了一些默认的主题供用户选择。
自定义主题允许用户根据自己的需求修改代码块的外观。以下是一些常见的自定义主题操作：
- 创建自定义主题：可以通过创建一个新的主题文件夹，并在其中添加自定义的HTML、CSS和JavaScript文件来创建自定义主题。
- 修改代码块样式：可以通过修改CSS文件来更改代码块的样式。可以调整代码块的背景颜色、字体样式、边框等。
- 添加代码高亮：可以使用代码高亮库（如Pygments）来为代码块添加语法高亮。可以在主题的HTML文件中引入相应的库，并使用相应的CSS样式。
- 调整代码块大小：可以通过CSS样式来调整代码块的大小，使其适应不同的屏幕尺寸。
- 自定义代码块标题：可以通过修改主题的HTML文件来自定义代码块的标题样式和内容。
- 添加代码块行号：可以通过修改主题的HTML文件来添加代码块的行号。可以使用CSS样式来调整行号的外观。
- 集成其他插件：可以根据需要集成其他插件，如搜索功能、导航栏等。
对于使用mkdocs的用户，可以根据自己的需求选择合适的自定义主题，并根据主题的文档进行相应的配置和修改。以下是一些腾讯云相关产品和产品介绍链接地址：
- 腾讯云文档：https://cloud.tencent.com/document/product
- 腾讯云主题：https://cloud.tencent.com/document/product/213/6094
请注意，以上答案仅供参考，具体的自定义主题操作和腾讯云产品选择应根据实际需求和文档进行。
相关·内容
1回答
我正尝试在自定义主题中添加一些html元素(如div)，包装来自html输出的mkdocs生成的代码块。
mkdocs使用带有三重反引号``` stuff ```的围栏代码块，当它产生html输出时，它会创建<pre><code (some stuff here)> stuff </pre></code>。我想知道是否有一种自定义主题的方法，既可以保留带有highlight.js类属性的pre和code标记输出，又允许我将其包装在自定义div中，这样我就可以将代码块与其他一些元素放在一个容器中。
浏览 28提问于2019-07-20得票数 0
回答已采纳
我的md文件的结构是： ---
title: Mango
subtitle: King of Fruits
tags: [fruit, sweet, tasty]
---
Mango is a very tasty fruit.
## Juice
Juice can be made from mango 当我在生成的文档中搜索时，当我搜索Mango时没有得到任何结果。当我搜索Juice时，我确实得到了结果。我对搜索的理解是:它在所有H1标签、H2标签等中进行搜索。我希望搜索在元标题、副标题和标签中查找结果，然后考虑H1、H2……和其他内容。在Mkdocs中是否有一些配置设置可以用来完成
浏览 16提问于2020-11-11得票数 1
回答已采纳
我是MkDocs的新手，我使用MkDocs建立了一个网站，我想在<head>...</head>中添加一些脚本。
我在我的markdown文件的顶部尝试了这段代码，但它不起作用：
<head>
<script>
...
</script>
</head>
我发现脚本可以在<body>...</body>中显示，而不是在<head>...</head>中显示。
如何在<head>标签中放置<script>？
浏览 4提问于2020-05-16得票数 1
我使用mkdocs创建静态文档，并使用rtd-dropdown主题。有人知道如何使用css for mkdocs改变内联代码的颜色吗？
浏览 0提问于2019-07-16得票数 1
2回答
我的mkdocs.yml文件中的nav标题被缩短为只适合左侧导航中的一行，并且我希望.md标记页面标题是未缩略的完整标题。
例如，虽然我的mkdocs.yml文件包含：
nav:
- BD, ML, DS: Big_Data,_Machine_Learning,_Data_Science.md
- AI, VI: Artificial_Intelligence,_Video_Intelligence.md
我希望.md页面标题是：
Big Data, Machine Learning, and Data Science
复制/使用...instead导航标题的mkdocs.yml：
BD, M
浏览 4提问于2020-02-13得票数 4
在Github上类似问题的解决方案都指向使用包管理器而不是pip安装MkDocs或主题。但是，我已经安装了两个pip。
manager)Installed 安装了带有pip的MkDocs (不是一个程序包n个MkDocs主题，pip 更新了mkdocs.yaml以添加：)
theme:
name: '{name_of_theme}'
then
mkdocs serve
result
ERROR - Config value: 'theme'. Error: Unrecognised theme name: '{name_of_theme}&#
浏览 3提问于2019-10-10得票数 3
我目前使用MkDocs和Material主题一起创建漂亮的维基和文档页面。
然而，我想自定义主题，使其一般较暗，因为我不是一个明亮的白色背景的大粉丝。但遗憾的是，我一点也不擅长通过CSS定制东西(这似乎是唯一的方法)，所以我想知道是否有一个地方/网站，在那里我可以找到预定义的CSS文件来改变Material/MkDocs的主题，使之成为我喜欢的东西。
浏览 2提问于2020-03-27得票数 0
我使用带有材料主题的mkdocs生成文档。
对于某些页面，我想要节号。我正在使用下面的代码来生成节号。
这很好，但是当我将指定的CSS放入extras.css时，它适用于所有页面。我有页，不应该包括章节编号的标题。
是否有一种方法可以指定应该应用extras.css中的特定元素的页面？
浏览 3提问于2022-01-25得票数 0
1回答
我使用mkdocs制作文档文件。使用它制作文档真的很棒，因为它是一个静态站点生成器。我怀疑我们能用mkdocs创建像phpdocumentor这样的文档吗？这意味着仅仅通过对注释进行解析并创建文档？有可能用mkdocs吗？
浏览 2提问于2015-07-23得票数 1
回答已采纳
我从包含的ReadtheDocs主题切换到了我的项目的bootswatch联合主题。我为这个主题做了一个pip install mkdocs-bootswatch，并在theme: readthedocs文件中将theme: readthedocs更改为theme: united。
但是，尽管该项目在readthedocs中成功构建，但文档保留了标准的readthedocs主题。当我在本地运行它(使用mkdocs serve)时，它将正确地显示在United中。
还有另一行代码我应该在某个地方修改吗？一个我应该添加的需求文件？如何使外部主题正确地出现在ReadtheDocs中.或者，我甚至可以
浏览 5提问于2016-06-21得票数 6
回答已采纳
2回答
我安装了一个主题，在此之后，当我从命令行运行和mkdocs命令时，我得到了以下错误：
Traceback (most recent call last):
File "/usr/local/bin/mkdocs", line 5, in <module>
from mkdocs.__main__ import cli
File "/usr/local/lib/python2.7/site-packages/mkdocs/__main__.py", line 78, in <module>
theme_choices
浏览 26提问于2020-02-09得票数 1
我正在为mkdocs中的一个项目创建一个指令列表，我认为它使用python作为它的标记引擎。但是，当我试图在列表中的数字之间放置一个有栅栏的代码块时，它就会使编号错误。
一个让我失望的例子(我还试图在每个反勾栏和实际单词之间添加新行，但它仍然混淆了编号)：
1. Click this
一些代码
2. Click that
它呈现出这样的情况：
1. Click this
some code
1. Click that
然后，当我试图缩进它时，它只会破坏呈现：
1. Click this
```
some code
```
2. Click that
至
1. Cli
浏览 5提问于2019-08-05得票数 2
回答已采纳
我即将离开我的实习，我正在为我毕业后接班的暑期实习生写文件。我已经使用MkDocs在Markdown中编写了我所有的文档，并且我已经准备好部署它们了。我的文档使用MkDocs附带的主题，我希望在RTD上托管它们。但是，我的文档的代码托管在属于我公司的GitHub组织的私有回购中。我遇到了问题，设置他们与RTD，因为我个人不拥有回购。你们中有谁有这样做的经验吗？我看过MkDocs ，但是所有的超链接都过时了，指南主要包括链接公共repos。
而且-我没有和RTD结婚，这只是我在我的文档中使用的MkDocs主题，所以如果你们中有任何一个有其他的建议，那就开火吧！
浏览 2提问于2019-06-05得票数 0
我试图在运行在podman容器中的nginx服务器上托管我的MkDocs文档。容器和nginx运行正常，我可以访问站点，所有的html文件都在那里，并且是可读的。只是格式不正确(当我尝试使用mkdocs serve时，所有这些都能正常工作)。它只是一个没有任何图形/ UI的MkDocs。
这是我在容器上运行的Containerfile / Image
FROM ubuntu:22.04
#Copying MkDocs files
COPY /Kubernetes/site /usr/share/mkdocs-site
#Installing nginx
RUN apt update &am
浏览 9提问于2022-10-21得票数 0
是否可以在mkdocs框架中创建某些项目的文档？
我知道通过mkdocs serve进行服务器部署。我们还可以在文档达到我们喜欢的特定级别后执行mkdocs build，这将创建一个site文件夹，实际上我们可以将该文件夹下载到本地，并通过打开index.html文件进行浏览。
然而，这种方法并不完美，因为每次我们切换选项卡时，它都会进入一个中间步骤，在这个步骤中，我们必须手动匹配另一个我们感兴趣的HTML页面。
是否可以将整个mkdocs保存在本地或保存为pdf？它必须是本地使用的，但没有服务器方法。
浏览 11提问于2021-11-04得票数 0
1回答
更新！
小心缩进！我的插件部分在我的代码编辑器中缩进，所以它作为包主题的一部分读取。现在，我至少有一个插件工作，我觉得有点理智。现在来调试另一个..。
谢谢，如果其他人也犯了同样的错误，就把这个放在一边吧！
至于参考资料：
MKDocs 1.0.4 Pip19.2.3 Python3.8.1
很抱歉没有发布原始代码，因为这可能会有所帮助，因为这需要另一位同事开发人员注意到这一点。
原始员额：
我不太清楚断开是在哪里发生的，但我觉得我已经按照MKDocs的指示安装了10次插件，还没有真正看到什么效果呢？在将它添加到配置文件之前，我已经确保先安装我想要的插件。
在我尝试其他人之前，这就是我正在努
浏览 0提问于2020-02-19得票数 0
回答已采纳
我正试图通过mkdocs (附带材料)从标记文件中生成一个文档，以便在gitlab上发布。我的文件包括代码块和美人鱼图表，它们声明相同(在语言中有所区别)。我想使用CodeHilite美化代码块，但美人鱼块也将作为代码块处理，而不会被美人鱼mkdocs插件忽略。有没有办法，我可以排除某些块从codeHilite或任何其他更改使用这两种方式？
浏览 7提问于2020-05-06得票数 0
回答已采纳
当我尝试用mkdocs2pandoc生成一个.pd时，我得到了以下错误
Traceback (most recent call last):
File "/usr/bin/mkdocs2pandoc", line 11, in <module>
load_entry_point('mkdocs-pandoc==0.2.6', 'console_scripts', 'mkdocs2pandoc')()
File "/usr/lib/python2.7/site-packages/mkdocs_pa
浏览 15提问于2017-03-10得票数 1
回答已采纳
我正在尝试使用mkdocs从标记生成嵌套有序列表，但没有成功。在md文件中，我有以下内容：
第一
二次
一个
B
第三
创建的网页显示：
第二、第三、第三
我在某个地方看到需要在mkdocs.yml文件中添加markdown_extensions:下的行- def_list，但是它没有改变任何东西。
浏览 12提问于2022-02-07得票数 1
2回答
在构建MKDOCS之后，站点上的搜索栏无法工作。而当我在本地服役的时候，它是起作用的。
在构建mkdocs之后，有什么解决办法可以使用搜索栏吗？
浏览 1提问于2021-01-11得票数 1
回答已采纳
5回答
我是MkDocs的新手，正在编写一些需要latex的技术文档。我已经成功地建立了一个以MkDocs为主题的小网站，但是它不能正确地显示latex方程。我按照下面的说明操作：
以及该页面上python-markdown-mathjax链接后面的说明。我还在mkdocs.yaml文件中添加了适当的行，类似于：
但是，发出命令'mkdocs build‘仍然会导致站点不呈现公式。我还尝试使用mkdocs build命令添加一个-x mathjax标志。
我已经在网上搜寻了很长一段时间。有人能说明我需要做些什么才能让这两个人一起玩吗？
浏览 0提问于2015-01-11得票数 23
我使用的是带有可数化标记扩展的MkDocs
我只想为特定的代码段启用代码段行号。
如果我设置
markdown_extensions:
- codehilite:
linenums: true
在我的mkdocs.yml中，这将为所有代码段启用行号。
我发现，通过使用shebang语言说明符和双缩进可以激活特定片段的行号：
#!python
""" Bubble sort """
def bubble_sort(items):
for i in range(len(items)):
for j in ran
浏览 3提问于2019-04-12得票数 2
回答已采纳
我正在尝试创建一个类似于mkdocs-material的文档站点()的登录页面。我正在使用mkdocs-material作为我的文档站点。
浏览 2提问于2020-08-16得票数 1
1回答
我使用节呈现API来呈现节的内容，但问题是它不能呈现节所拥有的块。
示例：
<div class="section-blocks">
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when 'title' -%}
<span>This is title</span>
{%- when 'text' -%}
浏览 6提问于2021-12-07得票数 0
我试着把我的头放在FSE和模板部件上。我能够在Gutenberg编辑器中创建一个标头，并将代码复制到header.html。但是，当我在文本编辑器中直接编辑header.html代码时，例如添加一个dash图标，它不会显示在站点的标题中或编辑器中。
是在编辑器中添加到header.html，然后复制代码的唯一方法吗？从本质上说，header.html实际上只是一个后备？我可以倒回去吗？编辑html并让它工作吗？
我遗漏了什么？
布拉德
浏览 0提问于2023-02-07得票数 1
回答已采纳
我正在处理的mkdocs.yml nav文件包括一个手册网站的层次树，其中包含内容文章所属的几个类别和子类别；该树绝对是虚拟的，而不是基于文件夹结构/网站路径。我正在寻找一种为每个树节点(类别)生成permalinks的方法。如果使用Markdown或其扩展是不可能的，也许可以使用html/css元素。
我对Markdown和mkdocs非常陌生；我在googled中搜索了一个解决方案，但没有找到解决方案。
site_name: My Site
site_dir: docs/guides/
site_url: http://example.net/
docs_dir: 'src'
浏览 0提问于2019-02-08得票数 4
我正在使用Python工具来构建使用MkDocs mkdocstring扩展直接从源代码中提取的MkDocs文档。
当我在项目中运行mkdocs serve命令时(在包含mkdocs.yml文件的目录中)，该命令将失败，并出现ERROR - Could not collect 'cpinotify'错误。
aUser@aMachine:~/notify2nats$ mkdocs serve
INFO - Building documentation...
INFO - Cleaning site directory
ERROR - mkdoc
浏览 24提问于2021-07-25得票数 3
试图让datatable进入我的mkdocs材料主题。我尝试了不同的方法，但效果不一致，有时在页面引用后才能工作。
mkdocs.yml
extra_css:
- extra.css
- https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css
extra_javascript:
- https://code.jquery.com/jquery-3.5.1.min.js
- https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js
-
浏览 0提问于2020-11-20得票数 3
2回答
MkDocs无法找到我的图像，我有一个问题。图像位于我的docs文件夹中的一个名为microsatsFigures的子文件夹中。因此，我的/docs文件夹包含index.md、traces.md和包含图像的文件夹microsatsFigures。在我的Markdown文件traces.md中，我对图像使用html语法，因此图像的路径是：
<img src="microsatsFigures/Figure_setLoci.png"/>
这在我正在使用的标记编辑器()中非常有效，并且图像显示没有问题。但是mkdocs找不到图像-我得到
警告- 15:02:53 "
浏览 8提问于2022-02-11得票数 2
我用的是材料主题的MkDocs。我想构建一个看起来有点像Stripe文档的站点。
默认情况下，材料主题将.md文档放在左侧的侧栏中，标题在右侧的目录侧栏中使用这些文档。我想把它放在左边：
Introduction
A ## heading here
Another heading
Getting Started
Subsection
etc.
我可以通过使每个条目都成为它自己的文档来做到这一点，但我希望每个主要标题只有一个文档，其中的目录由下面的副标题组成。有可能吗？
更新：
我已经取得了一些进展。
首先，通过以下说明扩展主题：
其次，通过重写"site_nav“模板块
浏览 5提问于2020-01-28得票数 0
编辑：--确切的代码在的GitHub上，在Linux上也失败。
我试图通过使用参数来安装entry_points跨平台脚本
`entry_points={ 'console_scripts': [ 'mkdocs = mkdocs.mkdocs:main_entry_point', ], },`
运行python setup.py install将生成c:\Python27\lib\site-packages\mkdocs并在c:\Python27\Scripts\mkdoc
浏览 0提问于2014-06-05得票数 1
回答已采纳
我正在使用MkDocs构建我的文档。
在我的.md文件中，我有以下内容：
* test
content in bullet list with two spaces
段落应该与项目项目在相同的缩进级别上，如下所示：
测试：
有两个空格的项目列表中的内容
但是，作为单独的一段，它被错误地呈现：
测试：
有两个空格的项目列表中的内容
它只能用4个空格正确渲染，但应该是2个空格。
我怎么才能改变这个？
浏览 25提问于2022-01-20得票数 2
回答已采纳
我想为mkdocs编写一个插件，它允许添加自定义python代码的文件。这是一个。
我想将模块放在网站的主dir中，与mkdocs.yml文件一起，并在其中声明该模块，例如：
python_module=mycode.py
然后我将在插件的代码中使用，类似于：
from mkdocs.plugins import BasePlugin
from jinja2 import Template
import importlib
class MarkdownExtraDataPlugin(BasePlugin):
"Execute piece of code"
浏览 1提问于2018-06-24得票数 0
回答已采纳
我正在尝试删除mkdocs中的前两个按钮和下一个按钮，但我不希望它太麻烦了。
我读过，搜索过网页，除了一些GitHub问题没有发现任何别的东西。
把这些纽扣移开！
谢谢!
浏览 3提问于2021-09-21得票数 2
1回答
我的python版本是： python --version
Python 2.7.9
python3 --version
Python 3.8.5 我已经下载了pip。 pip --version
pip 20.2.2 from /Library/Python/3.8/site-packages/pip (python 3.8)
pip3 --version
pip 20.2.2 from /Library/Python/3.8/site-packages/pip (python 3.8) 我需要在我的苹果电脑上下载mkdocs。为此，我运行命令：pip3 install mkdocs。
浏览 136提问于2020-08-26得票数 0
回答已采纳
1回答
在OSX上找不到mkdocs命令
、、、、
我在这里遵循mkdocs的设置过程：
我不能让mkdocs做任何超出我本地机器上安装的事情。我已经安装了最新的python和pip。我已经验证了mkdocs包是否已安装，但仍然没有任何内容：
$ mkdocs --version
-bash: mkdocs: command not found
$ python --version
Python 2.7.10
$ pip --version
pip 8.0.2 from /Library/Frameworks/Python.framework/Versions/2.7/lib/python2.7/site-packages (python 2
浏览 0提问于2016-02-10得票数 0
要在本地运行我的码头映像，我使用：
docker run --rm -d -p 80:80 mkdocs:latest nginx -g 'daemon off;'
我的问题是:当使用这个停靠映像(在中)设置Google时，如何设置命令/ARG部件？我对整个Google和容器都很陌生。
我阅读了docker/gcloud文档，在容器映像名(nginx)只是一个选项之前，看起来一切都是这样，而不是命令或ARG。不过，整件事真的让我很困惑。我试过几次：
使用整个docker run --rm -d -p 80:80 mkdocs:latest nginx -g 'daemo
浏览 10提问于2022-09-22得票数 0
( : -)mkdocs修剪内联代码块中的所有空格，如下所示:mkdocs，因此结果类似于此mkdocs。 我试图使用shebang指定一种语言-因为我认为这可能是一个肮脏的变通方法-但它没有帮助。
浏览 17提问于2020-08-22得票数 0
回答已采纳
我正在运行一个带有MKDocs的服务器来获取文档。
为了从项目所在的目录中使用MKDocs，需要运行mkdocs serve -a 192.168.3.107:8080才能启动它。
到目前为止，我使用/usr/bin/tmux new-session -d -s "MKDOCS" "cd /root/mkdocs && mkdocs serve -a 192.168.3.107:8080"在后台运行它，但是这是一个非常粗略的解决方案，我想将它作为Service运行。
我试过这样的方法，但不管用：
[Unit]
Description=mkdocs
浏览 0提问于2022-02-02得票数 0
1回答
是否有在标记文件中使用HTML的解决方案?还是选择显示整个额外的页面，即纯HTML？
问题:我想在我的mkdocs生成的wiki中包含一个html片段，它使用一些内联Javascript。
试过了:我已经找了几个小时了，在这里或者在官方文件里都找不到答案。
浏览 4提问于2017-11-07得票数 16
1回答
我从UI中在Drupal 8中创建了一个自定义块。
是否有方法向此自定义块添加自定义CSS样式？
是否可以像在视图中一样，点击CSS并输入它？
浏览 0提问于2016-02-20得票数 2
回答已采纳
我安装了Mkdocs (Python 3.6.5)，并编辑和构建了Markdown文件。
我尝试用浏览器打开主index.html文件，但无法直接打开链接到其他HTML文件的HTML页面。
使用命令提示符并键入"mkdocs serve"，我可以打开链接的页面。我知道这是没有服务器的Mkdocs的正常功能。
我可以只在本地计算机上使用Mkdocs吗？
浏览 5提问于2018-08-13得票数 4
当我试图提高公关时，我在Jenkins构建站点阶段得到了这个错误，有人能帮我解决这个错误吗？提前谢谢。
Build site
mkdocs build
— Shell Script
<1s
[2022-08-24T17:43:51.923Z] + mkdocs build
[2022-08-24T17:43:52.182Z] Traceback (most recent call last):
[2022-08-24T17:43:52.182Z] File "/usr/local/bin/mkdocs", line 5, in <module>
[2022
浏览 16提问于2022-08-25得票数 1
有一个GitHub回购我喜欢。它使用readthedocs来主持主题，使用mkdocs作为主题。
我正在使用macOS Mojave。
我找到了这个安装指南来安装readthedocs。但是，我不知道在更改想要更改的回购文件的mkdocs.yml文件之后，如何测试构建的文件。
那么，当我在mkdocs.yml X中对macOS进行本地更改时，如何测试已构建的readthedocs文件呢？
如果有必要的话，我不介意用码头。
浏览 0提问于2018-12-22得票数 1
回答已采纳
1回答
我已经添加了一些自定义CSS到我的Tumblr主题，以使permalink页面更宽(对于静态页面，我已经添加)，但这使所有单独的post permalink页面宽度和缩放图像大于100%。有没有办法告诉它不要缩放大于100%的内容，这样它就不会变成像素化，只使用CSS？我不想编辑实际的HTML主题。下面是添加的CSS代码：
.permalink-page {
max-width: 80%;
margin-top: 10px;
margin-left: 20%;
margin-right: auto;
font-size: 15px;
color: black;
}
下面是一个我不希望扩展到完全
浏览 4提问于2015-04-27得票数 0
我倾向于用Markdown编写API文档，并使用MkDocs生成一个静态站点。但是，我想托管文档的站点是Django站点。所以我的问题是，我似乎找不到一个在谷歌上搜索的答案，那就是我应该如何将MkDocs静态生成的站点文件托管在一个像/api/v1/docs这样的位置，让静态站点可以在那个URL上查看呢？
更新:我应该指出，我确实服务于下的所有静态文件，并且不使用runserver或Debug模式来服务静态文件，这太疯狂了。该站点是完全构建并与REST一起工作的。
我的问题只是如何让Django (或者应该说是Apache)为MkDocs在特定URL下生成的静态站点(为我的API文档)服务。我
浏览 3提问于2015-09-10得票数 2
回答已采纳
我正在尝试设置我的Jekyll博客的样式。我已经注意到，使用这两个反标记的内联代码高亮显示。
在这里，您可以看到内联高亮显示样式与代码块样式非常不同。代码块样式是在_highlighter.scss文件中完成的。在哪里我可以编辑内联代码的样式？
浏览 2提问于2017-01-31得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
