mirror of
https://github.com/squidfunk/mkdocs-material.git
synced 2024-11-28 01:10:58 +01:00
Merge pull request #3093 from squidfunk/docs/restructure-docs
Restructure documentation
This commit is contained in:
commit
77c62c9b55
@ -138,7 +138,7 @@ mkdocs-material-7.1.11+insiders-2.11.1 (2021-07-20)
|
|||||||
|
|
||||||
mkdocs-material-7.1.11+insiders-2.11.0 (2021-07-18)
|
mkdocs-material-7.1.11+insiders-2.11.0 (2021-07-18)
|
||||||
|
|
||||||
* Improved Mermaid.js intergration, now stable
|
* Improved Mermaid.js integration, now stable
|
||||||
* Added support for sequence diagrams
|
* Added support for sequence diagrams
|
||||||
* Added support for entity relationship diagrams
|
* Added support for entity relationship diagrams
|
||||||
* Added support for cookie consent configuration
|
* Added support for cookie consent configuration
|
||||||
|
@ -14,7 +14,7 @@ __The latest Insiders release brings three new simple ways to exclude
|
|||||||
dedicated parts of a document from the search index, allowing for more
|
dedicated parts of a document from the search index, allowing for more
|
||||||
fine-grained control.__
|
fine-grained control.__
|
||||||
|
|
||||||
<aside class="mdx-author" markdown="1">
|
<aside class="mdx-author" markdown>
|
||||||
![@squidfunk][1]
|
![@squidfunk][1]
|
||||||
|
|
||||||
<span>__Martin Donath__ · @squidfunk</span>
|
<span>__Martin Donath__ · @squidfunk</span>
|
||||||
|
@ -14,7 +14,7 @@ __This is the story of how we managed to completely rebuild client-side search,
|
|||||||
delivering a significantly better user experience while making it faster and
|
delivering a significantly better user experience while making it faster and
|
||||||
smaller at the same time.__
|
smaller at the same time.__
|
||||||
|
|
||||||
<aside class="mdx-author" markdown="1">
|
<aside class="mdx-author" markdown>
|
||||||
![@squidfunk][1]
|
![@squidfunk][1]
|
||||||
|
|
||||||
<span>__Martin Donath__ · @squidfunk</span>
|
<span>__Martin Donath__ · @squidfunk</span>
|
||||||
@ -230,11 +230,11 @@ search previews appear not to include any occurrence of any of the search
|
|||||||
terms. This was due to the fact that search previews were [truncated after a
|
terms. This was due to the fact that search previews were [truncated after a
|
||||||
maximum of 320 characters][15], as can be seen here:
|
maximum of 320 characters][15], as can be seen here:
|
||||||
|
|
||||||
<figure markdown="1">
|
<figure markdown>
|
||||||
|
|
||||||
![Search previews][16]
|
![Search previews][16]
|
||||||
|
|
||||||
<figcaption markdown="1">
|
<figcaption markdown>
|
||||||
|
|
||||||
The first two results look like they're not relevant, as they don't seem to
|
The first two results look like they're not relevant, as they don't seem to
|
||||||
include the query string the user just searched for. Yet, they are.
|
include the query string the user just searched for. Yet, they are.
|
||||||
@ -499,7 +499,7 @@ digit `\d`, which leaves version numbers discoverable. Searching for
|
|||||||
[:octicons-search-24: 7.2.6][28] brings up the [7.2.6][29] release notes.
|
[:octicons-search-24: 7.2.6][28] brings up the [7.2.6][29] release notes.
|
||||||
|
|
||||||
[28]: ?q=7.2.6
|
[28]: ?q=7.2.6
|
||||||
[29]: ../../changelog.md#726-_-september-1-2021
|
[29]: ../../changelog/index.md#726-_-september-1-2021
|
||||||
|
|
||||||
#### HTML/XML tags
|
#### HTML/XML tags
|
||||||
|
|
||||||
@ -578,7 +578,7 @@ itself, and one with a very massive corpus of Markdown files with more than
|
|||||||
800,000 words – a size most documentation projects will likely never
|
800,000 words – a size most documentation projects will likely never
|
||||||
reach:
|
reach:
|
||||||
|
|
||||||
<figure markdown="1">
|
<figure markdown>
|
||||||
|
|
||||||
| | Before | Now | Relative |
|
| | Before | Now | Relative |
|
||||||
| ----------------------- | -------: | -------------: | -----------: |
|
| ----------------------- | -------: | -------------: | -----------: |
|
||||||
|
@ -4,7 +4,7 @@ template: overrides/main.html
|
|||||||
|
|
||||||
# Creating your site
|
# Creating your site
|
||||||
|
|
||||||
After you've [installed][1] Material for MkDocs, you can bootstrap your project
|
After you've [installed] Material for MkDocs, you can bootstrap your project
|
||||||
documentation using the `mkdocs` executable. Go to the directory where you want
|
documentation using the `mkdocs` executable. Go to the directory where you want
|
||||||
your project to be located and enter:
|
your project to be located and enter:
|
||||||
|
|
||||||
@ -35,14 +35,14 @@ This will create the following structure:
|
|||||||
└─ mkdocs.yml
|
└─ mkdocs.yml
|
||||||
```
|
```
|
||||||
|
|
||||||
[1]: getting-started.md
|
[installed]: getting-started.md
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
### Minimal configuration
|
### Minimal configuration
|
||||||
|
|
||||||
Simply add the following lines to `mkdocs.yml` to enable the theme. Note that
|
Simply add the following lines to `mkdocs.yml` to enable the theme. Note that
|
||||||
since there are several [installation methods][2], configuration might be
|
since there are several [installation methods], minimal configuration might be
|
||||||
slightly different:
|
slightly different:
|
||||||
|
|
||||||
=== "pip, docker"
|
=== "pip, docker"
|
||||||
@ -77,53 +77,53 @@ slightly different:
|
|||||||
logo: logo
|
logo: logo
|
||||||
```
|
```
|
||||||
|
|
||||||
_If you cloned Material for MkDocs from GitHub, you must list all of the themes'
|
When you clone from GitHub, you must list all of the themes' defaults
|
||||||
defaults, because_ [`mkdocs_theme.yml`][3] _is not loaded automatically as
|
explicitly, because [`mkdocs_theme.yml`][mkdocs_theme.yml] is not
|
||||||
[described in the official documentation][4]._
|
loaded automatically as described in the [custom theme guide].
|
||||||
|
|
||||||
[2]: getting-started.md#installation
|
[installation methods]: getting-started.md#installation
|
||||||
[3]: https://github.com/squidfunk/mkdocs-material/blob/master/src/mkdocs_theme.yml
|
[mkdocs_theme.yml]: https://github.com/squidfunk/mkdocs-material/blob/master/src/mkdocs_theme.yml
|
||||||
[4]: https://www.mkdocs.org/user-guide/custom-themes/#creating-a-custom-theme
|
[custom theme guide]: https://www.mkdocs.org/user-guide/custom-themes/#creating-a-custom-theme
|
||||||
|
|
||||||
### Advanced configuration
|
### Advanced configuration
|
||||||
|
|
||||||
Material for MkDocs comes with many configuration options. The _setup_ section
|
Material for MkDocs comes with many configuration options. The setup section
|
||||||
explains in great detail how to configure and customize colors, fonts, icons
|
explains in great detail how to configure and customize colors, fonts, icons
|
||||||
and much more:
|
and much more:
|
||||||
|
|
||||||
<div class="mdx-columns" markdown="1">
|
<div class="mdx-columns" markdown>
|
||||||
|
|
||||||
- [Changing the colors][5]
|
- [Changing the colors]
|
||||||
- [Changing the fonts][6]
|
- [Changing the fonts]
|
||||||
- [Changing the language][7]
|
- [Changing the language]
|
||||||
- [Changing the logo and icons][8]
|
- [Changing the logo and icons]
|
||||||
- [Setting up navigation][9]
|
- [Setting up navigation]
|
||||||
- [Setting up site search][10]
|
- [Setting up site search]
|
||||||
- [Setting up site analytics][11]
|
- [Setting up site analytics]
|
||||||
- [Setting up social cards][12]
|
- [Setting up social cards]
|
||||||
- [Setting up tags][13]
|
- [Setting up tags]
|
||||||
- [Setting up versioning][14]
|
- [Setting up versioning]
|
||||||
- [Setting up the header][15]
|
- [Setting up the header]
|
||||||
- [Setting up the footer][16]
|
- [Setting up the footer]
|
||||||
- [Adding a git repository][17]
|
- [Adding a git repository]
|
||||||
- [Adding a comment system][18]
|
- [Adding a comment system]
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
[5]: setup/changing-the-colors.md
|
[Changing the colors]: setup/changing-the-colors.md
|
||||||
[6]: setup/changing-the-fonts.md
|
[Changing the fonts]: setup/changing-the-fonts.md
|
||||||
[7]: setup/changing-the-language.md
|
[Changing the language]: setup/changing-the-language.md
|
||||||
[8]: setup/changing-the-logo-and-icons.md
|
[Changing the logo and icons]: setup/changing-the-logo-and-icons.md
|
||||||
[9]: setup/setting-up-navigation.md
|
[Setting up navigation]: setup/setting-up-navigation.md
|
||||||
[10]: setup/setting-up-site-search.md
|
[Setting up site search]: setup/setting-up-site-search.md
|
||||||
[11]: setup/setting-up-site-analytics.md
|
[Setting up site analytics]: setup/setting-up-site-analytics.md
|
||||||
[12]: setup/setting-up-social-cards.md
|
[Setting up social cards]: setup/setting-up-social-cards.md
|
||||||
[13]: setup/setting-up-tags.md
|
[Setting up tags]: setup/setting-up-tags.md
|
||||||
[14]: setup/setting-up-versioning.md
|
[Setting up versioning]: setup/setting-up-versioning.md
|
||||||
[15]: setup/setting-up-the-header.md
|
[Setting up the header]: setup/setting-up-the-header.md
|
||||||
[16]: setup/setting-up-the-footer.md
|
[Setting up the footer]: setup/setting-up-the-footer.md
|
||||||
[17]: setup/adding-a-git-repository.md
|
[Adding a git repository]: setup/adding-a-git-repository.md
|
||||||
[18]: setup/adding-a-comment-system.md
|
[Adding a comment system]: setup/adding-a-comment-system.md
|
||||||
|
|
||||||
## Previewing as you write
|
## Previewing as you write
|
||||||
|
|
||||||
@ -149,12 +149,12 @@ If you're running Material for MkDocs from within Docker, use:
|
|||||||
docker run --rm -it -p 8000:8000 -v "%cd%":/docs squidfunk/mkdocs-material
|
docker run --rm -it -p 8000:8000 -v "%cd%":/docs squidfunk/mkdocs-material
|
||||||
```
|
```
|
||||||
|
|
||||||
Point your browser to [localhost:8000][19] and you should see:
|
Point your browser to [localhost:8000][live preview] and you should see:
|
||||||
|
|
||||||
[![Creating your site][20]][20]
|
[![Creating your site]][Creating your site]
|
||||||
|
|
||||||
[19]: http://localhost:8000
|
[live preview]: http://localhost:8000
|
||||||
[20]: assets/screenshots/creating-your-site.png
|
[Creating your site]: assets/screenshots/creating-your-site.png
|
||||||
|
|
||||||
## Building your site
|
## Building your site
|
||||||
|
|
||||||
@ -167,8 +167,8 @@ mkdocs build
|
|||||||
|
|
||||||
The contents of this directory make up your project documentation. There's no
|
The contents of this directory make up your project documentation. There's no
|
||||||
need for operating a database or server, as it is completely self-contained.
|
need for operating a database or server, as it is completely self-contained.
|
||||||
The site can be hosted on [GitHub Pages][21], [GitLab Pages][22], a CDN of your
|
The site can be hosted on [GitHub Pages], [GitLab Pages], a CDN of your choice
|
||||||
choice or your private web space.
|
or your private web space.
|
||||||
|
|
||||||
[21]: publishing-your-site.md#github-pages
|
[GitHub Pages]: publishing-your-site.md#github-pages
|
||||||
[22]: publishing-your-site.md#gitlab-pages
|
[GitLab pages]: publishing-your-site.md#gitlab-pages
|
||||||
|
@ -11,11 +11,11 @@ necessary to preserve your brand's style.
|
|||||||
|
|
||||||
## Adding assets
|
## Adding assets
|
||||||
|
|
||||||
[MkDocs][1] provides several ways to customize a theme. In order to make a few
|
[MkDocs] provides several ways to customize a theme. In order to make a few
|
||||||
tweaks to Material for MkDocs, you can just add your stylesheets and JavaScript
|
small tweaks to Material for MkDocs, you can just CSS and JavaScript files to
|
||||||
files to the `docs` directory.
|
the `docs` directory.
|
||||||
|
|
||||||
[1]: https://www.mkdocs.org
|
[MkDocs]: https://www.mkdocs.org
|
||||||
|
|
||||||
### Additional CSS
|
### Additional CSS
|
||||||
|
|
||||||
@ -31,23 +31,17 @@ new stylesheet file in the `docs` directory:
|
|||||||
└─ mkdocs.yml
|
└─ mkdocs.yml
|
||||||
```
|
```
|
||||||
|
|
||||||
Then, add the following line to `mkdocs.yml`:
|
Then, add the following lines to `mkdocs.yml`:
|
||||||
|
|
||||||
``` yaml
|
``` yaml
|
||||||
extra_css:
|
extra_css:
|
||||||
- stylesheets/extra.css
|
- stylesheets/extra.css
|
||||||
```
|
```
|
||||||
|
|
||||||
Spin up the [live preview server][2] and start typing your changes in your
|
|
||||||
additional stylesheet file – you should see them almost instantly after saving.
|
|
||||||
|
|
||||||
[2]: creating-your-site.md#previewing-as-you-write
|
|
||||||
|
|
||||||
### Additional JavaScript
|
### Additional JavaScript
|
||||||
|
|
||||||
The same is true for additional JavaScript. If you want to integrate another
|
If you want to integrate another syntax highlighter or add some custom logic to
|
||||||
syntax highlighter or add some custom logic to your theme, create a new
|
your theme, create a new JavaScript file in the `docs` directory:
|
||||||
JavaScript file in the `docs` directory:
|
|
||||||
|
|
||||||
``` sh
|
``` sh
|
||||||
.
|
.
|
||||||
@ -57,30 +51,27 @@ JavaScript file in the `docs` directory:
|
|||||||
└─ mkdocs.yml
|
└─ mkdocs.yml
|
||||||
```
|
```
|
||||||
|
|
||||||
Then, add the following line to `mkdocs.yml`:
|
Then, add the following lines to `mkdocs.yml`:
|
||||||
|
|
||||||
``` yaml
|
``` yaml
|
||||||
extra_javascript:
|
extra_javascript:
|
||||||
- javascripts/extra.js
|
- javascripts/extra.js
|
||||||
```
|
```
|
||||||
|
|
||||||
Further assistance can be found in the [MkDocs documentation][3].
|
|
||||||
|
|
||||||
[3]: https://www.mkdocs.org/user-guide/styling-your-docs/#customizing-a-theme
|
|
||||||
|
|
||||||
## Extending the theme
|
## Extending the theme
|
||||||
|
|
||||||
If you want to alter the HTML source (e.g. add or remove some parts), you can
|
If you want to alter the HTML source (e.g. add or remove some parts), you can
|
||||||
extend the theme. MkDocs supports [theme extension][4], an easy way to override
|
extend the theme. MkDocs supports [theme extension], an easy way to override
|
||||||
parts of Material for MkDocs without forking from git. This ensures that you
|
parts of Material for MkDocs without forking from git. This ensures that you
|
||||||
can update to the latest version more easily.
|
can update to the latest version more easily.
|
||||||
|
|
||||||
[4]: https://www.mkdocs.org/user-guide/styling-your-docs/#using-the-theme-custom_dir
|
[theme extension]: https://www.mkdocs.org/user-guide/styling-your-docs/#using-the-theme-custom_dir
|
||||||
|
|
||||||
### Setup and theme structure
|
### Setup and theme structure
|
||||||
|
|
||||||
Enable Material for MkDocs as usual in `mkdocs.yml`, and create a new folder
|
Enable Material for MkDocs as usual in `mkdocs.yml`, and create a new folder
|
||||||
for `overrides` which you then reference using the `custom_dir` key:
|
for `overrides` which you then reference using the [`custom_dir`][custom_dir]
|
||||||
|
setting:
|
||||||
|
|
||||||
``` yaml
|
``` yaml
|
||||||
theme:
|
theme:
|
||||||
@ -90,16 +81,15 @@ theme:
|
|||||||
|
|
||||||
!!! warning "Theme extension prerequisites"
|
!!! warning "Theme extension prerequisites"
|
||||||
|
|
||||||
As the `custom_dir` variable is used for the theme extension process,
|
As the [`custom_dir`][custom_dir] setting is used for the theme extension
|
||||||
Material for MkDocs needs to be installed via `pip` and referenced with the
|
process, Material for MkDocs needs to be installed via `pip` and referenced
|
||||||
`name` parameter in `mkdocs.yml`. It will not work when cloning from `git`.
|
with the [`name`][name] setting in `mkdocs.yml`. It will not work when
|
||||||
|
cloning from `git`.
|
||||||
|
|
||||||
The structure in the `overrides` directory must mirror the directory structure
|
The structure in the `overrides` directory must mirror the directory structure
|
||||||
of the original theme, as any file in the `overrides` directory will replace the
|
of the original theme, as any file in the `overrides` directory will replace the
|
||||||
file with the same name which is part of the original theme. Besides, further
|
file with the same name which is part of the original theme. Besides, further
|
||||||
assets may also be put in the `overrides` directory.
|
assets may also be put in the `overrides` directory:
|
||||||
|
|
||||||
The directory layout of the theme is as follows:
|
|
||||||
|
|
||||||
``` sh
|
``` sh
|
||||||
.
|
.
|
||||||
@ -123,8 +113,7 @@ The directory layout of the theme is as follows:
|
|||||||
│ ├─ search.html # Search box
|
│ ├─ search.html # Search box
|
||||||
│ ├─ social.html # Social links
|
│ ├─ social.html # Social links
|
||||||
│ ├─ source.html # Repository information
|
│ ├─ source.html # Repository information
|
||||||
│ ├─ source-date.html # Last updated date
|
│ ├─ source-file.html # Source file information
|
||||||
│ ├─ source-link.html # Link to source file
|
|
||||||
│ ├─ tabs.html # Tabs navigation
|
│ ├─ tabs.html # Tabs navigation
|
||||||
│ ├─ tabs-item.html # Tabs navigation item
|
│ ├─ tabs-item.html # Tabs navigation item
|
||||||
│ ├─ toc.html # Table of contents
|
│ ├─ toc.html # Table of contents
|
||||||
@ -134,11 +123,14 @@ The directory layout of the theme is as follows:
|
|||||||
└─ main.html # Default page
|
└─ main.html # Default page
|
||||||
```
|
```
|
||||||
|
|
||||||
|
[custom_dir]: https://www.mkdocs.org/user-guide/configuration/#custom_dir
|
||||||
|
[name]: https://www.mkdocs.org/user-guide/configuration/#name
|
||||||
|
|
||||||
### Overriding partials
|
### Overriding partials
|
||||||
|
|
||||||
In order to override a partial, we can replace it with a file of the same name
|
In order to override a partial, we can replace it with a file of the same name
|
||||||
and location in the `overrides` directory. For example, to replace the original
|
and location in the `overrides` directory. For example, to replace the original
|
||||||
`footer.html`, create a `footer.html` file in the `overrides/partials`
|
`footer.html` partial, create a new `footer.html` partial in the `overrides`
|
||||||
directory:
|
directory:
|
||||||
|
|
||||||
``` sh
|
``` sh
|
||||||
@ -152,12 +144,12 @@ directory:
|
|||||||
MkDocs will now use the new partial when rendering the theme. This can be done
|
MkDocs will now use the new partial when rendering the theme. This can be done
|
||||||
with any file.
|
with any file.
|
||||||
|
|
||||||
### Overriding blocks <small>recommended</small> { data-toc-label="Overriding blocks" }
|
### Overriding blocks <small>recommended</small> { #overriding-blocks data-toc-label="Overriding blocks" }
|
||||||
|
|
||||||
Besides overriding partials, it's also possible to override (and extend)
|
Besides overriding partials, it's also possible to override (and extend)
|
||||||
_template blocks_, which are defined inside the templates and wrap specific
|
template blocks, which are defined inside the templates and wrap specific
|
||||||
features. To override a block, create a `main.html` file inside the `overrides`
|
features. In order to set up block overrides, create a `main.html` file inside
|
||||||
directory:
|
the `overrides` directory:
|
||||||
|
|
||||||
``` sh
|
``` sh
|
||||||
.
|
.
|
||||||
@ -166,7 +158,7 @@ directory:
|
|||||||
└─ mkdocs.yml
|
└─ mkdocs.yml
|
||||||
```
|
```
|
||||||
|
|
||||||
Then, e.g. to override the site title, add the following line to `main.html`:
|
Then, e.g. to override the site title, add the following lines to `main.html`:
|
||||||
|
|
||||||
``` html
|
``` html
|
||||||
{% extends "base.html" %}
|
{% extends "base.html" %}
|
||||||
@ -176,7 +168,7 @@ Then, e.g. to override the site title, add the following line to `main.html`:
|
|||||||
{% endblock %}
|
{% endblock %}
|
||||||
```
|
```
|
||||||
|
|
||||||
Material for MkDocs provides the following template blocks:
|
The following template blocks are provided by the theme:
|
||||||
|
|
||||||
| Block name | Purpose |
|
| Block name | Purpose |
|
||||||
|:------------------|:------------------------------------------------|
|
|:------------------|:------------------------------------------------|
|
||||||
@ -194,16 +186,11 @@ Material for MkDocs provides the following template blocks:
|
|||||||
| `libs` | Wraps the JavaScript libraries (header) |
|
| `libs` | Wraps the JavaScript libraries (header) |
|
||||||
| `outdated` | Wraps the version warning |
|
| `outdated` | Wraps the version warning |
|
||||||
| `scripts` | Wraps the JavaScript application (footer) |
|
| `scripts` | Wraps the JavaScript application (footer) |
|
||||||
| `source` | Wraps the linked source files |
|
|
||||||
| `site_meta` | Wraps the meta tags in the document head |
|
| `site_meta` | Wraps the meta tags in the document head |
|
||||||
| `site_nav` | Wraps the site navigation and table of contents |
|
| `site_nav` | Wraps the site navigation and table of contents |
|
||||||
| `styles` | Wraps the stylesheets (also extra sources) |
|
| `styles` | Wraps the style sheets (also extra sources) |
|
||||||
| `tabs` | Wraps the tabs navigation (if available) |
|
| `tabs` | Wraps the tabs navigation (if available) |
|
||||||
|
|
||||||
For more on this topic refer to the [MkDocs documentation][5].
|
|
||||||
|
|
||||||
[5]: https://www.mkdocs.org/user-guide/styling-your-docs/#overriding-template-blocks
|
|
||||||
|
|
||||||
#### Additional variables
|
#### Additional variables
|
||||||
|
|
||||||
Besides template blocks, Material for MkDocs provides extra variables for parts
|
Besides template blocks, Material for MkDocs provides extra variables for parts
|
||||||
@ -216,11 +203,11 @@ with Material for MkDocs_ hint in the footer, add the following line to
|
|||||||
{% extends "base.html" %}
|
{% extends "base.html" %}
|
||||||
|
|
||||||
{% set extracopyright %}
|
{% set extracopyright %}
|
||||||
<!-- Add your additional information here -->
|
<!-- Add additional copyright information here -->
|
||||||
{% endset %}
|
{% endset %}
|
||||||
```
|
```
|
||||||
|
|
||||||
Material for MkDocs provides the following additional variables:
|
The following template variables are provided by the theme:
|
||||||
|
|
||||||
| Block name | Purpose |
|
| Block name | Purpose |
|
||||||
|:------------------|:------------------------------------------------|
|
|:------------------|:------------------------------------------------|
|
||||||
@ -228,25 +215,25 @@ Material for MkDocs provides the following additional variables:
|
|||||||
|
|
||||||
## Theme development
|
## Theme development
|
||||||
|
|
||||||
Material for MkDocs is built on top of [TypeScript][6], [RxJS][7] and [SASS][8],
|
Material for MkDocs is built on top of [TypeScript], [RxJS] and [SASS], and
|
||||||
and uses a lean, custom build process to put everything together.[^1] If you
|
uses a lean, custom build process to put everything together.[^1] If you want
|
||||||
want to make more fundamental changes, it may be necessary to make the
|
to make more fundamental changes, it may be necessary to make the adjustments
|
||||||
adjustments directly in the source of the theme and recompile it.
|
directly in the source of the theme and recompile it.
|
||||||
|
|
||||||
[^1]:
|
[^1]:
|
||||||
Prior to version 7.0, the build was based on Webpack. This led to broken
|
Prior to :octicons-tag-24: 7.0.0 the build was based on Webpack, resulting
|
||||||
builds due to frequent incompatibilities with loaders and plugins, so we
|
in occasional broken builds due to incompatibilities with loaders and
|
||||||
decided to swap Webpack for a leaner custom solution which is now based on
|
plugins. Therefore, we decided to swap Webpack for a leaner solution which
|
||||||
[RxJS][7] as the application itself. This enabled us to remove more than
|
is now based on [RxJS] as the application itself. This allowed for the
|
||||||
500 dependencies (~30% less).
|
pruning of more than 500 dependencies (~30% less).
|
||||||
|
|
||||||
[6]: https://www.typescriptlang.org/
|
[TypeScript]: https://www.typescriptlang.org/
|
||||||
[7]: https://github.com/ReactiveX/rxjs
|
[RxJS]: https://github.com/ReactiveX/rxjs
|
||||||
[8]: https://sass-lang.com
|
[SASS]: https://sass-lang.com
|
||||||
|
|
||||||
### Environment setup
|
### Environment setup
|
||||||
|
|
||||||
In order to start development on Material for MkDocs, a [Node.js][9] version of
|
In order to start development on Material for MkDocs, a [Node.js] version of
|
||||||
at least 14 is required. First, clone the repository:
|
at least 14 is required. First, clone the repository:
|
||||||
|
|
||||||
```
|
```
|
||||||
@ -263,7 +250,7 @@ pip install mkdocs-redirects
|
|||||||
npm install
|
npm install
|
||||||
```
|
```
|
||||||
|
|
||||||
[9]: https://nodejs.org
|
[Node.js]: https://nodejs.org
|
||||||
|
|
||||||
### Development mode
|
### Development mode
|
||||||
|
|
||||||
@ -273,14 +260,14 @@ Start the watcher with:
|
|||||||
npm start
|
npm start
|
||||||
```
|
```
|
||||||
|
|
||||||
Then, in a second session, start the MkDocs live preview server with:
|
Then, in a second terminal window, start the MkDocs live preview server with:
|
||||||
|
|
||||||
```
|
```
|
||||||
mkdocs serve
|
mkdocs serve
|
||||||
```
|
```
|
||||||
|
|
||||||
Point your browser to [localhost:8000][10] and you should see this documentation
|
Point your browser to [localhost:8000][live preview] and you should see this
|
||||||
in front of you.
|
very documentation in front of you.
|
||||||
|
|
||||||
!!! warning "Automatically generated files"
|
!!! warning "Automatically generated files"
|
||||||
|
|
||||||
@ -288,7 +275,7 @@ in front of you.
|
|||||||
directory are automatically generated from the `src` directory and will be
|
directory are automatically generated from the `src` directory and will be
|
||||||
overwritten when the theme is built.
|
overwritten when the theme is built.
|
||||||
|
|
||||||
[10]: http://localhost:8000
|
[live preview]: http://localhost:8000
|
||||||
|
|
||||||
### Building the theme
|
### Building the theme
|
||||||
|
|
||||||
@ -298,10 +285,7 @@ When you're finished making your changes, you can build the theme by invoking:
|
|||||||
npm run build
|
npm run build
|
||||||
```
|
```
|
||||||
|
|
||||||
This triggers the production-level compilation and minification of all
|
This triggers the production-level compilation and minification of all style
|
||||||
stylesheets and JavaScript sources. When the command exits, the final files are
|
sheets and JavaScript files. After the command exits, the compiled files are
|
||||||
located in the `material` directory. Add the `theme_dir` variable pointing to
|
located in the `material` directory. When running `mkdocs build`, you should
|
||||||
the aforementioned directory in the original `mkdocs.yml`.
|
now see your changes to the original theme.
|
||||||
|
|
||||||
Now you can run `mkdocs build` and you should see your documentation with your
|
|
||||||
changes to the original theme.
|
|
||||||
|
@ -1,31 +0,0 @@
|
|||||||
---
|
|
||||||
template: overrides/main.html
|
|
||||||
---
|
|
||||||
|
|
||||||
# Data privacy
|
|
||||||
|
|
||||||
In itself, Material for MkDocs does not perform any tracking and adheres to the
|
|
||||||
[General Data Protection Regulation][1] (GDPR), but it integrates with some
|
|
||||||
third-party services that may not.
|
|
||||||
|
|
||||||
[1]: https://en.wikipedia.org/wiki/General_Data_Protection_Regulation
|
|
||||||
|
|
||||||
## Third-party services
|
|
||||||
|
|
||||||
### Google Fonts
|
|
||||||
|
|
||||||
Material for MkDocs makes fonts [configurable][2] by relying on Google Fonts
|
|
||||||
CDN, which may be in breach with GDPR. The usage of Google's CDN can be [easily
|
|
||||||
disabled][3] via `mkdocs.yml`.
|
|
||||||
|
|
||||||
[2]: setup/changing-the-fonts.md
|
|
||||||
[3]: setup/changing-the-fonts.md#disabling-font-loading
|
|
||||||
|
|
||||||
### Google Analytics and Disqus
|
|
||||||
|
|
||||||
Material for MkDocs comes with optional [Google Analytics][4] and [Disqus][5]
|
|
||||||
integrations, both of which must be enabled explicitly, so there's no immediate
|
|
||||||
action if you don't use those.
|
|
||||||
|
|
||||||
[4]: setup/setting-up-site-analytics.md#google-analytics
|
|
||||||
[5]: setup/adding-a-comment-system.md#disqus
|
|
@ -124,7 +124,7 @@ templates can be shared among multiple pages:
|
|||||||
{% endblock %}
|
{% endblock %}
|
||||||
```
|
```
|
||||||
|
|
||||||
[5]: customization.md#overriding-blocks-recommended
|
[5]: customization.md#overriding-blocks
|
||||||
[6]: customization.md#extending-the-theme
|
[6]: customization.md#extending-the-theme
|
||||||
|
|
||||||
## Docker image
|
## Docker image
|
||||||
|
@ -5,21 +5,18 @@ title: Getting started
|
|||||||
|
|
||||||
# Getting started
|
# Getting started
|
||||||
|
|
||||||
Material for MkDocs is a theme for [MkDocs][1], a static site generator geared
|
Material for MkDocs is a theme for [MkDocs], a static site generator geared
|
||||||
towards (technical) project documentation. If you're familiar with Python, you
|
towards (technical) project documentation. If you're familiar with Python, you
|
||||||
can install Material for MkDocs with [`pip`][2], the Python package manager.
|
can install Material for MkDocs with [`pip`][pip], the Python package manager.
|
||||||
If not, we recommended using [`docker`][3].
|
If not, we recommended using [`docker`][docker].
|
||||||
|
|
||||||
In case you're running into problems, consult the [troubleshooting][4] section.
|
[MkDocs]: https://www.mkdocs.org
|
||||||
|
[pip]: #with-pip
|
||||||
[1]: https://www.mkdocs.org
|
[docker]: #with-docker
|
||||||
[2]: #with-pip-recommended
|
|
||||||
[3]: #with-docker
|
|
||||||
[4]: troubleshooting.md
|
|
||||||
|
|
||||||
## Installation
|
## Installation
|
||||||
|
|
||||||
### with pip <small>recommended</small> { data-toc-label="with pip" }
|
### with pip <small>recommended</small> { #with-pip data-toc-label="with pip" }
|
||||||
|
|
||||||
Material for MkDocs can be installed with `pip`:
|
Material for MkDocs can be installed with `pip`:
|
||||||
|
|
||||||
@ -28,17 +25,17 @@ pip install mkdocs-material
|
|||||||
```
|
```
|
||||||
|
|
||||||
This will automatically install compatible versions of all dependencies:
|
This will automatically install compatible versions of all dependencies:
|
||||||
[MkDocs][1], [Markdown][5], [Pygments][6] and [Python Markdown Extensions][7].
|
[MkDocs], [Markdown], [Pygments] and [Python Markdown Extensions]. Material for
|
||||||
Material for MkDocs always strives to support the latest versions, so there's
|
MkDocs always strives to support the latest versions, so there's no need to
|
||||||
no need to install those packages separately.
|
install those packages separately.
|
||||||
|
|
||||||
[5]: https://python-markdown.github.io/
|
[Markdown]: https://python-markdown.github.io/
|
||||||
[6]: https://pygments.org/
|
[Pygments]: https://pygments.org/
|
||||||
[7]: https://facelessuser.github.io/pymdown-extensions/
|
[Python Markdown Extensions]: https://facelessuser.github.io/pymdown-extensions/
|
||||||
|
|
||||||
### with docker
|
### with docker
|
||||||
|
|
||||||
The official [Docker image][8] is a great way to get up and running in a few
|
The official [Docker image] is a great way to get up and running in a few
|
||||||
minutes, as it comes with all dependencies pre-installed. Pull the image for the
|
minutes, as it comes with all dependencies pre-installed. Pull the image for the
|
||||||
`latest` version with:
|
`latest` version with:
|
||||||
|
|
||||||
@ -52,12 +49,12 @@ covered in the following sections.
|
|||||||
|
|
||||||
The following plugins are bundled with the Docker image:
|
The following plugins are bundled with the Docker image:
|
||||||
|
|
||||||
- [mkdocs-minify-plugin][9]
|
- [mkdocs-minify-plugin]
|
||||||
- [mkdocs-redirects][10]
|
- [mkdocs-redirects]
|
||||||
|
|
||||||
[8]: https://hub.docker.com/r/squidfunk/mkdocs-material/
|
[Docker image]: https://hub.docker.com/r/squidfunk/mkdocs-material/
|
||||||
[9]: https://github.com/byrnereese/mkdocs-minify-plugin
|
[mkdocs-minify-plugin]: https://github.com/byrnereese/mkdocs-minify-plugin
|
||||||
[10]: https://github.com/datarobot/mkdocs-redirects
|
[mkdocs-redirects]: https://github.com/datarobot/mkdocs-redirects
|
||||||
|
|
||||||
??? question "How to add plugins to the Docker image?"
|
??? question "How to add plugins to the Docker image?"
|
||||||
|
|
||||||
@ -82,19 +79,19 @@ The following plugins are bundled with the Docker image:
|
|||||||
!!! info ":material-apple: Apple Silicon (M1) and :fontawesome-brands-raspberry-pi: Raspberry Pi"
|
!!! info ":material-apple: Apple Silicon (M1) and :fontawesome-brands-raspberry-pi: Raspberry Pi"
|
||||||
|
|
||||||
The official Docker image is only available for `linux/amd64`. We recommend
|
The official Docker image is only available for `linux/amd64`. We recommend
|
||||||
the [third-party image][11] by @afritzler if you want to run Material for
|
the [third-party image] by @afritzler if you want to run Material for MkDocs
|
||||||
MkDocs via Docker on `arm64` or `armv7`, as it is automatically built on
|
via Docker on `arm64` or `armv7`, as it is automatically built on every
|
||||||
every release:
|
release:
|
||||||
|
|
||||||
```
|
```
|
||||||
docker pull ghcr.io/afritzler/mkdocs-material
|
docker pull ghcr.io/afritzler/mkdocs-material
|
||||||
```
|
```
|
||||||
|
|
||||||
[11]: https://github.com/afritzler/mkdocs-material
|
[third-party image]: https://github.com/afritzler/mkdocs-material
|
||||||
|
|
||||||
### with git
|
### with git
|
||||||
|
|
||||||
Material for MkDocs can be directly used from [GitHub][12] by cloning the
|
Material for MkDocs can be directly used from [GitHub] by cloning the
|
||||||
repository into a subfolder of your project root which might be useful if you
|
repository into a subfolder of your project root which might be useful if you
|
||||||
want to use the very latest version:
|
want to use the very latest version:
|
||||||
|
|
||||||
@ -106,7 +103,7 @@ The theme will reside in the folder `mkdocs-material/material`. When cloning
|
|||||||
from `git`, you must install all required dependencies yourself:
|
from `git`, you must install all required dependencies yourself:
|
||||||
|
|
||||||
```
|
```
|
||||||
pip install -r mkdocs-material/requirements.txt
|
pip install -e mkdocs-material
|
||||||
```
|
```
|
||||||
|
|
||||||
[12]: https://github.com/squidfunk/mkdocs-material
|
[GitHub]: https://github.com/squidfunk/mkdocs-material
|
||||||
|
@ -7,13 +7,13 @@ title: Switching to Insiders
|
|||||||
|
|
||||||
Material for MkDocs Insiders is a fully compatible drop-in replacement for
|
Material for MkDocs Insiders is a fully compatible drop-in replacement for
|
||||||
Material for MkDocs, and can be installed similar to the public version using
|
Material for MkDocs, and can be installed similar to the public version using
|
||||||
[`pip`][1], [`docker`][2] or [`git`][3]. When you sponsor @squidfunk, your
|
[`pip`][pip], [`docker`][docker] or [`git`][git]. When you sponsor @squidfunk,
|
||||||
account is added to the list of collaborators of the private Insiders
|
your account is added to the list of collaborators of the private Insiders
|
||||||
repository.
|
repository.
|
||||||
|
|
||||||
[1]: #with-pip-recommended
|
[pip]: #with-pip
|
||||||
[2]: #with-docker
|
[docker]: #with-docker
|
||||||
[3]: #with-git
|
[git]: #with-git
|
||||||
|
|
||||||
## Requirements
|
## Requirements
|
||||||
|
|
||||||
@ -21,10 +21,10 @@ In order to access the Insiders repository programmatically (from the command
|
|||||||
line or GitHub Actions workflows), you need to create a [personal access
|
line or GitHub Actions workflows), you need to create a [personal access
|
||||||
token][4]:
|
token][4]:
|
||||||
|
|
||||||
1. Go to https://github.com/settings/tokens
|
1. Go to https://github.com/settings/tokens
|
||||||
2. Click on [Generate a new token][5]
|
2. Click on [Generate a new token][5]
|
||||||
3. Enter a name and select the [`repo`][6] scope
|
3. Enter a name and select the [`repo`][6] scope
|
||||||
4. Generate the token and store it in a safe place
|
4. Generate the token and store it in a safe place
|
||||||
|
|
||||||
[4]: https://docs.github.com/en/github/authenticating-to-github/creating-a-personal-access-token
|
[4]: https://docs.github.com/en/github/authenticating-to-github/creating-a-personal-access-token
|
||||||
[5]: https://github.com/settings/tokens/new
|
[5]: https://github.com/settings/tokens/new
|
||||||
@ -52,18 +52,18 @@ additional steps are necessary. While we cannot provide a hosted Docker image
|
|||||||
for Insiders[^1], [GitHub Container Registry][7] allows for simple and
|
for Insiders[^1], [GitHub Container Registry][7] allows for simple and
|
||||||
comfortable self-hosting:
|
comfortable self-hosting:
|
||||||
|
|
||||||
1. [Fork the Insiders repository][8]
|
1. [Fork the Insiders repository][8]
|
||||||
2. Enable [GitHub Actions][9] on your fork[^2]
|
2. Enable [GitHub Actions][9] on your fork[^2]
|
||||||
3. Create a new personal access token[^3]
|
3. Create a new personal access token[^3]
|
||||||
1. Go to https://github.com/settings/tokens
|
1. Go to https://github.com/settings/tokens
|
||||||
2. Click on [Generate a new token][5]
|
2. Click on [Generate a new token][5]
|
||||||
3. Enter a name and select the [`write:packages`][10] scope
|
3. Enter a name and select the [`write:packages`][10] scope
|
||||||
4. Generate the token and store it in a safe place
|
4. Generate the token and store it in a safe place
|
||||||
4. Add a [GitHub Actions secret][11] on your fork
|
4. Add a [GitHub Actions secret][11] on your fork
|
||||||
1. Set the name to `GHCR_TOKEN`
|
1. Set the name to `GHCR_TOKEN`
|
||||||
2. Set the value to the personal access token created in the previous step
|
2. Set the value to the personal access token created in the previous step
|
||||||
5. [Create a new release][12] to build and publish the Docker image
|
5. [Create a new release][12] to build and publish the Docker image
|
||||||
6. Install [Pull App][13] on your fork to stay in-sync with upstream
|
6. Install [Pull App][13] on your fork to stay in-sync with upstream
|
||||||
|
|
||||||
The [`publish`][14] workflow[^4] is automatically run when a new tag (release)
|
The [`publish`][14] workflow[^4] is automatically run when a new tag (release)
|
||||||
is created. When a new Insiders version is released on the upstream repository,
|
is created. When a new Insiders version is released on the upstream repository,
|
||||||
|
@ -10,11 +10,11 @@ that _new features are first exclusively released to sponsors_ as part of
|
|||||||
__Insiders__. Read on to learn [how sponsorship works][1], and how easy it is
|
__Insiders__. Read on to learn [how sponsorship works][1], and how easy it is
|
||||||
to [get access to Insiders][2].
|
to [get access to Insiders][2].
|
||||||
|
|
||||||
<figure class="mdx-video" markdown="1">
|
<figure class="mdx-video" markdown>
|
||||||
<div class="mdx-video__inner">
|
<div class="mdx-video__inner">
|
||||||
<iframe src="https://streamable.com/e/ihhxw0" allowfullscreen></iframe>
|
<iframe src="https://streamable.com/e/ihhxw0" allowfullscreen></iframe>
|
||||||
</div>
|
</div>
|
||||||
<figcaption markdown="1">
|
<figcaption markdown>
|
||||||
|
|
||||||
The official documentation is built with Insiders
|
The official documentation is built with Insiders
|
||||||
[squidfunk.github.io/mkdocs-material][3]
|
[squidfunk.github.io/mkdocs-material][3]
|
||||||
@ -100,7 +100,7 @@ You can cancel your sponsorship anytime.[^4]
|
|||||||
|
|
||||||
<hr />
|
<hr />
|
||||||
|
|
||||||
<div class="mdx-premium" markdown="1">
|
<div class="mdx-premium" markdown>
|
||||||
|
|
||||||
**Special thanks** to our **premium sponsors**:
|
**Special thanks** to our **premium sponsors**:
|
||||||
|
|
||||||
@ -135,7 +135,7 @@ You can cancel your sponsorship anytime.[^4]
|
|||||||
|
|
||||||
The following features are currently exclusively available to sponsors:
|
The following features are currently exclusively available to sponsors:
|
||||||
|
|
||||||
<div class="mdx-columns" markdown="1">
|
<div class="mdx-columns" markdown>
|
||||||
|
|
||||||
- [x] [Brand new search plugin :material-new-box:][35]
|
- [x] [Brand new search plugin :material-new-box:][35]
|
||||||
- [x] [Rich search previews :material-new-box:][36]
|
- [x] [Rich search previews :material-new-box:][36]
|
||||||
@ -150,7 +150,7 @@ The following features are currently exclusively available to sponsors:
|
|||||||
- [x] [Stay on page when switching versions][28]
|
- [x] [Stay on page when switching versions][28]
|
||||||
- [x] [Version warning][26]
|
- [x] [Version warning][26]
|
||||||
- [x] [Custom admonition icons][31]
|
- [x] [Custom admonition icons][31]
|
||||||
- [x] [Code block annotations][25]
|
- [x] [Code annotations][25]
|
||||||
- [x] [Anchor tracking ][24]
|
- [x] [Anchor tracking ][24]
|
||||||
- [x] [Mermaid.js integration][27]
|
- [x] [Mermaid.js integration][27]
|
||||||
|
|
||||||
@ -173,7 +173,7 @@ the public for general availability.
|
|||||||
#### $ 4,000 – Ghost Pepper
|
#### $ 4,000 – Ghost Pepper
|
||||||
|
|
||||||
- [x] [Anchor tracking][24]
|
- [x] [Anchor tracking][24]
|
||||||
- [x] [Code block annotations][25]
|
- [x] [Code annotations][25]
|
||||||
- [x] [Version warning][26]
|
- [x] [Version warning][26]
|
||||||
|
|
||||||
[24]: ../setup/setting-up-navigation.md#anchor-tracking
|
[24]: ../setup/setting-up-navigation.md#anchor-tracking
|
||||||
@ -197,8 +197,8 @@ the public for general availability.
|
|||||||
- [x] [Linking content tabs][32]
|
- [x] [Linking content tabs][32]
|
||||||
|
|
||||||
[30]: ../setup/setting-up-site-search.md#search-boosting
|
[30]: ../setup/setting-up-site-search.md#search-boosting
|
||||||
[31]: ../reference/admonitions.md#changing-the-icons
|
[31]: ../reference/admonitions.md#admonition-icons
|
||||||
[32]: ../reference/content-tabs.md#linking-content-tabs
|
[32]: ../reference/content-tabs.md#linked-content-tabs
|
||||||
|
|
||||||
#### $ 7,000 – Royal Gold
|
#### $ 7,000 – Royal Gold
|
||||||
|
|
||||||
@ -240,7 +240,7 @@ the public for general availability.
|
|||||||
|
|
||||||
[21]: ../setup/setting-up-navigation.md#sticky-navigation-tabs
|
[21]: ../setup/setting-up-navigation.md#sticky-navigation-tabs
|
||||||
[22]: ../setup/setting-up-navigation.md#section-index-pages
|
[22]: ../setup/setting-up-navigation.md#section-index-pages
|
||||||
[23]: ../setup/setting-up-the-footer.md#remove-generator
|
[23]: ../setup/setting-up-the-footer.md#generator-notice
|
||||||
|
|
||||||
#### $ 2,500 – Biquinho Vermelho
|
#### $ 2,500 – Biquinho Vermelho
|
||||||
|
|
||||||
|
@ -10,15 +10,15 @@ makes this ridiculously simple.
|
|||||||
|
|
||||||
## GitHub Pages
|
## GitHub Pages
|
||||||
|
|
||||||
If you're already hosting your code on GitHub, [GitHub Pages][1] is certainly
|
If you're already hosting your code on GitHub, [GitHub Pages] is certainly
|
||||||
the most convenient way to publish your project documentation. It's free of
|
the most convenient way to publish your project documentation. It's free of
|
||||||
charge and pretty easy to set up.
|
charge and pretty easy to set up.
|
||||||
|
|
||||||
[1]: https://pages.github.com/
|
[GitHub Pages]: https://pages.github.com/
|
||||||
|
|
||||||
### with GitHub Actions
|
### with GitHub Actions
|
||||||
|
|
||||||
Using [GitHub Actions][2] you can automate the deployment of your project
|
Using [GitHub Actions] you can automate the deployment of your project
|
||||||
documentation. At the root of your repository, create a new GitHub Actions
|
documentation. At the root of your repository, create a new GitHub Actions
|
||||||
workflow, e.g. `.github/workflows/ci.yml`, and copy and paste the following
|
workflow, e.g. `.github/workflows/ci.yml`, and copy and paste the following
|
||||||
contents:
|
contents:
|
||||||
@ -49,7 +49,7 @@ contents:
|
|||||||
2. At some point, GitHub renamed `master` to `main`. If your default branch
|
2. At some point, GitHub renamed `master` to `main`. If your default branch
|
||||||
is named `master`, you can safely remove `main`, vice versa.
|
is named `master`, you can safely remove `main`, vice versa.
|
||||||
|
|
||||||
3. This is the place to install further [MkDocs plugins][3] or Markdown
|
3. This is the place to install further [MkDocs plugins] or Markdown
|
||||||
extensions with `pip` to be used during the build:
|
extensions with `pip` to be used during the build:
|
||||||
|
|
||||||
``` sh
|
``` sh
|
||||||
@ -80,24 +80,24 @@ contents:
|
|||||||
- run: pip install git+https://${GH_TOKEN}@github.com/squidfunk/mkdocs-material-insiders.git
|
- run: pip install git+https://${GH_TOKEN}@github.com/squidfunk/mkdocs-material-insiders.git
|
||||||
- run: mkdocs gh-deploy --force
|
- run: mkdocs gh-deploy --force
|
||||||
env:
|
env:
|
||||||
GH_TOKEN: ${{ secrets.GH_TOKEN }}
|
GH_TOKEN: ${{ secrets.GH_TOKEN }} # (1)
|
||||||
```
|
```
|
||||||
|
|
||||||
|
1. Remember to set the `GH_TOKEN` environment variable to the value of your
|
||||||
|
[personal access token] when deploying [Insiders], which can be done
|
||||||
|
using [GitHub secrets].
|
||||||
|
|
||||||
Now, when a new commit is pushed to either the `master` or `main` branches,
|
Now, when a new commit is pushed to either the `master` or `main` branches,
|
||||||
the static site is automatically built and deployed. Push your changes to see
|
the static site is automatically built and deployed. Push your changes to see
|
||||||
the workflow in action.
|
the workflow in action.
|
||||||
|
|
||||||
Your documentation should shortly appear at `<username>.github.io/<repository>`.
|
Your documentation should shortly appear at `<username>.github.io/<repository>`.
|
||||||
|
|
||||||
_Remember to set the_ `GH_TOKEN` _environment variable to the value of your
|
[GitHub Actions]: https://github.com/features/actions
|
||||||
[personal access token][4] when deploying [Insiders][5], which can be done
|
[MkDocs plugins]: https://github.com/mkdocs/mkdocs/wiki/MkDocs-Plugins
|
||||||
using [secrets][6]._
|
[personal access token]: https://docs.github.com/en/github/authenticating-to-github/creating-a-personal-access-token
|
||||||
|
[Insiders]: insiders/index.md
|
||||||
[2]: https://github.com/features/actions
|
[GitHub secrets]: https://docs.github.com/en/actions/configuring-and-managing-workflows/creating-and-storing-encrypted-secrets
|
||||||
[3]: https://github.com/mkdocs/mkdocs/wiki/MkDocs-Plugins
|
|
||||||
[4]: https://docs.github.com/en/github/authenticating-to-github/creating-a-personal-access-token
|
|
||||||
[5]: insiders/index.md
|
|
||||||
[6]: https://docs.github.com/en/actions/configuring-and-managing-workflows/creating-and-storing-encrypted-secrets
|
|
||||||
|
|
||||||
### with MkDocs
|
### with MkDocs
|
||||||
|
|
||||||
@ -110,10 +110,10 @@ mkdocs gh-deploy --force
|
|||||||
|
|
||||||
## GitLab Pages
|
## GitLab Pages
|
||||||
|
|
||||||
If you're hosting your code on GitLab, deploying to [GitLab Pages][7] can be
|
If you're hosting your code on GitLab, deploying to [GitLab Pages] can be done
|
||||||
done by using the [GitLab CI][8] task runner. At the root of your repository,
|
by using the [GitLab CI] task runner. At the root of your repository, create a
|
||||||
create a task definition named `.gitlab-ci.yml` and copy and paste the
|
task definition named `.gitlab-ci.yml` and copy and paste the following
|
||||||
following contents:
|
contents:
|
||||||
|
|
||||||
=== "Material for MkDocs"
|
=== "Material for MkDocs"
|
||||||
|
|
||||||
@ -139,7 +139,7 @@ following contents:
|
|||||||
stage: deploy
|
stage: deploy
|
||||||
only:
|
only:
|
||||||
- master
|
- master
|
||||||
script:
|
script: # (1)
|
||||||
- pip install git+https://${GH_TOKEN}@github.com/squidfunk/mkdocs-material-insiders.git
|
- pip install git+https://${GH_TOKEN}@github.com/squidfunk/mkdocs-material-insiders.git
|
||||||
- mkdocs build --site-dir public
|
- mkdocs build --site-dir public
|
||||||
artifacts:
|
artifacts:
|
||||||
@ -147,16 +147,16 @@ following contents:
|
|||||||
- public
|
- public
|
||||||
```
|
```
|
||||||
|
|
||||||
|
1. Remember to set the `GH_TOKEN` environment variable to the value of your
|
||||||
|
[personal access token] when deploying [Insiders], which can be done
|
||||||
|
using [masked custom variables].
|
||||||
|
|
||||||
Now, when a new commit is pushed to `master`, the static site is automatically
|
Now, when a new commit is pushed to `master`, the static site is automatically
|
||||||
built and deployed. Commit and push the file to your repository to see the
|
built and deployed. Commit and push the file to your repository to see the
|
||||||
workflow in action.
|
workflow in action.
|
||||||
|
|
||||||
Your documentation should shortly appear at `<username>.gitlab.io/<repository>`.
|
Your documentation should shortly appear at `<username>.gitlab.io/<repository>`.
|
||||||
|
|
||||||
_Remember to set the_ `GH_TOKEN` _environment variable to the value of your
|
[GitLab Pages]: https://gitlab.com/pages
|
||||||
[personal access token][4] when deploying [Insiders][5], which can be done
|
[GitLab CI]: https://docs.gitlab.com/ee/ci/
|
||||||
using [masked custom variables][9]._
|
[masked custom variables]: https://docs.gitlab.com/ee/ci/variables/#create-a-custom-variable-in-the-ui
|
||||||
|
|
||||||
[7]: https://gitlab.com/pages
|
|
||||||
[8]: https://docs.gitlab.com/ee/ci/
|
|
||||||
[9]: https://docs.gitlab.com/ee/ci/variables/#create-a-custom-variable-in-the-ui
|
|
||||||
|
@ -4,50 +4,38 @@ template: overrides/main.html
|
|||||||
|
|
||||||
# Abbreviations
|
# Abbreviations
|
||||||
|
|
||||||
Technical documentation often incurs the usage of a lot of acronyms, which may
|
Technical documentation often incurs the usage of many acronyms, which may
|
||||||
need additional explanation, especially for new user of your project. For these
|
need additional explanation, especially for new user of your project. For these
|
||||||
matters, Material for MkDocs uses a combination of Markdown extensions to
|
matters, Material for MkDocs uses a combination of Markdown extensions to
|
||||||
enable site-wide glossaries.
|
enable site-wide glossaries.
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
### Abbreviations
|
This configuration enables abbreviations and allows to build a simple
|
||||||
|
project-wide glossary, sourcing definitions from a central location. Add the
|
||||||
[:octicons-file-code-24: Source][1] · [:octicons-workflow-24: Extension][2]
|
following line to `mkdocs.yml`:
|
||||||
|
|
||||||
The [Abbreviations][2] extension, which is part of the standard Markdown
|
|
||||||
library, allows to __add additional content to parts of the text which are then
|
|
||||||
shown on hover__, e.g. for glossaries:
|
|
||||||
|
|
||||||
``` yaml
|
``` yaml
|
||||||
markdown_extensions:
|
markdown_extensions:
|
||||||
- abbr
|
- abbr
|
||||||
```
|
|
||||||
|
|
||||||
[1]: https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/stylesheets/main/_typeset.scss
|
|
||||||
[2]: https://python-markdown.github.io/extensions/abbreviations/
|
|
||||||
|
|
||||||
### Snippets
|
|
||||||
|
|
||||||
The [Snippets][3] extension, which is part of [Python Markdown Extensions][4],
|
|
||||||
allows to __insert content from other files__ or other, regular content, and can
|
|
||||||
be enabled via `mkdocs.yml`:
|
|
||||||
|
|
||||||
``` yaml
|
|
||||||
markdown_extensions:
|
|
||||||
- pymdownx.snippets
|
- pymdownx.snippets
|
||||||
```
|
```
|
||||||
|
|
||||||
[3]: https://facelessuser.github.io/pymdown-extensions/extensions/snippets/
|
See additional configuration options:
|
||||||
[4]: https://facelessuser.github.io/pymdown-extensions/
|
|
||||||
|
- [Abbreviations]
|
||||||
|
- [Snippets]
|
||||||
|
|
||||||
|
[Abbreviations]: ../setup/extensions/python-markdown.md#abbreviations
|
||||||
|
[Snippets]: ../setup/extensions/python-markdown-extensions.md#snippets
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
### Adding abbreviations
|
### Adding abbreviations
|
||||||
|
|
||||||
When the [Abbreviations][5] extension is enabled, abbreviations can be defined
|
Abbreviations can be defined by using a special syntax similar to URLs and
|
||||||
with a special syntax similar to URLs and [footnotes][6] at any point in the
|
[footnotes], starting with a `*` and immediately followed by the term or
|
||||||
Markdown document.
|
acronym to be associated in square brackets.
|
||||||
|
|
||||||
_Example_:
|
_Example_:
|
||||||
|
|
||||||
@ -65,26 +53,31 @@ The HTML specification is maintained by the W3C.
|
|||||||
*[HTML]: Hyper Text Markup Language
|
*[HTML]: Hyper Text Markup Language
|
||||||
*[W3C]: World Wide Web Consortium
|
*[W3C]: World Wide Web Consortium
|
||||||
|
|
||||||
[5]: #abbreviations_1
|
[footnotes]: footnotes.md
|
||||||
[6]: footnotes.md
|
|
||||||
|
|
||||||
### Adding a glossary
|
### Adding a glossary
|
||||||
|
|
||||||
When [Snippets][7] is enabled, content from other files can be embedded, which
|
The [Snippets] extension can be used to implement a simple glossary by moving
|
||||||
is especially useful to include abbreviations from a central file – a glossary –
|
all abbreviations in a dedicated file[^1], and embedding it with the
|
||||||
and embed them into any other file.
|
[`--8<--` notation][Snippets notation] at the end of each document.
|
||||||
|
|
||||||
|
[^1]:
|
||||||
|
It's highly recommended to put the Markdown file containing the
|
||||||
|
abbreviations outside of the `docs` folder (here, a folder with the name
|
||||||
|
`includes` is used), as MkDocs might otherwise complain about an
|
||||||
|
unreferenced file.
|
||||||
|
|
||||||
_Example_:
|
_Example_:
|
||||||
|
|
||||||
=== "`docs/page.md`"
|
=== ":octicons-file-code-16: docs/example.md"
|
||||||
|
|
||||||
```` markdown
|
```` markdown
|
||||||
The HTML specification is maintained by the W3C.
|
The HTML specification is maintained by the W3C.
|
||||||
|
|
||||||
--8<-- "includes/abbreviations.md"
|
--8<-- "includes/abbreviations.md"
|
||||||
````
|
````
|
||||||
|
|
||||||
=== "`includes/abbreviations.md`"
|
=== ":octicons-file-code-16: includes/abbreviations.md"
|
||||||
|
|
||||||
```` markdown
|
```` markdown
|
||||||
*[HTML]: Hyper Text Markup Language
|
*[HTML]: Hyper Text Markup Language
|
||||||
@ -95,8 +88,4 @@ _Result_:
|
|||||||
|
|
||||||
The HTML specification is maintained by the W3C.
|
The HTML specification is maintained by the W3C.
|
||||||
|
|
||||||
_Remember to locate the Markdown file containing the definitions outside of the_
|
[Snippets notation]: https://facelessuser.github.io/pymdown-extensions/extensions/snippets/#snippets-notation
|
||||||
`docs` _folder (here_ `includes` _is used), or MkDocs may complain about an
|
|
||||||
unreferenced file._
|
|
||||||
|
|
||||||
[7]: #snippets
|
|
||||||
|
@ -11,61 +11,119 @@ inclusion and nesting of arbitrary content.
|
|||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
### Admonition
|
This configuration enables admonitions, allows to make them collapsible and to
|
||||||
|
nest arbitrary content inside admonitions. Add the following lines to
|
||||||
[:octicons-file-code-24: Source][1] · [:octicons-workflow-24: Extension][2]
|
|
||||||
|
|
||||||
The [Admonition][2] extension, which is part of the standard Markdown
|
|
||||||
library, is integrated with Material for MkDocs and can be enabled via
|
|
||||||
`mkdocs.yml`:
|
`mkdocs.yml`:
|
||||||
|
|
||||||
``` yaml
|
``` yaml
|
||||||
markdown_extensions:
|
markdown_extensions:
|
||||||
- admonition
|
- admonition
|
||||||
```
|
|
||||||
|
|
||||||
[1]: https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/stylesheets/main/extensions/markdown/_admonition.scss
|
|
||||||
[2]: https://python-markdown.github.io/extensions/admonition/
|
|
||||||
|
|
||||||
### Details
|
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][3] · [:octicons-workflow-24: Extension][4]
|
|
||||||
|
|
||||||
The [Details][4] extension, which is part of [Python Markdown Extensions][5],
|
|
||||||
adds the ability to __make admonitions collapsible__. It can be enabled via
|
|
||||||
`mkdocs.yml`:
|
|
||||||
|
|
||||||
``` yaml
|
|
||||||
markdown_extensions:
|
|
||||||
- pymdownx.details
|
- pymdownx.details
|
||||||
```
|
|
||||||
|
|
||||||
[3]: https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/stylesheets/main/extensions/pymdownx/_details.scss
|
|
||||||
[4]: https://facelessuser.github.io/pymdown-extensions/extensions/details/
|
|
||||||
[5]: https://facelessuser.github.io/pymdown-extensions/
|
|
||||||
|
|
||||||
### SuperFences
|
|
||||||
|
|
||||||
The [SuperFences][6] extension, which is also part of [Python Markdown
|
|
||||||
Extensions][5], allows for the __nesting of code and content blocks inside
|
|
||||||
admonitions__, and is therefore strongly recommended:
|
|
||||||
|
|
||||||
``` yaml
|
|
||||||
markdown_extensions:
|
|
||||||
- pymdownx.superfences
|
- pymdownx.superfences
|
||||||
```
|
```
|
||||||
[6]: https://facelessuser.github.io/pymdown-extensions/extensions/superfences/
|
|
||||||
|
See additional configuration options:
|
||||||
|
|
||||||
|
- [Admonition]
|
||||||
|
- [Details]
|
||||||
|
- [SuperFences]
|
||||||
|
|
||||||
|
[Admonition]: ../setup/extensions/python-markdown.md#admonition
|
||||||
|
[Details]: ../setup/extensions/python-markdown-extensions.md#details
|
||||||
|
[SuperFences]: ../setup/extensions/python-markdown-extensions.md#superfences
|
||||||
|
|
||||||
|
### Admonition icons
|
||||||
|
|
||||||
|
[:octicons-heart-fill-24:{ .mdx-heart } Insiders][Insiders]{ .mdx-insiders } ·
|
||||||
|
[:octicons-tag-24: insiders-2.4.0][Insiders]
|
||||||
|
|
||||||
|
Each of the supported admonition types has a distinct icon, which can be changed
|
||||||
|
to any icon bundled with the theme, or even a [custom icon]. Add the following
|
||||||
|
lines to `mkdocs.yml`:
|
||||||
|
|
||||||
|
``` yaml
|
||||||
|
theme:
|
||||||
|
icon:
|
||||||
|
admonition:
|
||||||
|
<type>: <icon> # (1)
|
||||||
|
```
|
||||||
|
|
||||||
|
1. Set `<type`> to any of the [supported types] and `<icon>` to any valid icon
|
||||||
|
shortcode, which you can find by using the [icon search].
|
||||||
|
|
||||||
|
??? example "Example: using alternative icon sets"
|
||||||
|
|
||||||
|
=== ":octicons-mark-github-16: Octicons"
|
||||||
|
|
||||||
|
_Example_:
|
||||||
|
|
||||||
|
``` yaml
|
||||||
|
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
|
||||||
|
```
|
||||||
|
|
||||||
|
_Result_:
|
||||||
|
|
||||||
|
[![Octicons]][Octicons]
|
||||||
|
|
||||||
|
|
||||||
|
=== ":fontawesome-brands-font-awesome: FontAwesome"
|
||||||
|
|
||||||
|
_Example_:
|
||||||
|
|
||||||
|
``` yaml
|
||||||
|
theme:
|
||||||
|
icon:
|
||||||
|
admonition:
|
||||||
|
note: fontawesome/solid/sticky-note
|
||||||
|
abstract: fontawesome/solid/book
|
||||||
|
info: fontawesome/solid/info-circle
|
||||||
|
tip: fontawesome/solid/bullhorn
|
||||||
|
success: fontawesome/solid/check
|
||||||
|
question: fontawesome/solid/question-circle
|
||||||
|
warning: fontawesome/solid/exclamation-triangle
|
||||||
|
failure: fontawesome/solid/bomb
|
||||||
|
danger: fontawesome/solid/skull
|
||||||
|
bug: fontawesome/solid/robot
|
||||||
|
example: fontawesome/solid/flask
|
||||||
|
quote: fontawesome/solid/quote-left
|
||||||
|
```
|
||||||
|
|
||||||
|
_Result_:
|
||||||
|
|
||||||
|
[![FontAwesome]][FontAwesome]
|
||||||
|
|
||||||
|
[Insiders]: ../insiders/index.md
|
||||||
|
[custom icon]: icons-emojis.md#additional-icons
|
||||||
|
[supported types]: #supported-types
|
||||||
|
[icon search]: icons-emojis.md#search
|
||||||
|
[Octicons]: ../assets/screenshots/admonition-octicons.png
|
||||||
|
[FontAwesome]: ../assets/screenshots/admonition-fontawesome.png
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
Admonitions follow a simple syntax: a block must start with `!!!`, followed
|
Admonitions follow a simple syntax: a block starts with `!!!`, followed by a
|
||||||
by a single keyword which is used as the [type qualifier][7] of the block. The
|
single keyword used as a [type qualifier]. The content of the block follows on
|
||||||
content of the block then follows on the next line, indented by four spaces.
|
the next line, indented by four spaces.
|
||||||
|
|
||||||
_Example_:
|
_Example_:
|
||||||
|
|
||||||
``` markdown
|
``` markdown
|
||||||
!!! note
|
!!! note
|
||||||
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
|
||||||
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
|
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
|
||||||
massa, nec semper lorem quam in massa.
|
massa, nec semper lorem quam in massa.
|
||||||
@ -79,7 +137,7 @@ _Result_:
|
|||||||
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
|
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
|
||||||
massa, nec semper lorem quam in massa.
|
massa, nec semper lorem quam in massa.
|
||||||
|
|
||||||
[7]: #supported-types
|
[type qualifier]: #supported-types
|
||||||
|
|
||||||
### Changing the title
|
### Changing the title
|
||||||
|
|
||||||
@ -91,6 +149,7 @@ _Example_:
|
|||||||
|
|
||||||
``` markdown
|
``` markdown
|
||||||
!!! note "Phasellus posuere in sem ut cursus"
|
!!! note "Phasellus posuere in sem ut cursus"
|
||||||
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
|
||||||
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
|
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
|
||||||
massa, nec semper lorem quam in massa.
|
massa, nec semper lorem quam in massa.
|
||||||
@ -106,14 +165,15 @@ _Result_:
|
|||||||
|
|
||||||
### Removing the title
|
### Removing the title
|
||||||
|
|
||||||
Similar to [changing the title][8], the icon and title can be omitted entirely
|
Similar to [changing the title], the icon and title can be omitted entirely by
|
||||||
by adding an empty string directly after the type qualifier. Note that this
|
adding an empty string directly after the type qualifier. Note that this will
|
||||||
will not work for [collapsible blocks][9].
|
not work for [collapsible blocks].
|
||||||
|
|
||||||
_Example_:
|
_Example_:
|
||||||
|
|
||||||
``` markdown
|
``` markdown
|
||||||
!!! note ""
|
!!! note ""
|
||||||
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
|
||||||
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
|
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
|
||||||
massa, nec semper lorem quam in massa.
|
massa, nec semper lorem quam in massa.
|
||||||
@ -127,70 +187,20 @@ _Result_:
|
|||||||
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
|
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
|
||||||
massa, nec semper lorem quam in massa.
|
massa, nec semper lorem quam in massa.
|
||||||
|
|
||||||
[8]: #changing-the-title
|
[changing the title]: #changing-the-title
|
||||||
[9]: #collapsible-blocks
|
[collapsible blocks]: #collapsible-blocks
|
||||||
|
|
||||||
### Embedded content
|
|
||||||
|
|
||||||
Admonitions can contain all kinds of text content, including headlines, lists,
|
|
||||||
paragraphs and other blocks. While the parser from the standard Markdown library
|
|
||||||
doesn't account for nested blocks, the [SuperFences][10] extension adds the
|
|
||||||
ability to nest arbitrary content inside admonitions.
|
|
||||||
|
|
||||||
_Example_:
|
|
||||||
|
|
||||||
``` markdown
|
|
||||||
!!! note
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
|
|
||||||
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
|
|
||||||
massa, nec semper lorem quam in massa.
|
|
||||||
|
|
||||||
``` python
|
|
||||||
def bubble_sort(items):
|
|
||||||
for i in range(len(items)):
|
|
||||||
for j in range(len(items) - 1 - i):
|
|
||||||
if items[j] > items[j + 1]:
|
|
||||||
items[j], items[j + 1] = items[j + 1], items[j]
|
|
||||||
```
|
|
||||||
|
|
||||||
Nunc eu odio eleifend, blandit leo a, volutpat sapien. Phasellus posuere in
|
|
||||||
sem ut cursus. Nullam sit amet tincidunt ipsum, sit amet elementum turpis.
|
|
||||||
Etiam ipsum quam, mattis in purus vitae, lacinia fermentum enim.
|
|
||||||
```
|
|
||||||
|
|
||||||
_Result_:
|
|
||||||
|
|
||||||
!!! note
|
|
||||||
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
|
|
||||||
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
|
|
||||||
massa, nec semper lorem quam in massa.
|
|
||||||
|
|
||||||
``` python
|
|
||||||
def bubble_sort(items):
|
|
||||||
for i in range(len(items)):
|
|
||||||
for j in range(len(items) - 1 - i):
|
|
||||||
if items[j] > items[j + 1]:
|
|
||||||
items[j], items[j + 1] = items[j + 1], items[j]
|
|
||||||
```
|
|
||||||
|
|
||||||
Nunc eu odio eleifend, blandit leo a, volutpat sapien. Phasellus posuere in
|
|
||||||
sem ut cursus. Nullam sit amet tincidunt ipsum, sit amet elementum turpis.
|
|
||||||
Etiam ipsum quam, mattis in purus vitae, lacinia fermentum enim.
|
|
||||||
|
|
||||||
[10]: #superfences
|
|
||||||
|
|
||||||
### Collapsible blocks
|
### Collapsible blocks
|
||||||
|
|
||||||
The [Details][11] extension adds support for rendering collapsible admonition
|
When [Details] is enabled and an admonition block is started with `???` instead
|
||||||
blocks. This is useful for FAQs or content that is of secondary nature. A
|
of `!!!`, the admonition is rendered as a collapsible block with a small toggle
|
||||||
details block follows the syntax and semantics of admonition blocks, but must
|
on the right side.
|
||||||
start with `???`.
|
|
||||||
|
|
||||||
_Example_:
|
_Example_:
|
||||||
|
|
||||||
``` markdown
|
``` markdown
|
||||||
??? note
|
??? note
|
||||||
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
|
||||||
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
|
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
|
||||||
massa, nec semper lorem quam in massa.
|
massa, nec semper lorem quam in massa.
|
||||||
@ -204,12 +214,13 @@ _Result_:
|
|||||||
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
|
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
|
||||||
massa, nec semper lorem quam in massa.
|
massa, nec semper lorem quam in massa.
|
||||||
|
|
||||||
Adding a `+` after `???` will render the block as open on page load:
|
Adding a `+` after the `???` token will render the block as open.
|
||||||
|
|
||||||
_Example_:
|
_Example_:
|
||||||
|
|
||||||
``` markdown
|
``` markdown
|
||||||
???+ note
|
???+ note
|
||||||
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
|
||||||
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
|
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
|
||||||
massa, nec semper lorem quam in massa.
|
massa, nec semper lorem quam in massa.
|
||||||
@ -223,23 +234,16 @@ _Result_:
|
|||||||
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
|
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
|
||||||
massa, nec semper lorem quam in massa.
|
massa, nec semper lorem quam in massa.
|
||||||
|
|
||||||
[11]: #details
|
|
||||||
|
|
||||||
### Inline blocks
|
### Inline blocks
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][12] ·
|
[:octicons-tag-24: 7.0.0][Inline support] ·
|
||||||
:octicons-beaker-24: Experimental
|
:octicons-beaker-24: Experimental
|
||||||
|
|
||||||
Admonitions and [Details][11] can also be rendered as inline blocks (i.e.
|
Admonitions can also be rendered as inline blocks (i.e. for sidebars), placing
|
||||||
sidebars), placing them to the right using the `inline` + `end` modifiers, or
|
them to the right using the `inline` + `end` modifiers, or to the left using
|
||||||
to the left using only the `inline` modifier.
|
only the `inline` modifier.
|
||||||
|
|
||||||
__Important__: Admonitions that use the `inline` modifiers _must_ be declared
|
=== ":octicons-arrow-right-16: inline end"
|
||||||
prior to the content block you want to place them beside. If there's
|
|
||||||
insufficient space to render the admonition next to the block, the admonition
|
|
||||||
will stretch to the full width of the viewport, e.g. on mobile viewports.
|
|
||||||
|
|
||||||
=== "inline end"
|
|
||||||
|
|
||||||
_Example_ / _Result_:
|
_Example_ / _Result_:
|
||||||
|
|
||||||
@ -251,6 +255,7 @@ will stretch to the full width of the viewport, e.g. on mobile viewports.
|
|||||||
|
|
||||||
``` markdown
|
``` markdown
|
||||||
!!! info inline end
|
!!! info inline end
|
||||||
|
|
||||||
Lorem ipsum dolor sit amet, consectetur
|
Lorem ipsum dolor sit amet, consectetur
|
||||||
adipiscing elit. Nulla et euismod nulla.
|
adipiscing elit. Nulla et euismod nulla.
|
||||||
Curabitur feugiat, tortor non consequat
|
Curabitur feugiat, tortor non consequat
|
||||||
@ -260,7 +265,7 @@ will stretch to the full width of the viewport, e.g. on mobile viewports.
|
|||||||
|
|
||||||
Use `inline end` to align to the right (left for rtl languages).
|
Use `inline end` to align to the right (left for rtl languages).
|
||||||
|
|
||||||
=== "inline"
|
=== ":octicons-arrow-left-16: inline"
|
||||||
|
|
||||||
_Example_ / _Result_:
|
_Example_ / _Result_:
|
||||||
|
|
||||||
@ -272,6 +277,7 @@ will stretch to the full width of the viewport, e.g. on mobile viewports.
|
|||||||
|
|
||||||
``` markdown
|
``` markdown
|
||||||
!!! info inline
|
!!! info inline
|
||||||
|
|
||||||
Lorem ipsum dolor sit amet, consectetur
|
Lorem ipsum dolor sit amet, consectetur
|
||||||
adipiscing elit. Nulla et euismod nulla.
|
adipiscing elit. Nulla et euismod nulla.
|
||||||
Curabitur feugiat, tortor non consequat
|
Curabitur feugiat, tortor non consequat
|
||||||
@ -281,14 +287,19 @@ will stretch to the full width of the viewport, e.g. on mobile viewports.
|
|||||||
|
|
||||||
Use `inline` to align to the left (right for rtl languages).
|
Use `inline` to align to the left (right for rtl languages).
|
||||||
|
|
||||||
[12]: https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/stylesheets/main/_modifiers.scss
|
__Important__: Admonitions that use the `inline` modifiers _must_ be declared
|
||||||
|
prior to the content block you want to place them beside. If there's
|
||||||
|
insufficient space to render the admonition next to the block, the admonition
|
||||||
|
will stretch to the full width of the viewport, e.g. on mobile viewports.
|
||||||
|
|
||||||
|
[Inline support]: https://github.com/squidfunk/mkdocs-material/releases/tag/7.0.0
|
||||||
|
|
||||||
### Supported types
|
### Supported types
|
||||||
|
|
||||||
Following is a list of type qualifiers provided by Material for MkDocs, whereas
|
Following is a list of type qualifiers provided by Material for MkDocs, whereas
|
||||||
the default type, and thus fallback for unknown type qualifiers, is `note`:
|
the default type, and thus fallback for unknown type qualifiers, is `note`:
|
||||||
|
|
||||||
`note`{ #note }, ~~`seealso`~~ [^1]
|
`note`{ #type-note }, ~~`seealso`~~ [^1]
|
||||||
|
|
||||||
: !!! note
|
: !!! note
|
||||||
|
|
||||||
@ -296,7 +307,7 @@ the default type, and thus fallback for unknown type qualifiers, is `note`:
|
|||||||
euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo
|
euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo
|
||||||
purus auctor massa, nec semper lorem quam in massa.
|
purus auctor massa, nec semper lorem quam in massa.
|
||||||
|
|
||||||
`abstract`{ #abstract }, `summary`, `tldr`
|
`abstract`{ #type-abstract }, `summary`, `tldr`
|
||||||
|
|
||||||
: !!! abstract
|
: !!! abstract
|
||||||
|
|
||||||
@ -304,7 +315,7 @@ the default type, and thus fallback for unknown type qualifiers, is `note`:
|
|||||||
euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo
|
euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo
|
||||||
purus auctor massa, nec semper lorem quam in massa.
|
purus auctor massa, nec semper lorem quam in massa.
|
||||||
|
|
||||||
`info`{ #info }, `todo`
|
`info`{ #type-info }, `todo`
|
||||||
|
|
||||||
: !!! info
|
: !!! info
|
||||||
|
|
||||||
@ -312,7 +323,7 @@ the default type, and thus fallback for unknown type qualifiers, is `note`:
|
|||||||
euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo
|
euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo
|
||||||
purus auctor massa, nec semper lorem quam in massa.
|
purus auctor massa, nec semper lorem quam in massa.
|
||||||
|
|
||||||
`tip`{ #tip }, `hint`, `important`
|
`tip`{ #type-tip }, `hint`, `important`
|
||||||
|
|
||||||
: !!! tip
|
: !!! tip
|
||||||
|
|
||||||
@ -320,7 +331,7 @@ the default type, and thus fallback for unknown type qualifiers, is `note`:
|
|||||||
euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo
|
euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo
|
||||||
purus auctor massa, nec semper lorem quam in massa.
|
purus auctor massa, nec semper lorem quam in massa.
|
||||||
|
|
||||||
`success`{ #success }, `check`, `done`
|
`success`{ #type-success }, `check`, `done`
|
||||||
|
|
||||||
: !!! success
|
: !!! success
|
||||||
|
|
||||||
@ -328,7 +339,7 @@ the default type, and thus fallback for unknown type qualifiers, is `note`:
|
|||||||
euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo
|
euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo
|
||||||
purus auctor massa, nec semper lorem quam in massa.
|
purus auctor massa, nec semper lorem quam in massa.
|
||||||
|
|
||||||
`question`{ #question }, `help`, `faq`
|
`question`{ #type-question }, `help`, `faq`
|
||||||
|
|
||||||
: !!! question
|
: !!! question
|
||||||
|
|
||||||
@ -336,7 +347,7 @@ the default type, and thus fallback for unknown type qualifiers, is `note`:
|
|||||||
euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo
|
euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo
|
||||||
purus auctor massa, nec semper lorem quam in massa.
|
purus auctor massa, nec semper lorem quam in massa.
|
||||||
|
|
||||||
`warning`{ #warning }, `caution`, `attention`
|
`warning`{ #type-warning }, `caution`, `attention`
|
||||||
|
|
||||||
: !!! warning
|
: !!! warning
|
||||||
|
|
||||||
@ -344,7 +355,7 @@ the default type, and thus fallback for unknown type qualifiers, is `note`:
|
|||||||
euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo
|
euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo
|
||||||
purus auctor massa, nec semper lorem quam in massa.
|
purus auctor massa, nec semper lorem quam in massa.
|
||||||
|
|
||||||
`failure`{ #failure }, `fail`, `missing`
|
`failure`{ #type-failure }, `fail`, `missing`
|
||||||
|
|
||||||
: !!! failure
|
: !!! failure
|
||||||
|
|
||||||
@ -352,7 +363,7 @@ the default type, and thus fallback for unknown type qualifiers, is `note`:
|
|||||||
euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo
|
euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo
|
||||||
purus auctor massa, nec semper lorem quam in massa.
|
purus auctor massa, nec semper lorem quam in massa.
|
||||||
|
|
||||||
`danger`{ #danger }, `error`
|
`danger`{ #type-danger }, `error`
|
||||||
|
|
||||||
: !!! danger
|
: !!! danger
|
||||||
|
|
||||||
@ -360,7 +371,7 @@ the default type, and thus fallback for unknown type qualifiers, is `note`:
|
|||||||
euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo
|
euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo
|
||||||
purus auctor massa, nec semper lorem quam in massa.
|
purus auctor massa, nec semper lorem quam in massa.
|
||||||
|
|
||||||
`bug`{ #bug }
|
`bug`{ #type-bug }
|
||||||
|
|
||||||
: !!! bug
|
: !!! bug
|
||||||
|
|
||||||
@ -368,7 +379,7 @@ the default type, and thus fallback for unknown type qualifiers, is `note`:
|
|||||||
euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo
|
euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo
|
||||||
purus auctor massa, nec semper lorem quam in massa.
|
purus auctor massa, nec semper lorem quam in massa.
|
||||||
|
|
||||||
`example`{ #example }
|
`example`{ #type-example }
|
||||||
|
|
||||||
: !!! example
|
: !!! example
|
||||||
|
|
||||||
@ -376,7 +387,7 @@ the default type, and thus fallback for unknown type qualifiers, is `note`:
|
|||||||
euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo
|
euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo
|
||||||
purus auctor massa, nec semper lorem quam in massa.
|
purus auctor massa, nec semper lorem quam in massa.
|
||||||
|
|
||||||
`quote`{ #quote }, `cite`
|
`quote`{ #type-quote }, `cite`
|
||||||
|
|
||||||
: !!! quote
|
: !!! quote
|
||||||
|
|
||||||
@ -389,106 +400,15 @@ the default type, and thus fallback for unknown type qualifiers, is `note`:
|
|||||||
in order to make it easier for authors to migrate to Material for MkDocs.
|
in order to make it easier for authors to migrate to Material for MkDocs.
|
||||||
However, when the title is omitted, the admonition extension will render it
|
However, when the title is omitted, the admonition extension will render it
|
||||||
as `Seealso`, which is incorrect English. For this reason, it was deprecated
|
as `Seealso`, which is incorrect English. For this reason, it was deprecated
|
||||||
as of 7.1.5 and will be removed in 8.x.
|
in :octicons-tag-24: 7.1.5 and will be removed in :octicons-tag-24: 8.0.0.
|
||||||
|
|
||||||
### Changing the icons
|
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][13] ·
|
|
||||||
[:octicons-heart-fill-24:{ .mdx-heart } Insiders only][13]{ .mdx-insiders }
|
|
||||||
|
|
||||||
Each of the supported admonition types has a distinct icon, which can be changed
|
|
||||||
to any icon bundled with the theme. Just set the name of the admonition type to
|
|
||||||
a valid icon in `mkdocs.yml`:
|
|
||||||
|
|
||||||
=== "Octicons"
|
|
||||||
|
|
||||||
_Example_:
|
|
||||||
|
|
||||||
``` yaml
|
|
||||||
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
|
|
||||||
```
|
|
||||||
|
|
||||||
_Result_:
|
|
||||||
|
|
||||||
[![Admonition with Octicons icons][14]][14]
|
|
||||||
|
|
||||||
|
|
||||||
=== "FontAwesome"
|
|
||||||
|
|
||||||
_Example_:
|
|
||||||
|
|
||||||
``` yaml
|
|
||||||
theme:
|
|
||||||
icon:
|
|
||||||
admonition:
|
|
||||||
note: fontawesome/solid/sticky-note
|
|
||||||
abstract: fontawesome/solid/book
|
|
||||||
info: fontawesome/solid/info-circle
|
|
||||||
tip: fontawesome/solid/bullhorn
|
|
||||||
success: fontawesome/solid/check
|
|
||||||
question: fontawesome/solid/question-circle
|
|
||||||
warning: fontawesome/solid/exclamation-triangle
|
|
||||||
failure: fontawesome/solid/bomb
|
|
||||||
danger: fontawesome/solid/skull
|
|
||||||
bug: fontawesome/solid/robot
|
|
||||||
example: fontawesome/solid/flask
|
|
||||||
quote: fontawesome/solid/quote-left
|
|
||||||
```
|
|
||||||
|
|
||||||
_Result_:
|
|
||||||
|
|
||||||
[![Admonition with FontAwesome icons][15]][15]
|
|
||||||
|
|
||||||
[13]: ../insiders/index.md
|
|
||||||
[14]: ../assets/screenshots/admonition-octicons.png
|
|
||||||
[15]: ../assets/screenshots/admonition-fontawesome.png
|
|
||||||
|
|
||||||
## Customization
|
## Customization
|
||||||
|
|
||||||
### Custom admonitions
|
### Custom admonitions
|
||||||
|
|
||||||
If you want to add a custom admonition type, all you need is a color and an
|
If you want to add a custom admonition type, all you need is a color and an
|
||||||
`svg` icon. Copy the icon's `svg` code from the [`.icons`][16] folder and add the
|
`*.svg` icon. Copy the icon's code from the [`.icons`][custom icons] folder
|
||||||
following CSS to an [additional stylesheet][17]:
|
and add the following CSS to an [additional style sheet]:
|
||||||
|
|
||||||
``` css
|
|
||||||
:root {
|
|
||||||
--md-admonition-icon--pied-piper: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M244 246c-3.2-2-6.3-2.9-10.1-2.9-6.6 0-12.6 3.2-19.3 3.7l1.7 4.9zm135.9 197.9c-19 0-64.1 9.5-79.9 19.8l6.9 45.1c35.7 6.1 70.1 3.6 106-9.8-4.8-10-23.5-55.1-33-55.1zM340.8 177c6.6 2.8 11.5 9.2 22.7 22.1 2-1.4 7.5-5.2 7.5-8.6 0-4.9-11.8-13.2-13.2-23 11.2-5.7 25.2-6 37.6-8.9 68.1-16.4 116.3-52.9 146.8-116.7C548.3 29.3 554 16.1 554.6 2l-2 2.6c-28.4 50-33 63.2-81.3 100-31.9 24.4-69.2 40.2-106.6 54.6l-6.3-.3v-21.8c-19.6 1.6-19.7-14.6-31.6-23-18.7 20.6-31.6 40.8-58.9 51.1-12.7 4.8-19.6 10-25.9 21.8 34.9-16.4 91.2-13.5 98.8-10zM555.5 0l-.6 1.1-.3.9.6-.6zm-59.2 382.1c-33.9-56.9-75.3-118.4-150-115.5l-.3-6c-1.1-13.5 32.8 3.2 35.1-31l-14.4 7.2c-19.8-45.7-8.6-54.3-65.5-54.3-14.7 0-26.7 1.7-41.4 4.6 2.9 18.6 2.2 36.7-10.9 50.3l19.5 5.5c-1.7 3.2-2.9 6.3-2.9 9.8 0 21 42.8 2.9 42.8 33.6 0 18.4-36.8 60.1-54.9 60.1-8 0-53.7-50-53.4-60.1l.3-4.6 52.3-11.5c13-2.6 12.3-22.7-2.9-22.7-3.7 0-43.1 9.2-49.4 10.6-2-5.2-7.5-14.1-13.8-14.1-3.2 0-6.3 3.2-9.5 4-9.2 2.6-31 2.9-21.5 20.1L15.9 298.5c-5.5 1.1-8.9 6.3-8.9 11.8 0 6 5.5 10.9 11.5 10.9 8 0 131.3-28.4 147.4-32.2 2.6 3.2 4.6 6.3 7.8 8.6 20.1 14.4 59.8 85.9 76.4 85.9 24.1 0 58-22.4 71.3-41.9 3.2-4.3 6.9-7.5 12.4-6.9.6 13.8-31.6 34.2-33 43.7-1.4 10.2-1 35.2-.3 41.1 26.7 8.1 52-3.6 77.9-2.9 4.3-21 10.6-41.9 9.8-63.5l-.3-9.5c-1.4-34.2-10.9-38.5-34.8-58.6-1.1-1.1-2.6-2.6-3.7-4 2.2-1.4 1.1-1 4.6-1.7 88.5 0 56.3 183.6 111.5 229.9 33.1-15 72.5-27.9 103.5-47.2-29-25.6-52.6-45.7-72.7-79.9zm-196.2 46.1v27.2l11.8-3.4-2.9-23.8zm-68.7-150.4l24.1 61.2 21-13.8-31.3-50.9zm84.4 154.9l2 12.4c9-1.5 58.4-6.6 58.4-14.1 0-1.4-.6-3.2-.9-4.6-26.8 0-36.9 3.8-59.5 6.3z"/></svg>')
|
|
||||||
}
|
|
||||||
.md-typeset .admonition.pied-piper,
|
|
||||||
.md-typeset details.pied-piper {
|
|
||||||
border-color: rgb(43, 155, 70);
|
|
||||||
}
|
|
||||||
.md-typeset .pied-piper > .admonition-title,
|
|
||||||
.md-typeset .pied-piper > summary {
|
|
||||||
background-color: rgba(43, 155, 70, 0.1);
|
|
||||||
border-color: rgb(43, 155, 70);
|
|
||||||
}
|
|
||||||
.md-typeset .pied-piper > .admonition-title::before,
|
|
||||||
.md-typeset .pied-piper > summary::before {
|
|
||||||
background-color: rgb(43, 155, 70);
|
|
||||||
-webkit-mask-image: var(--md-admonition-icon--pied-piper);
|
|
||||||
mask-image: var(--md-admonition-icon--pied-piper);
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
You should now be able to create an admonition of the `pied-piper` type. Note
|
|
||||||
that you can also use this technique to override existing admonition icons or
|
|
||||||
colors. [You can even add animations][18].
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
:root {
|
:root {
|
||||||
@ -513,12 +433,45 @@ colors. [You can even add animations][18].
|
|||||||
|
|
||||||
_Example_:
|
_Example_:
|
||||||
|
|
||||||
``` markdown
|
=== ":octicons-file-code-16: docs/example.md"
|
||||||
!!! pied-piper "Pied Piper"
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
|
``` markdown
|
||||||
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
|
!!! pied-piper "Pied Piper"
|
||||||
massa, nec semper lorem quam in massa.
|
|
||||||
```
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et
|
||||||
|
euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo
|
||||||
|
purus auctor massa, nec semper lorem quam in massa.
|
||||||
|
```
|
||||||
|
|
||||||
|
=== ":octicons-file-code-16: docs/stylesheets/extra.css"
|
||||||
|
|
||||||
|
``` css
|
||||||
|
:root {
|
||||||
|
--md-admonition-icon--pied-piper: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M244 246c-3.2-2-6.3-2.9-10.1-2.9-6.6 0-12.6 3.2-19.3 3.7l1.7 4.9zm135.9 197.9c-19 0-64.1 9.5-79.9 19.8l6.9 45.1c35.7 6.1 70.1 3.6 106-9.8-4.8-10-23.5-55.1-33-55.1zM340.8 177c6.6 2.8 11.5 9.2 22.7 22.1 2-1.4 7.5-5.2 7.5-8.6 0-4.9-11.8-13.2-13.2-23 11.2-5.7 25.2-6 37.6-8.9 68.1-16.4 116.3-52.9 146.8-116.7C548.3 29.3 554 16.1 554.6 2l-2 2.6c-28.4 50-33 63.2-81.3 100-31.9 24.4-69.2 40.2-106.6 54.6l-6.3-.3v-21.8c-19.6 1.6-19.7-14.6-31.6-23-18.7 20.6-31.6 40.8-58.9 51.1-12.7 4.8-19.6 10-25.9 21.8 34.9-16.4 91.2-13.5 98.8-10zM555.5 0l-.6 1.1-.3.9.6-.6zm-59.2 382.1c-33.9-56.9-75.3-118.4-150-115.5l-.3-6c-1.1-13.5 32.8 3.2 35.1-31l-14.4 7.2c-19.8-45.7-8.6-54.3-65.5-54.3-14.7 0-26.7 1.7-41.4 4.6 2.9 18.6 2.2 36.7-10.9 50.3l19.5 5.5c-1.7 3.2-2.9 6.3-2.9 9.8 0 21 42.8 2.9 42.8 33.6 0 18.4-36.8 60.1-54.9 60.1-8 0-53.7-50-53.4-60.1l.3-4.6 52.3-11.5c13-2.6 12.3-22.7-2.9-22.7-3.7 0-43.1 9.2-49.4 10.6-2-5.2-7.5-14.1-13.8-14.1-3.2 0-6.3 3.2-9.5 4-9.2 2.6-31 2.9-21.5 20.1L15.9 298.5c-5.5 1.1-8.9 6.3-8.9 11.8 0 6 5.5 10.9 11.5 10.9 8 0 131.3-28.4 147.4-32.2 2.6 3.2 4.6 6.3 7.8 8.6 20.1 14.4 59.8 85.9 76.4 85.9 24.1 0 58-22.4 71.3-41.9 3.2-4.3 6.9-7.5 12.4-6.9.6 13.8-31.6 34.2-33 43.7-1.4 10.2-1 35.2-.3 41.1 26.7 8.1 52-3.6 77.9-2.9 4.3-21 10.6-41.9 9.8-63.5l-.3-9.5c-1.4-34.2-10.9-38.5-34.8-58.6-1.1-1.1-2.6-2.6-3.7-4 2.2-1.4 1.1-1 4.6-1.7 88.5 0 56.3 183.6 111.5 229.9 33.1-15 72.5-27.9 103.5-47.2-29-25.6-52.6-45.7-72.7-79.9zm-196.2 46.1v27.2l11.8-3.4-2.9-23.8zm-68.7-150.4l24.1 61.2 21-13.8-31.3-50.9zm84.4 154.9l2 12.4c9-1.5 58.4-6.6 58.4-14.1 0-1.4-.6-3.2-.9-4.6-26.8 0-36.9 3.8-59.5 6.3z"/></svg>')
|
||||||
|
}
|
||||||
|
.md-typeset .admonition.pied-piper,
|
||||||
|
.md-typeset details.pied-piper {
|
||||||
|
border-color: rgb(43, 155, 70);
|
||||||
|
}
|
||||||
|
.md-typeset .pied-piper > .admonition-title,
|
||||||
|
.md-typeset .pied-piper > summary {
|
||||||
|
background-color: rgba(43, 155, 70, 0.1);
|
||||||
|
border-color: rgb(43, 155, 70);
|
||||||
|
}
|
||||||
|
.md-typeset .pied-piper > .admonition-title::before,
|
||||||
|
.md-typeset .pied-piper > summary::before {
|
||||||
|
background-color: rgb(43, 155, 70);
|
||||||
|
-webkit-mask-image: var(--md-admonition-icon--pied-piper);
|
||||||
|
mask-image: var(--md-admonition-icon--pied-piper);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
=== ":octicons-file-code-16: mkdocs.yml"
|
||||||
|
|
||||||
|
``` yaml
|
||||||
|
extra_css:
|
||||||
|
- stylesheets/extra.css
|
||||||
|
```
|
||||||
|
|
||||||
_Result_:
|
_Result_:
|
||||||
|
|
||||||
@ -528,6 +481,5 @@ _Result_:
|
|||||||
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
|
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
|
||||||
massa, nec semper lorem quam in massa.
|
massa, nec semper lorem quam in massa.
|
||||||
|
|
||||||
[16]: https://github.com/squidfunk/mkdocs-material/tree/master/material/.icons
|
[custom icons]: https://github.com/squidfunk/mkdocs-material/tree/master/material/.icons
|
||||||
[17]: ../customization.md#additional-css
|
[additional style sheet]: ../customization.md#additional-css
|
||||||
[18]: icons-emojis.md#with-animations
|
|
||||||
|
@ -10,74 +10,75 @@ useful for documents or landing pages with dedicated _call-to-actions_.
|
|||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
### Attribute List
|
This configuration allows to add attributes to all inline- and block-level
|
||||||
|
elements with a simple syntax, turning any link into a button. Add the
|
||||||
The [Attribute List][1] extension, which is part of the standard Markdown
|
following lines to `mkdocs.yml`:
|
||||||
library, allows to __add HTML attributes and CSS classes to Markdown elements__,
|
|
||||||
and can be enabled via `mkdocs.yml`
|
|
||||||
|
|
||||||
``` yaml
|
``` yaml
|
||||||
markdown_extensions:
|
markdown_extensions:
|
||||||
- attr_list
|
- attr_list
|
||||||
```
|
```
|
||||||
|
|
||||||
[1]: https://python-markdown.github.io/extensions/attr_list/
|
See additional configuration options:
|
||||||
|
|
||||||
|
- [Attribute Lists]
|
||||||
|
|
||||||
|
[Attribute Lists]: ../setup/extensions/python-markdown.md#attribute-lists
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
### Adding buttons
|
### Adding buttons
|
||||||
|
|
||||||
When the [Attribute List][2] extension is enabled, any clickable element can be
|
In order to render a link as a button, suffix it with curly braces and add the
|
||||||
converted into a button by adding the `.md-button` CSS class, which will receive
|
`.md-button` class selector to it. The button will receive the selected
|
||||||
the selected [primary color][3].
|
[primary color] and [accent color] if active.
|
||||||
|
|
||||||
_Example_:
|
_Example_:
|
||||||
|
|
||||||
``` markdown
|
``` markdown
|
||||||
[Subscribe to our mailing list](#){ .md-button }
|
[Subscribe to our newsletter](#){ .md-button }
|
||||||
```
|
```
|
||||||
|
|
||||||
_Result_:
|
_Result_:
|
||||||
|
|
||||||
[Subscribe to our mailing list][4]{ .md-button }
|
[Subscribe to our newsletter][Demo]{ .md-button }
|
||||||
|
|
||||||
[2]: #attribute-list
|
[primary color]: ../setup/changing-the-colors.md#primary-color
|
||||||
[3]: ../setup/changing-the-colors.md#primary-color
|
[accent color]: ../setup/changing-the-colors.md#accent-color
|
||||||
[4]: javascript:alert$.next("Done!")
|
[Demo]: javascript:alert$.next("Demo")
|
||||||
|
|
||||||
### Adding primary buttons
|
### Adding primary buttons
|
||||||
|
|
||||||
If you want to display a filled, primary button (like on the [landing page][5]
|
If you want to display a filled, primary button (like on the [landing page]
|
||||||
of Material for MkDocs), add both the `.md-button` and `.md-button--primary`
|
of Material for MkDocs), add both, the `.md-button` and `.md-button--primary`
|
||||||
CSS classes.
|
CSS class selectors.
|
||||||
|
|
||||||
_Example_:
|
_Example_:
|
||||||
|
|
||||||
``` markdown
|
``` markdown
|
||||||
[Subscribe to our mailing list](#){ .md-button .md-button--primary }
|
[Subscribe to our newsletter](#){ .md-button .md-button--primary }
|
||||||
```
|
```
|
||||||
|
|
||||||
_Result_:
|
_Result_:
|
||||||
|
|
||||||
[Subscribe to our mailing list][4]{ .md-button .md-button--primary }
|
[Subscribe to our newsletter][Demo]{ .md-button .md-button--primary }
|
||||||
|
|
||||||
[5]: ../index.md
|
[landing page]: ../index.md
|
||||||
|
|
||||||
### Adding icon buttons
|
### Adding icon buttons
|
||||||
|
|
||||||
Of course, icons can be added to both types of buttons by using the [regular
|
Of course, icons can be added to all types of buttons by using the [icon syntax]
|
||||||
icon syntax][6] and referencing a valid path to [any icon bundled with the
|
together with any valid icon shortcode, which can be easily found with a few keystrokes through the [icon search].
|
||||||
theme][7].
|
|
||||||
|
|
||||||
_Example_:
|
_Example_:
|
||||||
|
|
||||||
``` markdown
|
``` markdown
|
||||||
[Submit :fontawesome-solid-paper-plane:](#){ .md-button .md-button--primary }
|
[Send :fontawesome-solid-paper-plane:](#){ .md-button .md-button--primary }
|
||||||
```
|
```
|
||||||
|
|
||||||
_Result_:
|
_Result_:
|
||||||
|
|
||||||
[Submit :fontawesome-solid-paper-plane:][4]{ .md-button .md-button--primary }
|
[Send :fontawesome-solid-paper-plane:][Demo]{ .md-button .md-button--primary }
|
||||||
|
|
||||||
[6]: icons-emojis.md#using-icons
|
[icon syntax]: icons-emojis.md#using-icons
|
||||||
[7]: icons-emojis.md#search
|
[icon search]: icons-emojis.md#search
|
||||||
|
@ -6,191 +6,89 @@ template: overrides/main.html
|
|||||||
|
|
||||||
Code blocks and examples are an essential part of technical project
|
Code blocks and examples are an essential part of technical project
|
||||||
documentation. Material for MkDocs provides different ways to set up syntax
|
documentation. Material for MkDocs provides different ways to set up syntax
|
||||||
highlighting for code blocks, either during build time using [Pygments][1] or
|
highlighting for code blocks, either during build time using [Pygments] or
|
||||||
during runtime using a JavaScript syntax highlighter.
|
during runtime using a JavaScript syntax highlighter.
|
||||||
|
|
||||||
[1]: https://pygments.org
|
[Pygments]: https://pygments.org
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
### Highlight
|
This configuration enables syntax highlighting on code blocks and inline code
|
||||||
|
blocks, and allows to include source code directly from other files. Add the
|
||||||
[:octicons-file-code-24: Source][2] · [:octicons-workflow-24: Extension][3] ·
|
following lines to `mkdocs.yml`:
|
||||||
:octicons-zap-24: Supersedes: [CodeHilite][4]
|
|
||||||
|
|
||||||
The [Highlight][3] extension, which is part of [Python Markdown Extensions][5],
|
|
||||||
integrates with Material for MkDocs and provides several options for
|
|
||||||
configuring syntax highlighting of code blocks:
|
|
||||||
|
|
||||||
`use_pygments`{ #use-pygments }
|
|
||||||
|
|
||||||
: :octicons-milestone-24: Default: `true` – This option allows to control
|
|
||||||
whether highlighting should be carried out during build time by
|
|
||||||
[Pygments][1] or runtime with a JavaScript highlighter. Remember to add the
|
|
||||||
necessary [additional stylesheets][6] and [JavaScript][7] if you want to
|
|
||||||
use the latter:
|
|
||||||
|
|
||||||
=== "Pygments"
|
|
||||||
|
|
||||||
``` yaml
|
|
||||||
markdown_extensions:
|
|
||||||
- pymdownx.highlight
|
|
||||||
- pymdownx.superfences
|
|
||||||
```
|
|
||||||
|
|
||||||
=== "JavaScript"
|
|
||||||
|
|
||||||
``` yaml
|
|
||||||
markdown_extensions:
|
|
||||||
- pymdownx.highlight:
|
|
||||||
use_pygments: false
|
|
||||||
```
|
|
||||||
|
|
||||||
??? example "Syntax highlighting with Highlight.js"
|
|
||||||
|
|
||||||
[Highlight.js][8] can be integrated by creating an [additional
|
|
||||||
JavaScript][7] file initializing the highlighter and including the
|
|
||||||
respective stylesheet and JavaScript from a [CDN][9] serving
|
|
||||||
Highlight.js in `mkdocs.yml`:
|
|
||||||
|
|
||||||
=== "`docs/javascripts/config.js`"
|
|
||||||
|
|
||||||
``` js
|
|
||||||
document$.subscribe(() => {
|
|
||||||
hljs.highlightAll()
|
|
||||||
})
|
|
||||||
```
|
|
||||||
|
|
||||||
=== "`mkdocs.yml`"
|
|
||||||
|
|
||||||
``` yaml
|
|
||||||
extra_javascript:
|
|
||||||
- https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js
|
|
||||||
- javascripts/config.js
|
|
||||||
extra_css:
|
|
||||||
- https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/default.min.css
|
|
||||||
```
|
|
||||||
|
|
||||||
Note that Highlight.js has no affiliation with the Highlight extension.
|
|
||||||
|
|
||||||
`linenums`{ #linenums }
|
|
||||||
|
|
||||||
: :octicons-milestone-24: Default: `false` – This option will add line numbers
|
|
||||||
to _all_ code blocks. If you wish to add line numbers to _some_, but not all
|
|
||||||
code blocks, consult the section on [adding line numbers][10] later in this
|
|
||||||
document, which also contains some tips on working with line numbers:
|
|
||||||
|
|
||||||
``` yaml
|
|
||||||
markdown_extensions:
|
|
||||||
- pymdownx.highlight:
|
|
||||||
linenums: true
|
|
||||||
```
|
|
||||||
|
|
||||||
`linenums_style`{ #linenums-style }
|
|
||||||
|
|
||||||
: :octicons-milestone-24: Default: `table` – The Highlight extension provides
|
|
||||||
three ways to add line numbers, all of which are supported by Material for
|
|
||||||
MkDocs. While `table` wraps a code block in a table, `inline` and
|
|
||||||
`pymdownx-inline` render line numbers as part of the line itself:
|
|
||||||
|
|
||||||
``` yaml
|
|
||||||
markdown_extensions:
|
|
||||||
- pymdownx.highlight:
|
|
||||||
linenums_style: pymdownx-inline
|
|
||||||
```
|
|
||||||
|
|
||||||
Note that `inline` will put line numbers next to the actual code, which
|
|
||||||
means that they will be included when selecting text with the cursor or
|
|
||||||
copying a code block to the clipboard. Thus, the usage of `table` or
|
|
||||||
`pymdownx-inline` is recommended.
|
|
||||||
|
|
||||||
_Material for MkDocs doesn't provide official support for the other options of
|
|
||||||
this extension, so they may be supported but might yield unexpected results.
|
|
||||||
Use them at your own risk._
|
|
||||||
|
|
||||||
[2]: https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/stylesheets/main/extensions/pymdownx/_highlight.scss
|
|
||||||
[3]: https://facelessuser.github.io/pymdown-extensions/extensions/highlight/
|
|
||||||
[4]: https://python-markdown.github.io/extensions/code_hilite/
|
|
||||||
[5]: https://facelessuser.github.io/pymdown-extensions/
|
|
||||||
[6]: ../customization.md#additional-css
|
|
||||||
[7]: ../customization.md#additional-javascript
|
|
||||||
[8]: https://highlightjs.org/
|
|
||||||
[9]: https://cdnjs.com/libraries/highlight.js/
|
|
||||||
[10]: #adding-line-numbers
|
|
||||||
|
|
||||||
### InlineHilite
|
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][2] · [:octicons-workflow-24: Extension][11]
|
|
||||||
|
|
||||||
The [InlineHilite][11] extension, which is part of [Python Markdown
|
|
||||||
Extensions][5] also integrates with Material for MkDocs and adds support for
|
|
||||||
__syntax highlighting of inline code blocks__. It's built on top of the
|
|
||||||
[Highlight][3] extension and can be enabled via `mkdocs.yml`:
|
|
||||||
|
|
||||||
``` yaml
|
``` yaml
|
||||||
markdown_extensions:
|
markdown_extensions:
|
||||||
|
- pymdownx.highlight
|
||||||
- pymdownx.inlinehilite
|
- pymdownx.inlinehilite
|
||||||
```
|
|
||||||
|
|
||||||
See the section on [inline code blocks][12] for usage information.
|
|
||||||
|
|
||||||
[11]: https://facelessuser.github.io/pymdown-extensions/extensions/inlinehilite/
|
|
||||||
[12]: #highlighting-inline-code-blocks
|
|
||||||
|
|
||||||
### Keys
|
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][13] · [:octicons-workflow-24: Extension][14]
|
|
||||||
|
|
||||||
The [Keys][14] extension, which is part of [Python Markdown Extensions][5],
|
|
||||||
allows for inserting __keyboard keys__, e.g. ++ctrl+alt+delete++ , and
|
|
||||||
can be enabled via `mkdocs.yml`:
|
|
||||||
|
|
||||||
``` yaml
|
|
||||||
markdown_extensions:
|
|
||||||
- pymdownx.keys
|
|
||||||
```
|
|
||||||
|
|
||||||
[13]: https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/stylesheets/main/extensions/pymdownx/_keys.scss
|
|
||||||
[14]: https://facelessuser.github.io/pymdown-extensions/extensions/keys/
|
|
||||||
|
|
||||||
### SuperFences
|
|
||||||
|
|
||||||
The [SuperFences][15] extension, which is also part of [Python Markdown
|
|
||||||
Extensions][5], allows for the __nesting of code blocks inside other blocks__,
|
|
||||||
and is therefore strongly recommended:
|
|
||||||
|
|
||||||
``` yaml
|
|
||||||
markdown_extensions:
|
|
||||||
- pymdownx.superfences
|
- pymdownx.superfences
|
||||||
```
|
|
||||||
|
|
||||||
[15]: https://facelessuser.github.io/pymdown-extensions/extensions/superfences/
|
|
||||||
|
|
||||||
### Snippets
|
|
||||||
|
|
||||||
The [Snippets][16] extension, which is also part of [Python Markdown
|
|
||||||
Extensions][5], allows to __insert content from other files__ or other, regular
|
|
||||||
content, and can be enabled via `mkdocs.yml`:
|
|
||||||
|
|
||||||
``` yaml
|
|
||||||
markdown_extensions:
|
|
||||||
- pymdownx.snippets
|
- pymdownx.snippets
|
||||||
```
|
```
|
||||||
|
|
||||||
[16]: https://facelessuser.github.io/pymdown-extensions/extensions/snippets/
|
See additional configuration options:
|
||||||
|
|
||||||
|
- [Highlight]
|
||||||
|
- [InlineHilite]
|
||||||
|
- [SuperFences]
|
||||||
|
- [Snippets]
|
||||||
|
|
||||||
|
[Highlight]: ../setup/extensions/python-markdown-extensions.md#highlight
|
||||||
|
[InlineHilite]: ../setup/extensions/python-markdown-extensions.md#inlinehilite
|
||||||
|
[SuperFences]: ../setup/extensions/python-markdown-extensions.md#superfences
|
||||||
|
[Snippets]: ../setup/extensions/python-markdown-extensions.md#snippets
|
||||||
|
|
||||||
|
### Code annotations
|
||||||
|
|
||||||
|
[:octicons-heart-fill-24:{ .mdx-heart } Insiders][Insiders]{ .mdx-insiders } ·
|
||||||
|
[:octicons-tag-24: insiders-2.2.0][Insiders] ·
|
||||||
|
:octicons-unlock-24: Feature flag ·
|
||||||
|
:octicons-beaker-24: Experimental
|
||||||
|
|
||||||
|
Code annotations offer a comfortable and friendly way to attach arbitrary
|
||||||
|
content to specific sections of code blocks by adding numeric markers in block
|
||||||
|
and inline comments in the language of the code block. Add the following to
|
||||||
|
`mkdocs.yml` to enable them globally:
|
||||||
|
|
||||||
|
``` yaml
|
||||||
|
theme:
|
||||||
|
features:
|
||||||
|
- content.code.annotate # (1)
|
||||||
|
```
|
||||||
|
|
||||||
|
1. :man_raising_hand: I'm a code annotation! I can contain `code`, __formatted
|
||||||
|
text__, images, ... basically anything that can be expressed in Markdown.
|
||||||
|
|
||||||
|
??? info "Enabling code annotations for a specific code block"
|
||||||
|
|
||||||
|
If you don't want to enable code annotations globally, because you don't
|
||||||
|
like the automatic inlining behavior, you can enable them for a specific
|
||||||
|
code block by using a slightly different syntax based on the
|
||||||
|
[Attribute Lists] extension:
|
||||||
|
|
||||||
|
```` yaml
|
||||||
|
``` { .yaml .annotate }
|
||||||
|
# Code block content
|
||||||
|
```
|
||||||
|
````
|
||||||
|
|
||||||
|
Note that the language shortcode which has to come first must now also be
|
||||||
|
prefixed by a `.`.
|
||||||
|
|
||||||
|
[Insiders]: ../insiders/index.md
|
||||||
|
[Attribute Lists]: ../setup/extensions/python-markdown.md#attribute-lists
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
This section discusses how to use different syntax highlighting features with
|
This section discusses how to use different syntax highlighting features with
|
||||||
[Pygments][1] – the default highlighter – so they don't apply when using
|
[Pygments] – the default highlighter – so they don't apply when using
|
||||||
a JavaScript syntax highlighter.
|
a JavaScript syntax highlighter.
|
||||||
|
|
||||||
### Specifying the language
|
### Specifying the language
|
||||||
|
|
||||||
Code blocks must be enclosed with two separate lines containing three backticks.
|
Code blocks must be enclosed with two separate lines containing three backticks.
|
||||||
To add code highlighting to those blocks, add the language short name directly
|
To add syntax highlighting to those blocks, add the language shortcode directly
|
||||||
after the opening block. See the [list of available lexers][17] to find the
|
after the opening block. See the [list of available lexers] to find the
|
||||||
short name for a given language.
|
shortcode for a given language.
|
||||||
|
|
||||||
_Example_:
|
_Example_:
|
||||||
|
|
||||||
@ -206,117 +104,50 @@ _Result_:
|
|||||||
import tensorflow as tf
|
import tensorflow as tf
|
||||||
```
|
```
|
||||||
|
|
||||||
[17]: https://pygments.org/docs/lexers/
|
[list of available lexers]: https://pygments.org/docs/lexers/
|
||||||
|
|
||||||
### Adding annotations
|
### Adding annotations
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][18] ·
|
Code annotations can be placed anywhere in a code block where a comment for the
|
||||||
:octicons-beaker-24: Experimental ·
|
language of the block can be placed, e.g. for JavaScript in `#!js // ...` and
|
||||||
[:octicons-heart-fill-24:{ .mdx-heart } Insiders only][18]{ .mdx-insiders }
|
`#!js /* ... */`, for YAML in `#!yaml # ...`, etc.[^1]
|
||||||
|
|
||||||
Annotations offer a comfortable and friendly way to attach explanations to
|
[^1]:
|
||||||
arbitrary sections of code blocks by adding simple markers within block/inline
|
Code annotations require syntax highlighting with [Pygments] – they're
|
||||||
comments that refer to items of a list following the code block, i.e. `(1)`,
|
currently not compatible with JavaScript syntax highlighters. Support will
|
||||||
`(2)`, etc. Material for MkDocs detaches the list from the flow of the document,
|
be added at a later point, allowing to always place code annotations at the
|
||||||
injects the content of each list item into a tooltip, and links each list marker
|
end of lines.
|
||||||
to the corresponding tooltip.
|
|
||||||
|
|
||||||
In order to opt-in to annotation support, a slightly different syntax is
|
_Example_:
|
||||||
required – just add the respective [language short code][17] and the `.annotate`
|
|
||||||
class, after the three backticks. Alternatively, if you want to enable annotations
|
```` markdown
|
||||||
globally, add the following to `mkdocs.yml`:
|
``` yaml
|
||||||
|
theme:
|
||||||
|
features:
|
||||||
|
- content.code.annotate # (1)
|
||||||
|
```
|
||||||
|
|
||||||
|
1. :man_raising_hand: I'm a code annotation! I can contain `code`, __formatted
|
||||||
|
text__, images, ... basically anything that can be expressed in Markdown.
|
||||||
|
````
|
||||||
|
|
||||||
|
_Result_:
|
||||||
|
|
||||||
``` yaml
|
``` yaml
|
||||||
theme:
|
theme:
|
||||||
features:
|
features:
|
||||||
- content.code.annotate
|
- content.code.annotate # (1)
|
||||||
```
|
```
|
||||||
|
|
||||||
Note that annotations can be __placed anywhere__ in a code block where a comment
|
1. :man_raising_hand: I'm a code annotation! I can contain `code`, __formatted
|
||||||
for the language can be placed, which for JavaScript is `// (1)` and
|
text__, images, ... basically anything that can be expressed in Markdown.
|
||||||
`/* (2) */`, for Yaml `# (3)`, etc.
|
|
||||||
|
|
||||||
_Example_:
|
|
||||||
|
|
||||||
```` markdown
|
|
||||||
``` js
|
|
||||||
document$.subscribe(function() { // (1)
|
|
||||||
var tables = document.querySelectorAll(/* (2) */ "article table")
|
|
||||||
tables.forEach(function(table) {
|
|
||||||
new Tablesort(table)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
```
|
|
||||||
|
|
||||||
1. ...
|
|
||||||
2. ...
|
|
||||||
````
|
|
||||||
|
|
||||||
_Result_:
|
|
||||||
|
|
||||||
``` js
|
|
||||||
document$.subscribe(function() { // (1)
|
|
||||||
var tables = document.querySelectorAll(/* (2) */ "article table")
|
|
||||||
tables.forEach(function(table) {
|
|
||||||
new Tablesort(table) // (3)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
```
|
|
||||||
|
|
||||||
1. Annotations can contain __arbitrary content__ which is shown when the marker
|
|
||||||
is focussed, including any kind of formatting, links, admonitions, details,
|
|
||||||
and even diagrams:
|
|
||||||
|
|
||||||
``` mermaid
|
|
||||||
graph LR
|
|
||||||
A[I'm] --> B{a} --> C[diagram];
|
|
||||||
```
|
|
||||||
|
|
||||||
:octicons-light-bulb-16:
|
|
||||||
**Tip:** You can use ++tab++ to navigate annotations.
|
|
||||||
|
|
||||||
2. Annotations can be __placed anywhere__ in a code block were a comment for the
|
|
||||||
underlying language can be placed.
|
|
||||||
|
|
||||||
=== "Python"
|
|
||||||
|
|
||||||
``` python
|
|
||||||
# (1)
|
|
||||||
```
|
|
||||||
|
|
||||||
=== "JavaScript"
|
|
||||||
|
|
||||||
``` js
|
|
||||||
// (2)
|
|
||||||
/* (2) */
|
|
||||||
```
|
|
||||||
|
|
||||||
=== "Lua"
|
|
||||||
|
|
||||||
``` lua
|
|
||||||
-- (3)
|
|
||||||
```
|
|
||||||
|
|
||||||
_We're working on a solution for languages without comments, which will be
|
|
||||||
available shortly._
|
|
||||||
|
|
||||||
1. Of course, this can be combined with [line numbers][10], highlighting and
|
|
||||||
all other code block related features.
|
|
||||||
|
|
||||||
_Annotations require syntax highlighting with [Pygments][26] – they're currently
|
|
||||||
not compatible with other JavaScript-based syntax highlighters. Support may be
|
|
||||||
added later on._
|
|
||||||
|
|
||||||
[18]: ../insiders/index.md
|
|
||||||
[19]: ../assets/screenshots/annotations.png
|
|
||||||
[20]: https://squidfunk.github.io/mkdocs-material-insiders/reference/code-blocks/#adding-annotations
|
|
||||||
|
|
||||||
### Adding line numbers
|
### Adding line numbers
|
||||||
|
|
||||||
Line numbers can be added to a code block by using the `linenums="<start>"`
|
Line numbers can be added to a code block by using the `linenums="<start>"`
|
||||||
option directly after the short name, whereas `<start>` represents the starting
|
option directly after the shortcode, whereas `<start>` represents the starting
|
||||||
line number. A code block can start from a line number other than `1`, which
|
line number. A code block can start from a line number other than `1`, which
|
||||||
allows splitting large code blocks for readability.
|
allows to split large code blocks for readability.
|
||||||
|
|
||||||
_Example_:
|
_Example_:
|
||||||
|
|
||||||
@ -343,60 +174,65 @@ def bubble_sort(items):
|
|||||||
### Highlighting specific lines
|
### Highlighting specific lines
|
||||||
|
|
||||||
Specific lines can be highlighted by passing the line numbers to the `hl_lines`
|
Specific lines can be highlighted by passing the line numbers to the `hl_lines`
|
||||||
argument placed right after the language short name. Note that line counts start
|
argument placed right after the language shortcode. Note that line counts start
|
||||||
at `1`, regardless of the starting line number specified as part of `linenums`.
|
at `1`, regardless of the starting line number specified as part of
|
||||||
|
[`linenums`][Adding line numbers].
|
||||||
|
|
||||||
_Example_:
|
=== "Line numbers"
|
||||||
|
|
||||||
```` markdown
|
_Example_:
|
||||||
``` python hl_lines="2 3"
|
|
||||||
def bubble_sort(items):
|
|
||||||
for i in range(len(items)):
|
|
||||||
for j in range(len(items) - 1 - i):
|
|
||||||
if items[j] > items[j + 1]:
|
|
||||||
items[j], items[j + 1] = items[j + 1], items[j]
|
|
||||||
```
|
|
||||||
````
|
|
||||||
|
|
||||||
_Result_:
|
```` markdown
|
||||||
|
``` python hl_lines="2 3"
|
||||||
|
def bubble_sort(items):
|
||||||
|
for i in range(len(items)):
|
||||||
|
for j in range(len(items) - 1 - i):
|
||||||
|
if items[j] > items[j + 1]:
|
||||||
|
items[j], items[j + 1] = items[j + 1], items[j]
|
||||||
|
```
|
||||||
|
````
|
||||||
|
|
||||||
``` python hl_lines="2 3"
|
_Result_:
|
||||||
def bubble_sort(items):
|
|
||||||
for i in range(len(items)):
|
|
||||||
for j in range(len(items) - 1 - i):
|
|
||||||
if items[j] > items[j + 1]:
|
|
||||||
items[j], items[j + 1] = items[j + 1], items[j]
|
|
||||||
```
|
|
||||||
|
|
||||||
Line ranges can also be used for conveniently specifying multiple lines.
|
``` python linenums="1" hl_lines="2 3"
|
||||||
|
def bubble_sort(items):
|
||||||
|
for i in range(len(items)):
|
||||||
|
for j in range(len(items) - 1 - i):
|
||||||
|
if items[j] > items[j + 1]:
|
||||||
|
items[j], items[j + 1] = items[j + 1], items[j]
|
||||||
|
```
|
||||||
|
|
||||||
_Example_:
|
=== "Line number ranges"
|
||||||
|
|
||||||
```` markdown
|
_Example_:
|
||||||
``` python hl_lines="2-5"
|
|
||||||
def bubble_sort(items):
|
|
||||||
for i in range(len(items)):
|
|
||||||
for j in range(len(items) - 1 - i):
|
|
||||||
if items[j] > items[j + 1]:
|
|
||||||
items[j], items[j + 1] = items[j + 1], items[j]
|
|
||||||
```
|
|
||||||
````
|
|
||||||
|
|
||||||
_Result_:
|
```` markdown
|
||||||
|
``` python hl_lines="2-5"
|
||||||
|
def bubble_sort(items):
|
||||||
|
for i in range(len(items)):
|
||||||
|
for j in range(len(items) - 1 - i):
|
||||||
|
if items[j] > items[j + 1]:
|
||||||
|
items[j], items[j + 1] = items[j + 1], items[j]
|
||||||
|
```
|
||||||
|
````
|
||||||
|
|
||||||
``` python hl_lines="2-5"
|
_Result_:
|
||||||
def bubble_sort(items):
|
|
||||||
for i in range(len(items)):
|
``` python linenums="1" hl_lines="2-5"
|
||||||
for j in range(len(items) - 1 - i):
|
def bubble_sort(items):
|
||||||
if items[j] > items[j + 1]:
|
for i in range(len(items)):
|
||||||
items[j], items[j + 1] = items[j + 1], items[j]
|
for j in range(len(items) - 1 - i):
|
||||||
```
|
if items[j] > items[j + 1]:
|
||||||
|
items[j], items[j + 1] = items[j + 1], items[j]
|
||||||
|
```
|
||||||
|
|
||||||
|
[Adding line numbers]: #adding-line-numbers
|
||||||
|
|
||||||
### Highlighting inline code blocks
|
### Highlighting inline code blocks
|
||||||
|
|
||||||
When [InlineHilite][21] is enabled, inline code blocks can be highlighted by
|
When [InlineHilite] is enabled, syntax highlighting can be applied to inline
|
||||||
prefixing them with a shebang-like sequence, i.e. `#!`, directly followed by
|
code blocks by prefixing them with a shebang, i.e. `#!`, directly followed by
|
||||||
the [language short name][17].
|
the corresponding [language shortcode][list of available lexers].
|
||||||
|
|
||||||
_Example_:
|
_Example_:
|
||||||
|
|
||||||
@ -408,33 +244,11 @@ _Result_:
|
|||||||
|
|
||||||
The `#!python range()` function is used to generate a sequence of numbers.
|
The `#!python range()` function is used to generate a sequence of numbers.
|
||||||
|
|
||||||
[21]: #inlinehilite
|
|
||||||
|
|
||||||
### Adding keyboard keys
|
|
||||||
|
|
||||||
When [Keys][22] is enabled, keyboard keys can be rendered with a simple syntax.
|
|
||||||
Consult the [Python Markdown Extensions][14] documentation to learn about all
|
|
||||||
available key codes.
|
|
||||||
|
|
||||||
_Example_:
|
|
||||||
|
|
||||||
``` markdown
|
|
||||||
++ctrl+alt+del++
|
|
||||||
```
|
|
||||||
|
|
||||||
_Result_:
|
|
||||||
|
|
||||||
++ctrl+alt+del++
|
|
||||||
|
|
||||||
[22]: #keys
|
|
||||||
|
|
||||||
### Embedding external files
|
### Embedding external files
|
||||||
|
|
||||||
_Also known as transcludes or file transclusion in [MultiMarkdown][23]_.
|
When [Snippets] is enabled, content from other files (including source files)
|
||||||
|
can be embedded by using the [`--8<--` notation][Snippets notation] directly
|
||||||
When [Snippets][24] is enabled, content from other files can be embedded, which
|
from within a code block:
|
||||||
is especially useful to reference and embed the contents of source files
|
|
||||||
directly into your project documentation.
|
|
||||||
|
|
||||||
_Example_:
|
_Example_:
|
||||||
|
|
||||||
@ -450,23 +264,15 @@ _Result_:
|
|||||||
last 4 years
|
last 4 years
|
||||||
```
|
```
|
||||||
|
|
||||||
Note that [Snippets][24] is not limited to code blocks, but can be used anywhere
|
[Snippets notation]: https://facelessuser.github.io/pymdown-extensions/extensions/snippets/#snippets-notation
|
||||||
from a document to move repeating content to separate files, which is also
|
|
||||||
explained in the [official documentation][16].
|
|
||||||
|
|
||||||
[23]: https://fletcher.github.io/MultiMarkdown-5/transclusion.html
|
|
||||||
[24]: #snippets
|
|
||||||
|
|
||||||
## Customization
|
## Customization
|
||||||
|
|
||||||
### Custom syntax theme
|
### Custom syntax theme
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][25] ·
|
If [Pygments] is used, Material for MkDocs provides the [styles for code blocks]
|
||||||
:octicons-mortar-board-24: Difficulty: _easy_
|
[colors], which are built with a custom and well-balanced palette that works
|
||||||
|
equally well for both [color schemes]:
|
||||||
If [Pygments][26] is used, Material for MkDocs provides the [styles for code
|
|
||||||
blocks][25], which are built with a custom and well-balanced palette that works
|
|
||||||
equally well for both [color schemes][27]:
|
|
||||||
|
|
||||||
- :material-checkbox-blank-circle:{ style="color: var(--md-code-hl-number-color) " } `--md-code-hl-number-color`
|
- :material-checkbox-blank-circle:{ style="color: var(--md-code-hl-number-color) " } `--md-code-hl-number-color`
|
||||||
- :material-checkbox-blank-circle:{ style="color: var(--md-code-hl-special-color) " } `--md-code-hl-special-color`
|
- :material-checkbox-blank-circle:{ style="color: var(--md-code-hl-special-color) " } `--md-code-hl-special-color`
|
||||||
@ -488,29 +294,45 @@ Code block foreground, background and line highlight colors are defined via:
|
|||||||
- :material-checkbox-blank-circle:{ style="color: var(--md-code-hl-color) " } `--md-code-hl-color`
|
- :material-checkbox-blank-circle:{ style="color: var(--md-code-hl-color) " } `--md-code-hl-color`
|
||||||
|
|
||||||
Let's say you want to change the color of `#!js "strings"`. While there are
|
Let's say you want to change the color of `#!js "strings"`. While there are
|
||||||
several [types of string tokens][28], Material for MkDocs assigns a single color
|
several [types of string tokens], they use the same color. You can assign
|
||||||
to most of them.
|
a new color by using an [additional style sheet]:
|
||||||
|
|
||||||
Create an [additional stylesheet][6], and add:
|
=== ":octicons-file-code-16: docs/stylesheets/extra.css"
|
||||||
|
|
||||||
``` css
|
``` css
|
||||||
:root > * {
|
:root > * {
|
||||||
--md-code-hl-string-color: #0FF1CE;
|
--md-code-hl-string-color: #0FF1CE;
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
If you want to tweak a specific type of string, i.e. ``#!js `backticks` ``, you
|
=== ":octicons-file-code-16: mkdocs.yml"
|
||||||
can lookup the specific class name in the [syntax theme definition][29], and
|
|
||||||
override it as part of your additional stylesheet:
|
|
||||||
|
|
||||||
``` css
|
``` yaml
|
||||||
.highlight .sb {
|
extra_css:
|
||||||
color: #0FF1CE;
|
- stylesheets/extra.css
|
||||||
}
|
```
|
||||||
```
|
|
||||||
|
|
||||||
[25]: https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/stylesheets/main/_colors.scss#
|
If you want to tweak a specific type of string, e.g. ``#!js `backticks` ``, you
|
||||||
[26]: #use-pygments
|
can lookup the specific CSS class name in the [syntax theme definition], and
|
||||||
[27]: ../setup/changing-the-colors.md#color-scheme
|
override it as part of your [additional style sheet]:
|
||||||
[28]: https://pygments.org/docs/tokens/#literals
|
|
||||||
[29]: https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/stylesheets/main/extensions/pymdownx/_highlight.scss
|
=== ":octicons-file-code-16: docs/stylesheets/extra.css"
|
||||||
|
|
||||||
|
``` css
|
||||||
|
.highlight .sb {
|
||||||
|
color: #0FF1CE;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
=== ":octicons-file-code-16: mkdocs.yml"
|
||||||
|
|
||||||
|
``` yaml
|
||||||
|
extra_css:
|
||||||
|
- stylesheets/extra.css
|
||||||
|
```
|
||||||
|
|
||||||
|
[colors]: https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/stylesheets/main/_colors.scss
|
||||||
|
[color schemes]: ../setup/changing-the-colors.md#color-scheme
|
||||||
|
[types of string tokens]: https://pygments.org/docs/tokens/#literals
|
||||||
|
[additional style sheet]: ../customization.md#additional-css
|
||||||
|
[syntax theme definition]: https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/stylesheets/main/extensions/pymdownx/_highlight.scss
|
||||||
|
@ -11,53 +11,59 @@ grouping code blocks and other content.
|
|||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
### Tabbed
|
This configuration enables content tabs, and allows to nest arbitrary content
|
||||||
|
inside content tabs, including code blocks and ... more content tabs! Add the
|
||||||
[:octicons-file-code-24: Source][1] · [:octicons-workflow-24: Extension][2]
|
following lines to `mkdocs.yml`:
|
||||||
|
|
||||||
The [Tabbed][2] extension, which is part of [Python Markdown Extensions][3],
|
|
||||||
integrates with Material for MkDocs and can be enabled via `mkdocs.yml`:
|
|
||||||
|
|
||||||
=== "Modern"
|
|
||||||
|
|
||||||
``` yaml
|
|
||||||
markdown_extensions:
|
|
||||||
- pymdownx.tabbed:
|
|
||||||
alternate_style: true # (1)
|
|
||||||
```
|
|
||||||
|
|
||||||
1. As of 7.3.1, support was added for the new [`alternate_style`][12] flag,
|
|
||||||
which has much better behavior on smaller screen sizes, as content tabs
|
|
||||||
are now scrollable and will overflow instead of break across multiple
|
|
||||||
lines.
|
|
||||||
|
|
||||||
__The legacy style will be deprecated with the next major release.__
|
|
||||||
|
|
||||||
[12]: https://facelessuser.github.io/pymdown-extensions/extensions/tabbed/#alternate-style
|
|
||||||
|
|
||||||
=== "Legacy"
|
|
||||||
|
|
||||||
``` yaml
|
|
||||||
markdown_extensions:
|
|
||||||
- pymdownx.tabbed
|
|
||||||
```
|
|
||||||
|
|
||||||
[1]: https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/stylesheets/main/extensions/pymdownx/_tabbed.scss
|
|
||||||
[2]: https://facelessuser.github.io/pymdown-extensions/extensions/tabbed/
|
|
||||||
[3]: https://facelessuser.github.io/pymdown-extensions/
|
|
||||||
|
|
||||||
### SuperFences
|
|
||||||
|
|
||||||
The [SuperFences][4] extension, which is also part of [Python Markdown
|
|
||||||
Extensions][3], allows for the __nesting of code and content blocks inside
|
|
||||||
tabs__, and is therefore strongly recommended:
|
|
||||||
|
|
||||||
``` yaml
|
``` yaml
|
||||||
markdown_extensions:
|
markdown_extensions:
|
||||||
- pymdownx.superfences
|
- pymdownx.superfences
|
||||||
|
- pymdownx.tabbed:
|
||||||
|
alternate_style: true
|
||||||
```
|
```
|
||||||
|
|
||||||
[4]: https://facelessuser.github.io/pymdown-extensions/extensions/superfences/
|
See additional configuration options:
|
||||||
|
|
||||||
|
- [SuperFences]
|
||||||
|
- [Tabbed]
|
||||||
|
|
||||||
|
[SuperFences]: ../setup/extensions/python-markdown-extensions.md#superfences
|
||||||
|
[Tabbed]: ../setup/extensions/python-markdown-extensions.md#tabbed
|
||||||
|
|
||||||
|
### Linked content tabs
|
||||||
|
|
||||||
|
[:octicons-heart-fill-24:{ .mdx-heart } Insiders][Insiders]{ .mdx-insiders } ·
|
||||||
|
[:octicons-tag-24: insiders-2.9.0][Insiders] ·
|
||||||
|
:octicons-unlock-24: Feature flag ·
|
||||||
|
:octicons-beaker-24: Experimental
|
||||||
|
|
||||||
|
When enabled, all content tabs across the whole documentation site will be
|
||||||
|
linked and switch to the same label when the user clicks on a tab. Add the
|
||||||
|
following lines to `mkdocs.yml`:
|
||||||
|
|
||||||
|
``` yaml
|
||||||
|
theme:
|
||||||
|
features:
|
||||||
|
- content.tabs.link
|
||||||
|
```
|
||||||
|
|
||||||
|
Content tabs are linked based on their label, not offset. This means that all
|
||||||
|
tabs with the same label will be activated when a user clicks a content tab
|
||||||
|
regardless of order inside a container. Furthermore, this feature is fully
|
||||||
|
integrated with [instant loading] and persisted across page loads.
|
||||||
|
|
||||||
|
=== ":octicons-check-circle-fill-16: Enabled"
|
||||||
|
|
||||||
|
[![content.tabs.link enabled]][content.tabs.link enabled]
|
||||||
|
|
||||||
|
=== ":octicons-skip-16: Disabled"
|
||||||
|
|
||||||
|
[![content.tabs.link disabled]][content.tabs.link disabled]
|
||||||
|
|
||||||
|
[Insiders]: ../insiders/index.md
|
||||||
|
[instant loading]: ../setup/setting-up-navigation.md#instant-loading
|
||||||
|
[content.tabs.link enabled]: ../assets/screenshots/content-tabs-link.png
|
||||||
|
[content.tabs.link disabled]: ../assets/screenshots/content-tabs.png
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
@ -153,45 +159,11 @@ _Result_:
|
|||||||
2. Donec vitae suscipit est
|
2. Donec vitae suscipit est
|
||||||
3. Nulla tempor lobortis orci
|
3. Nulla tempor lobortis orci
|
||||||
|
|
||||||
### Linking content tabs
|
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][5] ·
|
|
||||||
:octicons-beaker-24: Experimental ·
|
|
||||||
[:octicons-heart-fill-24:{ .mdx-heart } Insiders only][5]{ .mdx-insiders }
|
|
||||||
|
|
||||||
When _linking_ is enabled, all content tabs on a page will be linked and show
|
|
||||||
the same active tab when the user clicks on a label. Add the following lines
|
|
||||||
to `mkdocs.yml`:
|
|
||||||
|
|
||||||
``` yaml
|
|
||||||
theme:
|
|
||||||
features:
|
|
||||||
- content.tabs.link
|
|
||||||
```
|
|
||||||
|
|
||||||
Content tabs are linked based on their label, not offset. This means that all
|
|
||||||
tabs with the same label will be activated when a user clicks a content tab
|
|
||||||
regardless of order inside a container. Furthermore, this feature is fully
|
|
||||||
integrated with [instant loading][6] and persisted across page loads.
|
|
||||||
|
|
||||||
=== "With linking"
|
|
||||||
|
|
||||||
[![With linking][7]][7]
|
|
||||||
|
|
||||||
=== "Without linking"
|
|
||||||
|
|
||||||
[![Without linking][8]][8]
|
|
||||||
|
|
||||||
[5]: ../insiders/index.md
|
|
||||||
[6]: ../setup/setting-up-navigation.md#instant-loading
|
|
||||||
[7]: ../assets/screenshots/content-tabs-link.png
|
|
||||||
[8]: ../assets/screenshots/content-tabs.png
|
|
||||||
|
|
||||||
### Embedded content
|
### Embedded content
|
||||||
|
|
||||||
When [SuperFences][9] is enabled, content tabs can contain arbitrary nested
|
When [SuperFences] is enabled, content tabs can contain arbitrary nested
|
||||||
content, including further content tabs, and can be nested in other blocks like
|
content, including further content tabs, and can be nested in other blocks like
|
||||||
[admonitions][10], [details][11] or blockquotes:
|
[admonitions] or blockquotes:
|
||||||
|
|
||||||
_Example_:
|
_Example_:
|
||||||
|
|
||||||
@ -267,6 +239,4 @@ _Result_:
|
|||||||
2. Donec vitae suscipit est
|
2. Donec vitae suscipit est
|
||||||
3. Nulla tempor lobortis orci
|
3. Nulla tempor lobortis orci
|
||||||
|
|
||||||
[9]: #superfences
|
[admonitions]: admonitions.md
|
||||||
[10]: admonitions.md
|
|
||||||
[11]: admonitions.md#details
|
|
||||||
|
@ -6,15 +6,27 @@ template: overrides/main.html
|
|||||||
|
|
||||||
Material for MkDocs defines default styles for data tables – an excellent way
|
Material for MkDocs defines default styles for data tables – an excellent way
|
||||||
of rendering tabular data in project documentation. Furthermore, customizations
|
of rendering tabular data in project documentation. Furthermore, customizations
|
||||||
like [sortable tables][1] can be achieved with a third-party library and some
|
like [sortable tables] can be achieved with a third-party library and some
|
||||||
[additional JavaScript][2].
|
[additional JavaScript].
|
||||||
|
|
||||||
[1]: #sortable-tables
|
[sortable tables]: #sortable-tables
|
||||||
[2]: ../customization.md#additional-javascript
|
[additional JavaScript]: ../customization.md#additional-javascript
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
None.
|
This configuration enables Markdown table support, which should normally be
|
||||||
|
enabled by default, but to be sure, add the following lines to `mkdocs.yml`:
|
||||||
|
|
||||||
|
``` yaml
|
||||||
|
markdown_extensions:
|
||||||
|
- tables
|
||||||
|
```
|
||||||
|
|
||||||
|
See additional configuration options:
|
||||||
|
|
||||||
|
- [Tables]
|
||||||
|
|
||||||
|
[Tables]: ../setup/extensions/python-markdown.md#tables
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
@ -22,7 +34,7 @@ None.
|
|||||||
|
|
||||||
Data tables can be used at any position in your project documentation and can
|
Data tables can be used at any position in your project documentation and can
|
||||||
contain arbitrary Markdown, including inline code blocks, as well as [icons and
|
contain arbitrary Markdown, including inline code blocks, as well as [icons and
|
||||||
emojis][3].
|
emojis].
|
||||||
|
|
||||||
_Example_:
|
_Example_:
|
||||||
|
|
||||||
@ -42,12 +54,12 @@ _Result_:
|
|||||||
| `PUT` | :material-check-all: Update resource |
|
| `PUT` | :material-check-all: Update resource |
|
||||||
| `DELETE` | :material-close: Delete resource |
|
| `DELETE` | :material-close: Delete resource |
|
||||||
|
|
||||||
[3]: icons-emojis.md
|
[icons and emojis]: icons-emojis.md
|
||||||
|
|
||||||
### Column alignment
|
### Column alignment
|
||||||
|
|
||||||
If you want to align a specific column to the `left`, `center` or `right`, you
|
If you want to align a specific column to the `left`, `center` or `right`, you
|
||||||
can use the [regular Markdown syntax][4] placing `:` characters at the beginning
|
can use the [regular Markdown syntax] placing `:` characters at the beginning
|
||||||
and/or end of the divider.
|
and/or end of the divider.
|
||||||
|
|
||||||
=== "Left"
|
=== "Left"
|
||||||
@ -110,17 +122,17 @@ and/or end of the divider.
|
|||||||
| `PUT` | :material-check-all: Update resource |
|
| `PUT` | :material-check-all: Update resource |
|
||||||
| `DELETE` | :material-close: Delete resource |
|
| `DELETE` | :material-close: Delete resource |
|
||||||
|
|
||||||
[4]: https://www.markdownguide.org/extended-syntax/#tables
|
[regular Markdown syntax]: https://www.markdownguide.org/extended-syntax/#tables
|
||||||
|
|
||||||
## Customization
|
## Customization
|
||||||
|
|
||||||
### Sortable tables
|
### Sortable tables
|
||||||
|
|
||||||
If you want to make data tables sortable, you can add [tablesort][5], which is
|
If you want to make data tables sortable, you can add [tablesort], which is
|
||||||
natively integrated with Material for MkDocs and will also work with [instant
|
natively integrated with Material for MkDocs and will also work with [instant
|
||||||
loading][6] via [additional JavaScript][2]:
|
loading] via [additional JavaScript]:
|
||||||
|
|
||||||
=== "`docs/javascripts/tables.js`"
|
=== ":octicons-file-code-16: docs/javascripts/tablesort.js"
|
||||||
|
|
||||||
``` js
|
``` js
|
||||||
document$.subscribe(function() {
|
document$.subscribe(function() {
|
||||||
@ -131,17 +143,17 @@ loading][6] via [additional JavaScript][2]:
|
|||||||
})
|
})
|
||||||
```
|
```
|
||||||
|
|
||||||
=== "`mkdocs.yml`"
|
=== ":octicons-file-code-16: mkdocs.yml"
|
||||||
|
|
||||||
``` yaml
|
``` yaml
|
||||||
extra_javascript:
|
extra_javascript:
|
||||||
- https://cdnjs.cloudflare.com/ajax/libs/tablesort/5.2.1/tablesort.min.js
|
- https://cdnjs.cloudflare.com/ajax/libs/tablesort/5.2.1/tablesort.min.js
|
||||||
- javascripts/tables.js
|
- javascripts/tablesort.js
|
||||||
```
|
```
|
||||||
|
|
||||||
_Note that [tablesort][5] provides alternative comparison implementations like
|
Note that [tablesort] provides alternative comparison implementations like
|
||||||
numbers, dates, filesizes and month names. See the official documentation for
|
numbers, filesizes, dates and month names. See the [tablesort documentation]
|
||||||
more information._
|
[tablesort] for more information.
|
||||||
|
|
||||||
_Example_:
|
_Example_:
|
||||||
|
|
||||||
@ -167,5 +179,5 @@ _Result_:
|
|||||||
new Tablesort(tables.item(tables.length - 1));
|
new Tablesort(tables.item(tables.length - 1));
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
[5]: http://tristen.ca/tablesort/demo/
|
[tablesort]: http://tristen.ca/tablesort/demo/
|
||||||
[6]: ../setup/setting-up-navigation.md#instant-loading
|
[instant loading]: ../setup/setting-up-navigation.md#instant-loading
|
||||||
|
@ -6,22 +6,20 @@ template: overrides/main.html
|
|||||||
|
|
||||||
Diagrams help to communicate complex relationships and interconnections between
|
Diagrams help to communicate complex relationships and interconnections between
|
||||||
different technical components, and are a great addition to project
|
different technical components, and are a great addition to project
|
||||||
documentation. Material for MkDocs integrates with [Mermaid.js][1], a very
|
documentation. Material for MkDocs integrates with [Mermaid.js], a very
|
||||||
popular and flexible solution for drawing diagrams.
|
popular and flexible solution for drawing diagrams.
|
||||||
|
|
||||||
[1]: https://mermaid-js.github.io/mermaid/
|
[Mermaid.js]: https://mermaid-js.github.io/mermaid/
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
### SuperFences
|
[:octicons-heart-fill-24:{ .mdx-heart } Insiders][Insiders]{ .mdx-insiders } ·
|
||||||
|
[:octicons-tag-24: insiders-1.15.0][Insiders] ·
|
||||||
|
:octicons-beaker-24: Experimental
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][2] ·
|
This configuration enables native support for [Mermaid.js] diagrams. Material
|
||||||
:octicons-beaker-24: Experimental ·
|
for MkDocs will automatically initialize the JavaScript runtime when a page
|
||||||
[:octicons-heart-fill-24:{ .mdx-heart } Insiders only][2]{ .mdx-insiders }
|
includes a `mermaid` code block:
|
||||||
|
|
||||||
The [SuperFences][3] extension, which is part of [Python Markdown
|
|
||||||
Extensions][4], allows for adding __custom fences__, which can be used to
|
|
||||||
render [Mermaid.js][1] diagrams with zero effort:
|
|
||||||
|
|
||||||
``` yaml
|
``` yaml
|
||||||
markdown_extensions:
|
markdown_extensions:
|
||||||
@ -32,51 +30,28 @@ markdown_extensions:
|
|||||||
format: !!python/name:pymdownx.superfences.fence_code_format
|
format: !!python/name:pymdownx.superfences.fence_code_format
|
||||||
```
|
```
|
||||||
|
|
||||||
No further configuration is necessary. Material for MkDocs will automatically
|
No further configuration is necessary. Advantages over a custom integration:
|
||||||
load and initialize the [Mermaid.js][1] runtime when a page includes a [fenced
|
|
||||||
`mermaid` block][5]. Furthermore:
|
|
||||||
|
|
||||||
- [x] Works with [instant loading][6] without any additional effort
|
- [x] Works with [instant loading] without any additional effort
|
||||||
- [x] Diagrams automatically use fonts and colors defined in `mkdocs.yml`[^1]
|
- [x] Diagrams automatically use fonts and colors defined in `mkdocs.yml`[^1]
|
||||||
- [x] Fonts and colors can be customized with [additional stylesheets][7]
|
- [x] Fonts and colors can be customized with [additional style sheets]
|
||||||
- [x] Support for both, light and dark color schemes
|
- [x] Support for both, light and dark color schemes – _try it on this page!_
|
||||||
|
|
||||||
_While it's also possible to integrate [Mermaid.js][1] using existing
|
|
||||||
third-party plugins[^2], the new native integration is recommended as it
|
|
||||||
ensures interoperability with all Material for MkDocs features._
|
|
||||||
|
|
||||||
[^1]:
|
[^1]:
|
||||||
While all [Mermaid.js][1] features should work out-of-the-box, Material for
|
While all [Mermaid.js] features should work out-of-the-box, Material for
|
||||||
MkDocs will currently adjust the fonts and colors for flow charts, sequence
|
MkDocs will currently only adjust the fonts and colors for flowcharts,
|
||||||
diagrams, class diagams, state diagrams and entity relationship diagrams.
|
sequence diagrams, class diagams, state diagrams and entity relationship
|
||||||
|
diagrams.
|
||||||
|
|
||||||
[^2]:
|
[Insiders]: ../insiders/index.md
|
||||||
If you don't want to use the native integration, [mkdocs-mermaid2-plugin][8]
|
[instant loading]: ../setup/setting-up-navigation.md#instant-loading
|
||||||
might be a good alternative. However, note that this plugin cannot be used
|
[additional style sheets]: ../customization.md#additional-css
|
||||||
in conjunction with the [mkdocs-minify-plugin][9] and doesn't adapt to
|
|
||||||
dark mode.
|
|
||||||
|
|
||||||
[2]: ../insiders/index.md
|
|
||||||
[3]: https://facelessuser.github.io/pymdown-extensions/extensions/superfences/
|
|
||||||
[4]: https://facelessuser.github.io/pymdown-extensions/
|
|
||||||
[5]: #usage
|
|
||||||
[6]: ../setup/setting-up-navigation.md#instant-loading
|
|
||||||
[7]: ../customization.md#additional-css
|
|
||||||
[8]: https://github.com/fralau/mkdocs-mermaid2-plugin
|
|
||||||
[9]: https://github.com/byrnereese/mkdocs-minify-plugin
|
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
Mermaid diagrams are written as [code blocks][10] with the help of the
|
|
||||||
[SuperFences][11] extension. They must be enclosed with two separate lines
|
|
||||||
containing three backticks.
|
|
||||||
|
|
||||||
[10]: code-blocks.md
|
|
||||||
[11]: #superfences
|
|
||||||
|
|
||||||
### Using flowcharts
|
### Using flowcharts
|
||||||
|
|
||||||
[Flowcharts][12] are diagrams that represent workflows or processes. The steps
|
[Flowcharts] are diagrams that represent workflows or processes. The steps
|
||||||
are rendered as nodes of various kinds and are connected by edges, describing
|
are rendered as nodes of various kinds and are connected by edges, describing
|
||||||
the necessary order of steps.
|
the necessary order of steps.
|
||||||
|
|
||||||
@ -104,11 +79,11 @@ graph LR
|
|||||||
B ---->|No| E[Yay!];
|
B ---->|No| E[Yay!];
|
||||||
```
|
```
|
||||||
|
|
||||||
[12]: https://mermaid-js.github.io/mermaid/#/flowchart
|
[Flowcharts]: https://mermaid-js.github.io/mermaid/#/flowchart
|
||||||
|
|
||||||
### Using sequence diagrams
|
### Using sequence diagrams
|
||||||
|
|
||||||
[Sequence diagrams][13] describe a specific scenario as sequential interactions
|
[Sequence diagrams] describe a specific scenario as sequential interactions
|
||||||
between multiple objects or actors, including the messages that are exchanged
|
between multiple objects or actors, including the messages that are exchanged
|
||||||
between those actors.
|
between those actors.
|
||||||
|
|
||||||
@ -142,11 +117,11 @@ sequenceDiagram
|
|||||||
Bob-->>John: Jolly good!
|
Bob-->>John: Jolly good!
|
||||||
```
|
```
|
||||||
|
|
||||||
[13]: https://mermaid-js.github.io/mermaid/#/sequenceDiagram
|
[Sequence diagrams]: https://mermaid-js.github.io/mermaid/#/sequenceDiagram
|
||||||
|
|
||||||
### Using state diagrams
|
### Using state diagrams
|
||||||
|
|
||||||
[State diagrams][14] are a great tool to describe the behavior of a system,
|
[State diagrams] are a great tool to describe the behavior of a system,
|
||||||
decomposing it into a finite number of states, and transitions between those
|
decomposing it into a finite number of states, and transitions between those
|
||||||
states.
|
states.
|
||||||
|
|
||||||
@ -194,11 +169,11 @@ stateDiagram-v2
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
[14]: https://mermaid-js.github.io/mermaid/#/stateDiagram
|
[State diagrams]: https://mermaid-js.github.io/mermaid/#/stateDiagram
|
||||||
|
|
||||||
### Using class diagrams
|
### Using class diagrams
|
||||||
|
|
||||||
[Class diagrams][15] are central to object oriented programing, describing the
|
[Class diagrams] are central to object oriented programing, describing the
|
||||||
structure of a system by modelling entities as classes and relationships between
|
structure of a system by modelling entities as classes and relationships between
|
||||||
them.
|
them.
|
||||||
|
|
||||||
@ -266,11 +241,11 @@ classDiagram
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
[15]: https://mermaid-js.github.io/mermaid/#/classDiagram
|
[Class diagrams]: https://mermaid-js.github.io/mermaid/#/classDiagram
|
||||||
|
|
||||||
### Using entity-relationship diagrams
|
### Using entity-relationship diagrams
|
||||||
|
|
||||||
An [entity-relationship diagram][16] is composed of entity types and specifies
|
An [entity-relationship diagram] is composed of entity types and specifies
|
||||||
relationships that exist between entities. It describes inter-related things in
|
relationships that exist between entities. It describes inter-related things in
|
||||||
a specific domain of knowledge.
|
a specific domain of knowledge.
|
||||||
|
|
||||||
@ -294,4 +269,4 @@ erDiagram
|
|||||||
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
|
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
|
||||||
```
|
```
|
||||||
|
|
||||||
[16]: https://mermaid-js.github.io/mermaid/#/entityRelationshipDiagram
|
[entity-relationship diagram]: https://mermaid-js.github.io/mermaid/#/entityRelationshipDiagram
|
||||||
|
@ -4,19 +4,15 @@ template: overrides/main.html
|
|||||||
|
|
||||||
# Footnotes
|
# Footnotes
|
||||||
|
|
||||||
Footnotes are a great way to add references to supplemental or additional
|
Footnotes are a great way to add supplemental or additional information to a
|
||||||
information for a specific section of a document without interrupting the
|
specific word, phrase or sentence without interrupting the flow of a document.
|
||||||
document flow. Material for MkDocs provides the ability to insert inline
|
Material for MkDocs provides the ability to define, reference and render
|
||||||
footnotes and render them at the bottom of the page.
|
footnotes.
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
### Footnotes
|
This configuration adds the ability to define inline footnotes, which are then
|
||||||
|
rendered below all Markdown content of a document. Add the following lines to
|
||||||
[:octicons-file-code-24: Source][1] · [:octicons-workflow-24: Extension][2]
|
|
||||||
|
|
||||||
The [Footnotes][2] extension, which is part of the standard Markdown library,
|
|
||||||
adds the ability to add inline footnotes to a document and can be enabled via
|
|
||||||
`mkdocs.yml`:
|
`mkdocs.yml`:
|
||||||
|
|
||||||
``` yaml
|
``` yaml
|
||||||
@ -24,8 +20,11 @@ markdown_extensions:
|
|||||||
- footnotes
|
- footnotes
|
||||||
```
|
```
|
||||||
|
|
||||||
[1]: https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/stylesheets/main/extensions/markdown/_footnotes.scss
|
See additional configuration options:
|
||||||
[2]: https://python-markdown.github.io/extensions/footnotes/
|
|
||||||
|
- [Footnotes]
|
||||||
|
|
||||||
|
[Footnotes]: ../setup/extensions/python-markdown.md#footnotes
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
@ -54,7 +53,7 @@ reference is automatically added.
|
|||||||
|
|
||||||
#### on a single line
|
#### on a single line
|
||||||
|
|
||||||
Short statements can be written on the same line.
|
Short footnotes can be written on the same line.
|
||||||
|
|
||||||
_Example_:
|
_Example_:
|
||||||
|
|
||||||
@ -83,9 +82,9 @@ _Example_:
|
|||||||
|
|
||||||
_Result_:
|
_Result_:
|
||||||
|
|
||||||
[^2]:
|
[^2]:
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
|
||||||
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus
|
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus
|
||||||
auctor massa, nec semper lorem quam in massa.
|
auctor massa, nec semper lorem quam in massa.
|
||||||
|
|
||||||
[Jump to footnote at the bottom of the page](#fn:2)
|
[Jump to footnote at the bottom of the page](#fn:2)
|
||||||
|
@ -6,117 +6,42 @@ template: overrides/main.html
|
|||||||
|
|
||||||
Material for MkDocs provides support for several HTML elements that can be used
|
Material for MkDocs provides support for several HTML elements that can be used
|
||||||
to highlight sections of a document or apply specific formatting. Additionally,
|
to highlight sections of a document or apply specific formatting. Additionally,
|
||||||
[Critic Markup][1] is supported, adding the ability to display suggested changes
|
[Critic Markup] is supported, adding the ability to display suggested changes
|
||||||
for a document.
|
for a document.
|
||||||
|
|
||||||
[1]: http://criticmarkup.com/
|
[Critic Markup]: https://github.com/CriticMarkup/CriticMarkup-toolkit
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
### Critic
|
This configuration enables support for keyboard keys, tracking changes in
|
||||||
|
documents, defining sub- and superscript and highlighting text. Add the
|
||||||
[:octicons-file-code-24: Source][2] · [:octicons-workflow-24: Extension][3]
|
following lines to `mkdocs.yml`:
|
||||||
|
|
||||||
The [Critic][3] extension, which is part of [Python Markdown Extensions][4],
|
|
||||||
allows for the __usage of [Critic Markup][1] to highlight changes__ in a
|
|
||||||
document, and can be enabled via `mkdocs.yml`:
|
|
||||||
|
|
||||||
``` yaml
|
``` yaml
|
||||||
markdown_extensions:
|
markdown_extensions:
|
||||||
- pymdownx.critic
|
- pymdownx.critic
|
||||||
```
|
|
||||||
|
|
||||||
The following options are supported:
|
|
||||||
|
|
||||||
`mode`{ #mode }
|
|
||||||
|
|
||||||
: :octicons-milestone-24: Default: `view` – This option defines how the markup
|
|
||||||
should be parsed, i.e. whether to just `view` all suggest changes, or
|
|
||||||
alternatively `accept` or `reject` them:
|
|
||||||
|
|
||||||
=== "View changes"
|
|
||||||
|
|
||||||
``` yaml
|
|
||||||
markdown_extensions:
|
|
||||||
- pymdownx.critic:
|
|
||||||
mode: view
|
|
||||||
```
|
|
||||||
|
|
||||||
=== "Accept changes"
|
|
||||||
|
|
||||||
``` yaml
|
|
||||||
markdown_extensions:
|
|
||||||
- pymdownx.critic:
|
|
||||||
mode: accept
|
|
||||||
```
|
|
||||||
|
|
||||||
=== "Reject changes"
|
|
||||||
|
|
||||||
``` yaml
|
|
||||||
markdown_extensions:
|
|
||||||
- pymdownx.critic:
|
|
||||||
mode: reject
|
|
||||||
```
|
|
||||||
|
|
||||||
[2]: https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/stylesheets/main/extensions/pymdownx/_critic.scss
|
|
||||||
[3]: https://facelessuser.github.io/pymdown-extensions/extensions/critic/
|
|
||||||
[4]: https://facelessuser.github.io/pymdown-extensions/
|
|
||||||
|
|
||||||
### BetterEm
|
|
||||||
|
|
||||||
The [BetterEm][5] extension, which is part of [Python Markdown Extensions][4],
|
|
||||||
improves the handling of Markup to emphasize text (e.g. __bold__ and _italic_),
|
|
||||||
and can be enabled via `mkdocs.yml`:
|
|
||||||
|
|
||||||
``` yaml
|
|
||||||
markdown_extensions:
|
|
||||||
- pymdownx.betterem:
|
|
||||||
smart_enable: all
|
|
||||||
```
|
|
||||||
|
|
||||||
[5]: https://facelessuser.github.io/pymdown-extensions/extensions/betterem/
|
|
||||||
|
|
||||||
### Caret, Mark & Tilde
|
|
||||||
|
|
||||||
The [Caret][6], [Mark][7] and [Tilde][8] extensions, which are part of [Python
|
|
||||||
Markdown Extensions][4], allow for the __highlighting of text__, as well as
|
|
||||||
__handling sub- and superscripts__:
|
|
||||||
|
|
||||||
``` yaml
|
|
||||||
markdown_extensions:
|
|
||||||
- pymdownx.caret
|
- pymdownx.caret
|
||||||
|
- pymdownx.keys
|
||||||
- pymdownx.mark
|
- pymdownx.mark
|
||||||
- pymdownx.tilde
|
- pymdownx.tilde
|
||||||
```
|
```
|
||||||
|
|
||||||
[6]: https://facelessuser.github.io/pymdown-extensions/extensions/caret/
|
See additional configuration options:
|
||||||
[7]: https://facelessuser.github.io/pymdown-extensions/extensions/mark/
|
|
||||||
[8]: https://facelessuser.github.io/pymdown-extensions/extensions/tilde/
|
|
||||||
|
|
||||||
### SmartSymbols
|
- [Critic]
|
||||||
|
- [Caret, Mark & Tilde]
|
||||||
|
- [Keys]
|
||||||
|
|
||||||
The [SmartSymbols][9] extension, which is also part of [Python Markdown
|
[Critic]: ../setup/extensions/python-markdown-extensions.md#critic
|
||||||
Extensions][4], __converts special characters into their corresponding
|
[Caret, Mark & Tilde]: ../setup/extensions/python-markdown-extensions.md#caret-mark-tilde
|
||||||
symbols__, and can be enabled via `mkdocs.yml`:
|
[Keys]: ../setup/extensions/python-markdown-extensions.md#keys
|
||||||
|
|
||||||
``` yaml
|
|
||||||
markdown_extensions:
|
|
||||||
- pymdownx.smartsymbols
|
|
||||||
```
|
|
||||||
|
|
||||||
See the [official documentation][9] for a list of supported symbols.
|
|
||||||
|
|
||||||
[9]: https://facelessuser.github.io/pymdown-extensions/extensions/smartsymbols/
|
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
### Highlighting changes
|
### Highlighting changes
|
||||||
|
|
||||||
When [Critic][10] is enabled, [Critic Markup][1] can be used, which adds the
|
When [Critic] is enabled, [Critic Markup] can be used, which adds the ability to
|
||||||
ability to _highlight suggested changes_, as well as add _inline comments_ to a
|
highlight suggested changes, as well as add inline comments to a document.
|
||||||
document:
|
|
||||||
|
|
||||||
[10]: #critic
|
|
||||||
|
|
||||||
_Example_:
|
_Example_:
|
||||||
|
|
||||||
@ -127,7 +52,7 @@ possible {>>and comments can be added inline<<}.
|
|||||||
|
|
||||||
{==
|
{==
|
||||||
|
|
||||||
Formatting can also be applied to blocks, by putting the opening and closing
|
Formatting can also be applied to blocks by putting the opening and closing
|
||||||
tags on separate lines and adding new lines between the tags and the content.
|
tags on separate lines and adding new lines between the tags and the content.
|
||||||
|
|
||||||
==}
|
==}
|
||||||
@ -144,7 +69,7 @@ Text can be <del class="critic">deleted</del> and replacement text
|
|||||||
<div>
|
<div>
|
||||||
<mark class="critic block">
|
<mark class="critic block">
|
||||||
<p>
|
<p>
|
||||||
Formatting can also be applied to blocks, by putting the opening and
|
Formatting can also be applied to blocks by putting the opening and
|
||||||
closing tags on separate lines and adding new lines between the tags and
|
closing tags on separate lines and adding new lines between the tags and
|
||||||
the content.
|
the content.
|
||||||
</p>
|
</p>
|
||||||
@ -153,9 +78,9 @@ Text can be <del class="critic">deleted</del> and replacement text
|
|||||||
|
|
||||||
### Highlighting text
|
### Highlighting text
|
||||||
|
|
||||||
When the [Caret, Mark & Tilde][11] extensions are enabled, text can be
|
When [Caret, Mark & Tilde] are enabled, text can be highlighted with a simple
|
||||||
highlighted with a nicer syntax than using the corresponding `mark`, `ins` and
|
syntax, which is more convenient that directly using the corresponding
|
||||||
`del` HTML tags:
|
[`mark`][mark], [`ins`][ins] and [`del`][del] HTML tags.
|
||||||
|
|
||||||
_Example_:
|
_Example_:
|
||||||
|
|
||||||
@ -171,13 +96,15 @@ _Result_:
|
|||||||
- ^^This was inserted^^
|
- ^^This was inserted^^
|
||||||
- ~~This was deleted~~
|
- ~~This was deleted~~
|
||||||
|
|
||||||
[11]: #caret-mark-tilde
|
[mark]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark
|
||||||
|
[ins]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ins
|
||||||
|
[del]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del
|
||||||
|
|
||||||
### Sub- and superscripts
|
### Sub- and superscripts
|
||||||
|
|
||||||
When the [Caret & Tilde][11] extensions are enabled, text can be sub- and
|
When [Caret & Tilde][Caret, Mark & Tilde] are enabled, text can be sub- and
|
||||||
superscripted with a nicer syntax than using the corresponding `sub` and `sup`
|
superscripted with a simple syntax, which is more convenient that directly
|
||||||
HTML tags:
|
using the corresponding [`sub`][sub] and [`sup`][sup] HTML tags:
|
||||||
|
|
||||||
_Example_:
|
_Example_:
|
||||||
|
|
||||||
@ -191,4 +118,23 @@ _Result_:
|
|||||||
- H~2~0
|
- H~2~0
|
||||||
- A^T^A
|
- A^T^A
|
||||||
|
|
||||||
[11]: #caret-mark-tilde
|
[sub]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sub
|
||||||
|
[sup]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sup
|
||||||
|
|
||||||
|
### Adding keyboard keys
|
||||||
|
|
||||||
|
When [Keys] is enabled, keyboard keys can be rendered with a simple syntax.
|
||||||
|
Consult the [Python Markdown Extensions] documentation to learn about all
|
||||||
|
available shortcodes.
|
||||||
|
|
||||||
|
_Example_:
|
||||||
|
|
||||||
|
``` markdown
|
||||||
|
++ctrl+alt+del++
|
||||||
|
```
|
||||||
|
|
||||||
|
_Result_:
|
||||||
|
|
||||||
|
++ctrl+alt+del++
|
||||||
|
|
||||||
|
[Python Markdown Extensions]: https://facelessuser.github.io/pymdown-extensions/extensions/keys/#extendingmodifying-key-map-index
|
||||||
|
@ -5,9 +5,11 @@ template: overrides/main.html
|
|||||||
# Icons + Emojis
|
# Icons + Emojis
|
||||||
|
|
||||||
One of the best features of Material for MkDocs is the possibility to use [more
|
One of the best features of Material for MkDocs is the possibility to use [more
|
||||||
than 8.000 icons][1] and thousands of emojis in your project documentation
|
than 8.000 icons][icon search] and thousands of emojis in your project
|
||||||
with practically zero additional effort. Furthermore, custom icons can be added
|
documentation with practically zero additional effort. Moreover, custom icons
|
||||||
and used in `mkdocs.yml`, documents and templates.
|
can be added and used in `mkdocs.yml`, documents and templates.
|
||||||
|
|
||||||
|
[icon search]: #search
|
||||||
|
|
||||||
## Search
|
## Search
|
||||||
|
|
||||||
@ -24,19 +26,15 @@ and used in `mkdocs.yml`, documents and templates.
|
|||||||
</div>
|
</div>
|
||||||
<small>
|
<small>
|
||||||
:octicons-light-bulb-16:
|
:octicons-light-bulb-16:
|
||||||
**Tip:** Enter some keywords to find the perfect icon or emoji and click on
|
**Tip:** Enter some keywords to find icons and emojis and click on the
|
||||||
the shortcode to copy it to your clipboard.
|
shortcode to copy it to your clipboard.
|
||||||
</small>
|
</small>
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
### Emoji
|
This configuration enables the use of icons and emojis by using simple
|
||||||
|
shortcodes which can be discovered through the [icon search]. Add the following
|
||||||
[:octicons-file-code-24: Source][2] · [:octicons-workflow-24: Extension][3]
|
lines to `mkdocs.yml`:
|
||||||
|
|
||||||
The [Emoji][3] extension, which is part of [Python Markdown Extensions][4],
|
|
||||||
adds the ability to __integrate emojis and icons__ in the `*.svg` file format,
|
|
||||||
which are inlined when [building your site][5]:
|
|
||||||
|
|
||||||
``` yaml
|
``` yaml
|
||||||
markdown_extensions:
|
markdown_extensions:
|
||||||
@ -47,44 +45,28 @@ markdown_extensions:
|
|||||||
|
|
||||||
The following icon sets are bundled with Material for MkDocs:
|
The following icon sets are bundled with Material for MkDocs:
|
||||||
|
|
||||||
- :material-material-design: – [Material Design][6]
|
- :material-material-design: – [Material Design]
|
||||||
- :fontawesome-brands-font-awesome-flag: – [FontAwesome][7]
|
- :fontawesome-brands-font-awesome: – [FontAwesome]
|
||||||
- :octicons-mark-github-16: – [Octicons][8]
|
- :octicons-mark-github-16: – [Octicons]
|
||||||
|
|
||||||
You can also add [additional icons][9]. When using emojis, it's recommended to
|
See additional configuration options:
|
||||||
consult the official documentation of [Python Markdown Extensions][3] to learn
|
|
||||||
about configuration options.
|
|
||||||
|
|
||||||
[1]: icons-emojis.md#search
|
- [Emoji]
|
||||||
[2]: https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/stylesheets/main/extensions/pymdownx/_emoji.scss
|
- [Emoji with custom icons]
|
||||||
[3]: https://facelessuser.github.io/pymdown-extensions/extensions/emoji/
|
|
||||||
[4]: https://facelessuser.github.io/pymdown-extensions/
|
|
||||||
[5]: ../creating-your-site.md#building-your-site
|
|
||||||
[6]: https://materialdesignicons.com/
|
|
||||||
[7]: https://fontawesome.com/icons?d=gallery&m=free
|
|
||||||
[8]: https://octicons.github.com/
|
|
||||||
[9]: ../setup/changing-the-logo-and-icons.md#additional-icons
|
|
||||||
|
|
||||||
### Attribute List
|
[Material Design]: https://materialdesignicons.com/
|
||||||
|
[FontAwesome]: https://fontawesome.com/icons?d=gallery&m=free
|
||||||
The [Attribute List][10] extension, which is part of the standard Markdown
|
[Octicons]: https://octicons.github.com/
|
||||||
library, allows to __add HTML attributes and CSS classes to Markdown elements__,
|
[Emoji]: ../setup/extensions/python-markdown-extensions.md#emoji
|
||||||
and can be enabled via `mkdocs.yml`
|
[Emoji with custom icons]: ../setup/extensions/python-markdown-extensions.md#custom-icons
|
||||||
|
|
||||||
``` yaml
|
|
||||||
markdown_extensions:
|
|
||||||
- attr_list
|
|
||||||
```
|
|
||||||
|
|
||||||
[10]: https://python-markdown.github.io/extensions/attr_list/
|
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
### Using emojis
|
### Using emojis
|
||||||
|
|
||||||
Emojis can be integrated in Markdown by putting the shortcode of the emoji
|
Emojis can be integrated in Markdown by putting the shortcode of the emoji
|
||||||
between two colons. If you're using [Twemoji][11] (recommended), you can look up
|
between two colons. If you're using [Twemoji] (recommended), you can look up
|
||||||
the shortcodes at [Emojipedia][12].
|
the shortcodes at [Emojipedia].
|
||||||
|
|
||||||
_Example_:
|
_Example_:
|
||||||
|
|
||||||
@ -96,54 +78,40 @@ _Result_:
|
|||||||
|
|
||||||
:smile:
|
:smile:
|
||||||
|
|
||||||
[11]: https://twemoji.twitter.com/
|
[Twemoji]: https://twemoji.twitter.com/
|
||||||
[12]: https://emojipedia.org/twitter/
|
[Emojipedia]: https://emojipedia.org/twitter/
|
||||||
|
|
||||||
### Using icons
|
### Using icons
|
||||||
|
|
||||||
When [Emoji][13] is enabled, icons can be used similar to emojis, by referencing
|
When [Emoji] is enabled, icons can be used similar to emojis, by referencing
|
||||||
a valid path to any icon bundled with the theme, which are located in the
|
a valid path to any icon bundled with the theme, which are located in the
|
||||||
[`.icons`][1] directory, and replacing `/` with `-`:
|
[`.icons`][custom icons] directory, and replacing `/` with `-`:
|
||||||
|
|
||||||
_Example_:
|
_Example_:
|
||||||
|
|
||||||
```
|
```
|
||||||
- :material-account-circle: – `.icons/material/account-circle.svg`
|
- :material-account-circle: – `material/account-circle.svg`
|
||||||
- :fontawesome-regular-laugh-wink: – `.icons/fontawesome/regular/laugh-wink.svg`
|
- :fontawesome-regular-laugh-wink: – `fontawesome/regular/laugh-wink.svg`
|
||||||
- :octicons-repo-push-16: – `.icons/octicons/repo-push-16.svg`
|
- :octicons-repo-push-16: – `octicons/repo-push-16.svg`
|
||||||
```
|
```
|
||||||
|
|
||||||
_Result_:
|
_Result_:
|
||||||
|
|
||||||
- :material-account-circle: – [`.icons/material/account-circle.svg`][14]
|
- :material-account-circle: – [`material/account-circle.svg`][icon Material]
|
||||||
- :fontawesome-regular-laugh-wink: – [`.icons/fontawesome/regular/laugh-wink.svg`][15]
|
- :fontawesome-regular-laugh-wink: – [`fontawesome/regular/laugh-wink.svg`][icon FontAwesome]
|
||||||
- :octicons-repo-push-16: – [`.icons/octicons/repo-push-16.svg`][16]
|
- :octicons-repo-push-16: – [`octicons/repo-push-16.svg`][icon Octicons]
|
||||||
|
|
||||||
[13]: #emoji
|
[custom icons]: https://github.com/squidfunk/mkdocs-material/tree/master/material/.icons
|
||||||
[14]: https://raw.githubusercontent.com/squidfunk/mkdocs-material/master/material/.icons/material/account-circle.svg
|
[icon Material]: https://raw.githubusercontent.com/squidfunk/mkdocs-material/master/material/.icons/material/account-circle.svg
|
||||||
[15]: https://raw.githubusercontent.com/squidfunk/mkdocs-material/master/material/.icons/fontawesome/regular/laugh-wink.svg
|
[icon FontAwesome]: https://raw.githubusercontent.com/squidfunk/mkdocs-material/master/material/.icons/fontawesome/regular/laugh-wink.svg
|
||||||
[16]: https://raw.githubusercontent.com/squidfunk/mkdocs-material/master/material/.icons/octicons/repo-push-16.svg
|
[icon Octicons]: https://raw.githubusercontent.com/squidfunk/mkdocs-material/master/material/.icons/octicons/repo-push-16.svg
|
||||||
|
|
||||||
#### with colors
|
#### with colors
|
||||||
|
|
||||||
When the [Attribute List][17] extension is enabled, custom CSS classes and
|
When [Attribute Lists] is enabled, custom CSS classes can be added to icons by
|
||||||
attributes can be added to icons by suffixing the icon with a special syntax.
|
suffixing the icon with a special syntax. While HTML allows to use
|
||||||
While HTML and CSS allow to use [inline styles][18], it's always best to add
|
[inline styles], it's always recommended to add an [additional style sheet] and
|
||||||
an [additional stylesheet][19] and put styles into dedicated CSS classes:
|
move declarations into dedicated CSS classes.
|
||||||
|
|
||||||
``` css
|
|
||||||
.medium {
|
|
||||||
color: #00AB6C;
|
|
||||||
}
|
|
||||||
.twitter {
|
|
||||||
color: #1DA1F2;
|
|
||||||
}
|
|
||||||
.facebook {
|
|
||||||
color: #4267B2;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
Then, simply add the CSS class to the icon.
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.medium {
|
.medium {
|
||||||
@ -159,11 +127,34 @@ Then, simply add the CSS class to the icon.
|
|||||||
|
|
||||||
_Example_:
|
_Example_:
|
||||||
|
|
||||||
``` markdown
|
=== ":octicons-file-code-16: docs/example.md"
|
||||||
- :fontawesome-brands-medium:{ .medium } – Medium
|
|
||||||
- :fontawesome-brands-twitter:{ .twitter } – Twitter
|
``` markdown
|
||||||
- :fontawesome-brands-facebook:{ .facebook } – Facebook
|
- :fontawesome-brands-medium:{ .medium } – Medium
|
||||||
```
|
- :fontawesome-brands-twitter:{ .twitter } – Twitter
|
||||||
|
- :fontawesome-brands-facebook:{ .facebook } – Facebook
|
||||||
|
```
|
||||||
|
|
||||||
|
=== ":octicons-file-code-16: docs/stylesheets/extra.css"
|
||||||
|
|
||||||
|
``` css
|
||||||
|
.medium {
|
||||||
|
color: #00AB6C;
|
||||||
|
}
|
||||||
|
.twitter {
|
||||||
|
color: #1DA1F2;
|
||||||
|
}
|
||||||
|
.facebook {
|
||||||
|
color: #4267B2;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
=== ":octicons-file-code-16: mkdocs.yml"
|
||||||
|
|
||||||
|
``` yaml
|
||||||
|
extra_css:
|
||||||
|
- stylesheets/extra.css
|
||||||
|
```
|
||||||
|
|
||||||
_Result_:
|
_Result_:
|
||||||
|
|
||||||
@ -171,52 +162,61 @@ _Result_:
|
|||||||
- :fontawesome-brands-twitter:{ .twitter } – Twitter
|
- :fontawesome-brands-twitter:{ .twitter } – Twitter
|
||||||
- :fontawesome-brands-facebook:{ .facebook } – Facebook
|
- :fontawesome-brands-facebook:{ .facebook } – Facebook
|
||||||
|
|
||||||
[17]: #attribute-list
|
[Attribute Lists]: ../setup/extensions/python-markdown.md#attribute-lists
|
||||||
[18]: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/style
|
[inline styles]: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/style
|
||||||
[19]: ../customization.md#additional-css
|
[additional style sheet]: ../customization.md#additional-css
|
||||||
|
|
||||||
#### with animations
|
#### with animations
|
||||||
|
|
||||||
Similar to adding [colors][20], it's just as easy to add [CSS animations][21] to
|
Similar to adding [colors], it's just as easy to add [animations] to icons by
|
||||||
icons by using an [additional stylesheet][6], defining a `#!css @keyframes` rule
|
using an [additional style sheet], defining a `@keyframes` rule and adding a
|
||||||
and adding the dedicated CSS class to the icon:
|
dedicated CSS class to the icon.
|
||||||
|
|
||||||
``` css
|
|
||||||
@keyframes heart {
|
|
||||||
0%, 40%, 80%, 100% {
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
20%, 60% {
|
|
||||||
transform: scale(1.15);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.heart {
|
|
||||||
animation: heart 1000ms infinite;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
Then, simply add the CSS class to the icon.
|
|
||||||
|
|
||||||
_Example_:
|
_Example_:
|
||||||
|
|
||||||
``` markdown
|
=== ":octicons-file-code-16: docs/example.md"
|
||||||
:octicons-heart-fill-24:{ .heart }
|
|
||||||
```
|
``` markdown
|
||||||
|
:octicons-heart-fill-24:{ .heart }
|
||||||
|
```
|
||||||
|
|
||||||
|
=== ":octicons-file-code-16: docs/stylesheets/extra.css"
|
||||||
|
|
||||||
|
``` css
|
||||||
|
@keyframes heart {
|
||||||
|
0%, 40%, 80%, 100% {
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
20%, 60% {
|
||||||
|
transform: scale(1.15);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.heart {
|
||||||
|
animation: heart 1000ms infinite;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
=== ":octicons-file-code-16: mkdocs.yml"
|
||||||
|
|
||||||
|
``` yaml
|
||||||
|
extra_css:
|
||||||
|
- stylesheets/extra.css
|
||||||
|
```
|
||||||
|
|
||||||
_Result_:
|
_Result_:
|
||||||
|
|
||||||
:octicons-heart-fill-24:{ .mdx-heart }
|
:octicons-heart-fill-24:{ .mdx-heart }
|
||||||
|
|
||||||
[20]: #with-colors
|
[colors]: #with-colors
|
||||||
[21]: https://developer.mozilla.org/en-US/docs/Web/CSS/animation
|
[animations]: https://developer.mozilla.org/en-US/docs/Web/CSS/animation
|
||||||
|
|
||||||
## Customization
|
## Customization
|
||||||
|
|
||||||
### Using icons in templates
|
### Using icons in templates
|
||||||
|
|
||||||
When you're [extending the theme][22] with partials or blocks, you can simply
|
When you're [extending the theme] with partials or blocks, you can simply
|
||||||
reference any icon that's [bundled with the theme][1] with Jinja's
|
reference any icon that's [bundled with the theme][icon search] with Jinja's
|
||||||
[`include`][23] function and wrap it with the `twemoji` class:
|
[`include`][include] function and wrap it with the `.twemoji` CSS class:
|
||||||
|
|
||||||
``` html
|
``` html
|
||||||
<span class="twemoji">
|
<span class="twemoji">
|
||||||
@ -226,5 +226,5 @@ reference any icon that's [bundled with the theme][1] with Jinja's
|
|||||||
|
|
||||||
This is exactly what Material for MkDocs does in its templates.
|
This is exactly what Material for MkDocs does in its templates.
|
||||||
|
|
||||||
[22]: ../customization.md#extending-the-theme
|
[extending the theme]: ../customization.md#extending-the-theme
|
||||||
[23]: https://jinja.palletsprojects.com/en/2.11.x/templates/#include
|
[include]: https://jinja.palletsprojects.com/en/2.11.x/templates/#include
|
||||||
|
@ -6,32 +6,36 @@ template: overrides/main.html
|
|||||||
|
|
||||||
While images are first-class citizens of Markdown and part of the core syntax,
|
While images are first-class citizens of Markdown and part of the core syntax,
|
||||||
it can be difficult to work with them. Material for MkDocs makes working with
|
it can be difficult to work with them. Material for MkDocs makes working with
|
||||||
images more comfortable by providing styles for alignment and image captions.
|
images more comfortable, providing styles for image alignment and image
|
||||||
|
captions.
|
||||||
[1]: https://www.markdownguide.org/basic-syntax/#images-1
|
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
### Attribute List
|
This configuration adds the ability to align images, add captions to images
|
||||||
|
(rendering them as figures), and mark large images for lazy-loading. Add the
|
||||||
The [Attribute List][2] extension, which is part of the standard Markdown
|
following lines to `mkdocs.yml`:
|
||||||
library, allows to __add HTML attributes and CSS classes to Markdown elements__,
|
|
||||||
and can be enabled via `mkdocs.yml`
|
|
||||||
|
|
||||||
``` yaml
|
``` yaml
|
||||||
markdown_extensions:
|
markdown_extensions:
|
||||||
- attr_list
|
- attr_list
|
||||||
|
- md_in_html
|
||||||
```
|
```
|
||||||
|
|
||||||
[2]: https://python-markdown.github.io/extensions/attr_list/
|
See additional configuration options:
|
||||||
|
|
||||||
|
- [Attribute Lists]
|
||||||
|
- [Markdown in HTML]
|
||||||
|
|
||||||
|
[Attribute Lists]: ../setup/extensions/python-markdown.md#attribute-lists
|
||||||
|
[Markdown in HTML]: ../setup/extensions/python-markdown.md#markdown-in-html
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
### Image alignment
|
### Image alignment
|
||||||
|
|
||||||
When the [Attribute List][3] extension is enabled, images can be aligned by
|
When [Attribute Lists] is enabled, images can be aligned by adding the
|
||||||
adding the respective alignment directions via the `align` attribute, i.e.
|
respective alignment directions via the `align` attribute, i.e. `align=left` or
|
||||||
`align=left` or `align=right`
|
`align=right`:
|
||||||
|
|
||||||
=== "Left"
|
=== "Left"
|
||||||
|
|
||||||
@ -65,48 +69,61 @@ adding the respective alignment directions via the `align` attribute, i.e.
|
|||||||
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
|
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
|
||||||
massa, nec semper lorem quam in massa.
|
massa, nec semper lorem quam in massa.
|
||||||
|
|
||||||
_If there's insufficient space to render the text next to the image, the image
|
If there's insufficient space to render the text next to the image, the image
|
||||||
will stretch to the full width of the viewport, e.g. on mobile viewports._
|
will stretch to the full width of the viewport, e.g. on mobile viewports.
|
||||||
|
|
||||||
[3]: #attribute-list
|
??? question "Why is there no centered alignment?"
|
||||||
|
|
||||||
|
The [`align`][align] attribute doesn't allow for centered alignment, which
|
||||||
|
is why this option is not supported by Material for MkDocs.[^1] Instead,
|
||||||
|
the [image captions] syntax can be used, as captions are optional.
|
||||||
|
|
||||||
|
[^1]:
|
||||||
|
You might also realize that the [`align`][align] attribute has been
|
||||||
|
deprecated as of HTML5, so why use it anyways? The main reason is
|
||||||
|
portability – it's still supported by all browsers and clients, and is very
|
||||||
|
unlikely to be completely removed, as many older websites still use it. This
|
||||||
|
ensures a consistent appearance when a Markdown file with these attributes
|
||||||
|
is viewed outside of a website generated by Material for MkDocs.
|
||||||
|
|
||||||
|
[align]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#deprecated_attributes
|
||||||
|
[image captions]: #image-captions
|
||||||
|
|
||||||
### Image captions
|
### Image captions
|
||||||
|
|
||||||
Sadly, the Markdown syntax doesn't provide native support for image captions,
|
Sadly, the Markdown syntax doesn't provide native support for image captions,
|
||||||
but it's always possible to resort to HTML. Using `figure` and `figcaption`, captions can be added to images.
|
but it's always possible to use HTML. Using `figure` and `figcaption`, captions
|
||||||
|
can be added to images.
|
||||||
|
|
||||||
_Example_:
|
_Example_:
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<figure>
|
<figure markdown> <!-- (1) -->
|
||||||
<img src="https://dummyimage.com/600x400/eee/aaa" width="300" />
|
![Dummy image](https://dummyimage.com/600x400/){ width="300" }
|
||||||
<figcaption>Image caption</figcaption>
|
<figcaption>Image caption</figcaption>
|
||||||
</figure>
|
</figure>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
1. :man_raising_hand: Remember to enable the [Markdown in HTML] extension.
|
||||||
|
|
||||||
_Result_:
|
_Result_:
|
||||||
|
|
||||||
<figure>
|
<figure markdown>
|
||||||
<img src="https://dummyimage.com/600x400/f5f5f5/aaaaaa&text=–%20Image%20–" width="300" />
|
![Dummy image]{ width="300" }
|
||||||
<figcaption>Image caption</figcaption>
|
<figcaption>Image caption</figcaption>
|
||||||
</figure>
|
</figure>
|
||||||
|
|
||||||
|
[Dummy image]: https://dummyimage.com/600x400/f5f5f5/aaaaaa&text=–%20Image%20–
|
||||||
|
[Markdown in HTML]: ../setup/extensions/python-markdown.md#markdown-in-html
|
||||||
|
|
||||||
### Image lazy-loading
|
### Image lazy-loading
|
||||||
|
|
||||||
Modern browsers provide [native support for lazy-loading images][4] through the
|
Modern browsers provide [native support for lazy-loading images][lazy-loading]
|
||||||
`loading` attribute, which degrades to eager-loading in browsers without
|
through the `loading=lazy` directive, which degrades to eager-loading in
|
||||||
support. As with [image alignment][5], if the [Attribute List][3] extension is
|
browsers without support:
|
||||||
enabled, images can be lazy-loaded by adding `loading=lazy`.
|
|
||||||
|
|
||||||
_Example_:
|
|
||||||
|
|
||||||
``` markdown
|
``` markdown
|
||||||
![Placeholder](https://dummyimage.com/600x400/eee/aaa){ loading=lazy }
|
![Placeholder](https://dummyimage.com/600x400/eee/aaa){ loading=lazy }
|
||||||
```
|
```
|
||||||
|
|
||||||
_Result_:
|
[lazy-loading]: https://caniuse.com/#feat=loading-lazy-attr
|
||||||
|
|
||||||
![Placeholder](https://dummyimage.com/600x400/f5f5f5/aaaaaa&text=–%20Image%20–){ loading=lazy width=300 }
|
|
||||||
|
|
||||||
[4]: https://caniuse.com/#feat=loading-lazy-attr
|
|
||||||
[5]: #image-alignment
|
|
||||||
|
@ -11,64 +11,31 @@ are supported through extensions.
|
|||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
### Definition List
|
This configuration enables the use of definition lists and tasks lists, which
|
||||||
|
are both not part of the standard Markdown syntax. Add the following lines to
|
||||||
[:octicons-file-code-24: Source][1] · [:octicons-workflow-24: Extension][2]
|
`mkdocs.yml`:
|
||||||
|
|
||||||
The [Definition List][2] extension, which is part of the standard Markdown
|
|
||||||
library, adds the ability to add definitions lists to a document and can be
|
|
||||||
enabled via `mkdocs.yml`:
|
|
||||||
|
|
||||||
``` yaml
|
``` yaml
|
||||||
markdown_extensions:
|
markdown_extensions:
|
||||||
- def_list
|
- def_list
|
||||||
|
- pymdownx.tasklist:
|
||||||
|
custom_checkbox: true
|
||||||
```
|
```
|
||||||
|
|
||||||
[1]: https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/stylesheets/main/_typeset.scss
|
See additional configuration options:
|
||||||
[2]: https://python-markdown.github.io/extensions/definition_lists/
|
|
||||||
|
|
||||||
### Tasklist
|
- [Definition Lists]
|
||||||
|
- [Tasklist]
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][3] · [:octicons-workflow-24: Extension][4]
|
[Definition Lists]: ../setup/extensions/python-markdown.md#definition-lists
|
||||||
|
[Tasklist]: ../setup/extensions/python-markdown-extensions.md#tasklist
|
||||||
The [Tasklist][4] extension, which is part of [Python Markdown Extensions][5],
|
|
||||||
adds support for lists with styled checkboxes, and provides several options for
|
|
||||||
configuring the style:
|
|
||||||
|
|
||||||
`custom_checkbox`{ #custom-checkbox }
|
|
||||||
|
|
||||||
: :octicons-milestone-24: Default: `false` · This option toggles the rendering
|
|
||||||
style of checkboxes, replacing native checkbox styles with beautiful icons,
|
|
||||||
and is therefore _strongly recommended_:
|
|
||||||
|
|
||||||
``` yaml
|
|
||||||
markdown_extensions:
|
|
||||||
- pymdownx.tasklist:
|
|
||||||
custom_checkbox: true
|
|
||||||
```
|
|
||||||
|
|
||||||
`clickable_checkbox`{ #clickable-checkbox }
|
|
||||||
|
|
||||||
: :octicons-milestone-24: Default: `false` · This option toggles whether
|
|
||||||
checkboxes are clickable. As the state is not persisted, the use of this
|
|
||||||
option is _rather discouraged_ from a user experience perspective:
|
|
||||||
|
|
||||||
``` yaml
|
|
||||||
markdown_extensions:
|
|
||||||
- pymdownx.tasklist:
|
|
||||||
clickable_checkbox: true
|
|
||||||
```
|
|
||||||
|
|
||||||
[3]: https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/stylesheets/main/extensions/pymdownx/_tasklist.scss
|
|
||||||
[4]: https://facelessuser.github.io/pymdown-extensions/extensions/tasklist/
|
|
||||||
[5]: https://facelessuser.github.io/pymdown-extensions/
|
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
### Using unordered lists
|
### Using unordered lists
|
||||||
|
|
||||||
An unordered list can be written by prefixing a line with a `-`, `*` or `+`
|
Unordered lists can be written by prefixing a line with a `-`, `*` or `+` list
|
||||||
list marker, all of which can be used interchangeably. Furthermore, all flavors
|
marker, all of which can be used interchangeably. Furthermore, all flavors
|
||||||
of lists can be nested inside each other.
|
of lists can be nested inside each other.
|
||||||
|
|
||||||
_Example_:
|
_Example_:
|
||||||
@ -95,60 +62,61 @@ _Result_:
|
|||||||
|
|
||||||
### Using ordered lists
|
### Using ordered lists
|
||||||
|
|
||||||
An ordered list must start with a number immediately followed by a dot. The
|
Ordered lists must start with a number immediately followed by a dot. The
|
||||||
numbers do not need to be consecutive and can be all set to `1.`, as they will
|
numbers do not need to be consecutive and can be all set to `1.`, as they will
|
||||||
be re-numbered when rendered.
|
be re-numbered when rendered.
|
||||||
|
|
||||||
_Example_:
|
_Example_:
|
||||||
|
|
||||||
``` markdown
|
``` markdown
|
||||||
1. Vivamus id mi enim. Integer id turpis sapien. Ut condimentum lobortis
|
1. Vivamus id mi enim. Integer id turpis sapien. Ut condimentum lobortis
|
||||||
sagittis. Aliquam purus tellus, faucibus eget urna at, iaculis venenatis
|
sagittis. Aliquam purus tellus, faucibus eget urna at, iaculis venenatis
|
||||||
nulla. Vivamus a pharetra leo.
|
nulla. Vivamus a pharetra leo.
|
||||||
|
|
||||||
1. Vivamus venenatis porttitor tortor sit amet rutrum. Pellentesque aliquet
|
1. Vivamus venenatis porttitor tortor sit amet rutrum. Pellentesque aliquet
|
||||||
quam enim, eu volutpat urna rutrum a. Nam vehicula nunc mauris, a
|
quam enim, eu volutpat urna rutrum a. Nam vehicula nunc mauris, a
|
||||||
ultricies libero efficitur sed.
|
ultricies libero efficitur sed.
|
||||||
|
|
||||||
2. Morbi eget dapibus felis. Vivamus venenatis porttitor tortor sit amet
|
2. Morbi eget dapibus felis. Vivamus venenatis porttitor tortor sit amet
|
||||||
rutrum. Pellentesque aliquet quam enim, eu volutpat urna rutrum a.
|
rutrum. Pellentesque aliquet quam enim, eu volutpat urna rutrum a.
|
||||||
|
|
||||||
1. Mauris dictum mi lacus
|
1. Mauris dictum mi lacus
|
||||||
2. Ut sit amet placerat ante
|
2. Ut sit amet placerat ante
|
||||||
3. Suspendisse ac eros arcu
|
3. Suspendisse ac eros arcu
|
||||||
```
|
```
|
||||||
|
|
||||||
_Result_:
|
_Result_:
|
||||||
|
|
||||||
1. Vivamus id mi enim. Integer id turpis sapien. Ut condimentum lobortis
|
1. Vivamus id mi enim. Integer id turpis sapien. Ut condimentum lobortis
|
||||||
sagittis. Aliquam purus tellus, faucibus eget urna at, iaculis venenatis
|
sagittis. Aliquam purus tellus, faucibus eget urna at, iaculis venenatis
|
||||||
nulla. Vivamus a pharetra leo.
|
nulla. Vivamus a pharetra leo.
|
||||||
|
|
||||||
1. Vivamus venenatis porttitor tortor sit amet rutrum. Pellentesque aliquet
|
1. Vivamus venenatis porttitor tortor sit amet rutrum. Pellentesque aliquet
|
||||||
quam enim, eu volutpat urna rutrum a. Nam vehicula nunc mauris, a
|
quam enim, eu volutpat urna rutrum a. Nam vehicula nunc mauris, a
|
||||||
ultricies libero efficitur sed.
|
ultricies libero efficitur sed.
|
||||||
|
|
||||||
2. Morbi eget dapibus felis. Vivamus venenatis porttitor tortor sit amet
|
2. Morbi eget dapibus felis. Vivamus venenatis porttitor tortor sit amet
|
||||||
rutrum. Pellentesque aliquet quam enim, eu volutpat urna rutrum a.
|
rutrum. Pellentesque aliquet quam enim, eu volutpat urna rutrum a.
|
||||||
|
|
||||||
1. Mauris dictum mi lacus
|
1. Mauris dictum mi lacus
|
||||||
2. Ut sit amet placerat ante
|
2. Ut sit amet placerat ante
|
||||||
3. Suspendisse ac eros arcu
|
3. Suspendisse ac eros arcu
|
||||||
|
|
||||||
### Using definition lists
|
### Using definition lists
|
||||||
|
|
||||||
[Definition lists][6] are a ideal for describing arbitrary key-value pairs, e.g.
|
When [Definition Lists] is enabled, lists of arbitrary key-value pairs, e.g. the
|
||||||
the parameters of functions or modules, as used within this documentation to
|
parameters of functions or modules, can be enumerated with a simple syntax.
|
||||||
describe extension or plugin parameters.
|
|
||||||
|
|
||||||
_Example_:
|
_Example_:
|
||||||
|
|
||||||
``` markdown
|
``` markdown
|
||||||
`Lorem ipsum dolor sit amet`
|
`Lorem ipsum dolor sit amet`
|
||||||
|
|
||||||
: Sed sagittis eleifend rutrum. Donec vitae suscipit est. Nullam tempus
|
: Sed sagittis eleifend rutrum. Donec vitae suscipit est. Nullam tempus
|
||||||
tellus non sem sollicitudin, quis rutrum leo facilisis.
|
tellus non sem sollicitudin, quis rutrum leo facilisis.
|
||||||
|
|
||||||
`Cras arcu libero`
|
`Cras arcu libero`
|
||||||
|
|
||||||
: Aliquam metus eros, pretium sed nulla venenatis, faucibus auctor ex. Proin
|
: Aliquam metus eros, pretium sed nulla venenatis, faucibus auctor ex. Proin
|
||||||
ut eros sed sapien ullamcorper consequat. Nunc ligula ante.
|
ut eros sed sapien ullamcorper consequat. Nunc ligula ante.
|
||||||
|
|
||||||
@ -160,10 +128,12 @@ _Example_:
|
|||||||
_Result_:
|
_Result_:
|
||||||
|
|
||||||
`Lorem ipsum dolor sit amet`
|
`Lorem ipsum dolor sit amet`
|
||||||
|
|
||||||
: Sed sagittis eleifend rutrum. Donec vitae suscipit est. Nullam tempus
|
: Sed sagittis eleifend rutrum. Donec vitae suscipit est. Nullam tempus
|
||||||
tellus non sem sollicitudin, quis rutrum leo facilisis.
|
tellus non sem sollicitudin, quis rutrum leo facilisis.
|
||||||
|
|
||||||
`Cras arcu libero`
|
`Cras arcu libero`
|
||||||
|
|
||||||
: Aliquam metus eros, pretium sed nulla venenatis, faucibus auctor ex. Proin
|
: Aliquam metus eros, pretium sed nulla venenatis, faucibus auctor ex. Proin
|
||||||
ut eros sed sapien ullamcorper consequat. Nunc ligula ante.
|
ut eros sed sapien ullamcorper consequat. Nunc ligula ante.
|
||||||
|
|
||||||
@ -171,13 +141,11 @@ _Result_:
|
|||||||
Nam vulputate tincidunt fringilla.
|
Nam vulputate tincidunt fringilla.
|
||||||
Nullam dignissim ultrices urna non auctor.
|
Nullam dignissim ultrices urna non auctor.
|
||||||
|
|
||||||
[6]: #definition-list
|
### Using task lists
|
||||||
|
|
||||||
### Using tasklists
|
When [Tasklist] is enabled, unordered list items can be prefixed with `[ ]` to
|
||||||
|
render an unchecked checkbox or `[x]` to render a checked checkbox, allowing
|
||||||
When the [Tasklist][7] extension is enabled, unordered list items can be
|
for the definition of task lists.
|
||||||
prefixed with `[ ]` to render an unchecked or `[x]` to render a checked
|
|
||||||
checkbox.
|
|
||||||
|
|
||||||
_Example_:
|
_Example_:
|
||||||
|
|
||||||
@ -198,5 +166,3 @@ _Result_:
|
|||||||
* [x] In scelerisque nibh non dolor mollis congue sed et metus
|
* [x] In scelerisque nibh non dolor mollis congue sed et metus
|
||||||
* [ ] Praesent sed risus massa
|
* [ ] Praesent sed risus massa
|
||||||
- [ ] Aenean pretium efficitur erat, donec pharetra, ligula non scelerisque
|
- [ ] Aenean pretium efficitur erat, donec pharetra, ligula non scelerisque
|
||||||
|
|
||||||
[7]: #tasklist
|
|
||||||
|
@ -4,37 +4,23 @@ template: overrides/main.html
|
|||||||
|
|
||||||
# MathJax
|
# MathJax
|
||||||
|
|
||||||
[MathJax][1] is a beautiful and accessible way to display _mathematical content_
|
[MathJax] is a beautiful and accessible way to display mathematical content
|
||||||
in the browser, allows for writing formulas in different notations, including
|
in the browser, adds support for mathematical typesetting in different notations
|
||||||
[LaTeX][2], [MathML][3] and [AsciiMath][4], and can be easily integrated with
|
(e.g. [LaTeX], [MathML], [AsciiMath]), and can be easily integrated with
|
||||||
Material for MkDocs.
|
Material for MkDocs.
|
||||||
|
|
||||||
[1]: https://www.mathjax.org/
|
[MathJax]: https://www.mathjax.org/
|
||||||
[2]: https://en.wikibooks.org/wiki/LaTeX/Mathematics
|
[LaTeX]: https://en.wikibooks.org/wiki/LaTeX/Mathematics
|
||||||
[3]: https://en.wikipedia.org/wiki/MathML
|
[MathML]: https://en.wikipedia.org/wiki/MathML
|
||||||
[4]: http://asciimath.org/
|
[AsciiMath]: http://asciimath.org/
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
### Arithmatex
|
This configuration enables support for rendering block and inline block
|
||||||
|
equations through [MathJax]. Create a configuration file and add the following
|
||||||
|
lines to `mkdocs.yml`:
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][5] · [:octicons-workflow-24: Extension][6]
|
=== ":octicons-file-code-16: docs/javascripts/mathjax.js"
|
||||||
|
|
||||||
The [Arithmatex][6] extension, which is part of of [Python Markdown
|
|
||||||
Extensions][7], allows the rendering of block and inline block equations, and
|
|
||||||
can be enabled via `mkdocs.yml`:
|
|
||||||
|
|
||||||
``` yaml
|
|
||||||
markdown_extensions:
|
|
||||||
- pymdownx.arithmatex:
|
|
||||||
generic: true
|
|
||||||
```
|
|
||||||
|
|
||||||
Besides enabling the extension in `mkdocs.yml`, a MathJax configuration and
|
|
||||||
the JavaScript runtime need to be included, which can be done with [additional
|
|
||||||
JavaScript][8]:
|
|
||||||
|
|
||||||
=== "docs/javascripts/config.js"
|
|
||||||
|
|
||||||
``` js
|
``` js
|
||||||
window.MathJax = {
|
window.MathJax = {
|
||||||
@ -50,31 +36,32 @@ JavaScript][8]:
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
document$.subscribe(() => {
|
document$.subscribe(() => { // (1)
|
||||||
MathJax.typesetPromise()
|
MathJax.typesetPromise()
|
||||||
})
|
})
|
||||||
```
|
```
|
||||||
|
|
||||||
=== "mkdocs.yml"
|
1. This integrates MathJax with [instant loading].
|
||||||
|
|
||||||
|
=== ":octicons-file-code-16: mkdocs.yml"
|
||||||
|
|
||||||
``` yaml
|
``` yaml
|
||||||
|
markdown_extensions:
|
||||||
|
- pymdownx.arithmatex:
|
||||||
|
generic: true
|
||||||
|
|
||||||
extra_javascript:
|
extra_javascript:
|
||||||
- javascripts/config.js
|
- javascripts/mathjax.js
|
||||||
- https://polyfill.io/v3/polyfill.min.js?features=es6
|
- https://polyfill.io/v3/polyfill.min.js?features=es6
|
||||||
- https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js
|
- https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js
|
||||||
```
|
```
|
||||||
|
|
||||||
_MathJax can be configured in many different ways, for which Material for MkDocs
|
See additional configuration options:
|
||||||
might not provide native support. See the [official documentation][6] for more
|
|
||||||
information._
|
|
||||||
|
|
||||||
!!! tip "Using MathJax with [instant loading][9]"
|
- [Arithmatex]
|
||||||
|
|
||||||
There's no additional effort necessary to integrate _MathJax 3_ with
|
[Arithmatex]: ../setup/extensions/python-markdown-extensions.md#arithmatex
|
||||||
[instant loading][9] – it's expected to work straight away. However, a
|
[instant loading]: ../setup/setting-up-navigation.md#instant-loading
|
||||||
previous version of this document explained how to integrate Material for
|
|
||||||
MkDocs with _MathJax 2_, which doesn't exhibit this behavior. It's therefore
|
|
||||||
highly recommended to switch to _MathJax 3_.
|
|
||||||
|
|
||||||
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
|
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
|
||||||
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
|
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
|
||||||
@ -93,12 +80,6 @@ information._
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
[5]: https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/stylesheets/main/extensions/pymdownx/_arithmatex.scss
|
|
||||||
[6]: https://facelessuser.github.io/pymdown-extensions/extensions/arithmatex/
|
|
||||||
[7]: https://facelessuser.github.io/pymdown-extensions/extensions/
|
|
||||||
[8]: ../customization.md#additional-javascript
|
|
||||||
[9]: ../setup/setting-up-navigation.md#instant-loading
|
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
### Using block syntax
|
### Using block syntax
|
||||||
|
@ -6,57 +6,59 @@ template: overrides/main.html
|
|||||||
|
|
||||||
In HTML, `meta` tags allow to provide additional metadata for a document, e.g.
|
In HTML, `meta` tags allow to provide additional metadata for a document, e.g.
|
||||||
page titles and descriptions, additional assets to be loaded, and [Open Graph]
|
page titles and descriptions, additional assets to be loaded, and [Open Graph]
|
||||||
[1] data. While arbitrary metadata can always be added via [customization][2],
|
metadata. While arbitrary `meta` tags can always be added via [customization],
|
||||||
some common `meta` tags can be configured.
|
some common `meta` tags can be configured.
|
||||||
|
|
||||||
[1]: https://ogp.me/
|
[Open Graph]: https://ogp.me/
|
||||||
[2]: #customization
|
[customization]: #customization
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
### Metadata
|
This configuration adds support for setting custom page titles and descriptions
|
||||||
|
in [front matter], as well as for using custom metadata in templates. Add the
|
||||||
The [Metadata][3] extension, which is part of the standard Markdown library,
|
following lines to `mkdocs.yml`:
|
||||||
adds the ability to add [front matter][4] to a document and can be enabled via
|
|
||||||
`mkdocs.yml`:
|
|
||||||
|
|
||||||
``` yaml
|
``` yaml
|
||||||
markdown_extensions:
|
markdown_extensions:
|
||||||
- meta
|
- meta
|
||||||
```
|
```
|
||||||
|
|
||||||
Front matter is written as a series of key-value pairs at the beginning of the
|
See additional configuration options:
|
||||||
Markdown document, delimited by a blank line which ends the YAML context.
|
|
||||||
|
|
||||||
[3]: https://python-markdown.github.io/extensions/meta_data/
|
- [Metadata]
|
||||||
[4]: https://jekyllrb.com/docs/front-matter/
|
|
||||||
|
[front matter]: https://jekyllrb.com/docs/front-matter/
|
||||||
|
[Metadata]: ../setup/extensions/python-markdown.md#metadata
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
### Setting the page title
|
### Setting the page title
|
||||||
|
|
||||||
If the [Metadata][5] extension is enabled, the page title can be overridden on
|
When [Metadata] is enabled, the page title can be overridden for a document with
|
||||||
a per-document basis with custom front matter:
|
some custom front matter. Add the following lines at the top of a Markdown file:
|
||||||
|
|
||||||
``` bash
|
``` bash
|
||||||
---
|
---
|
||||||
title: Lorem ipsum dolor sit amet
|
title: Lorem ipsum dolor sit amet # (1)
|
||||||
---
|
---
|
||||||
|
|
||||||
# Document title
|
# Document title
|
||||||
...
|
...
|
||||||
```
|
```
|
||||||
|
|
||||||
This will set the `title` tag inside the document `head` for the current page
|
1. This will set the [`title`][title] inside the HTML document's [`head`][head]
|
||||||
to the provided value. Note that the site title is appended using a dash as a
|
for the generated page to this value. Note that the site title, which is set
|
||||||
separator, which is the default behavior.
|
via [`site_name`][site_name], is appended with a dash.
|
||||||
|
|
||||||
[5]: #metadata
|
[title]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title
|
||||||
|
[head]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head
|
||||||
|
[site_name]: https://www.mkdocs.org/user-guide/configuration/#site_name
|
||||||
|
|
||||||
### Setting the page description
|
### Setting the page description
|
||||||
|
|
||||||
If the [Metadata][5] extension is enabled, the page description can also be
|
When [Metadata] is enabled, the page description can be overridden for a
|
||||||
overridden on a per-document basis with custom front matter:
|
document with custom front matter. Add the following lines at the top of a
|
||||||
|
Markdown file:
|
||||||
|
|
||||||
``` bash
|
``` bash
|
||||||
---
|
---
|
||||||
@ -70,47 +72,41 @@ description: Nullam urna elit, malesuada eget finibus ut, ac tortor.
|
|||||||
This will set the `meta` tag containing the site description inside the
|
This will set the `meta` tag containing the site description inside the
|
||||||
document `head` for the current page to the provided value.
|
document `head` for the current page to the provided value.
|
||||||
|
|
||||||
|
<div class="mdx-deprecated" markdown>
|
||||||
|
|
||||||
### Adding a web app manifest
|
### Adding a web app manifest
|
||||||
|
|
||||||
A [web app manifest][6] is a simple JSON file that specifies how your web
|
[:octicons-tag-24: 3.1.0][manifest support] ·
|
||||||
|
:octicons-archive-24: Deprecated ·
|
||||||
|
:octicons-trash-24: 8.0.0
|
||||||
|
|
||||||
|
A [web app manifest] is a simple JSON file that specifies how your web
|
||||||
application should behave when installed on the user's mobile device or desktop,
|
application should behave when installed on the user's mobile device or desktop,
|
||||||
which can be set via `mkdocs.yml`:
|
which can be set via `mkdocs.yml`:
|
||||||
|
|
||||||
``` yaml
|
``` yaml
|
||||||
extra:
|
extra:
|
||||||
manifest: manifest.webmanifest
|
manifest: manifest.webmanifest # (1)
|
||||||
```
|
```
|
||||||
|
|
||||||
[6]: https://developers.google.com/web/fundamentals/web-app-manifest/
|
1. This option was deprecated, as it's not widely used and the same behavior
|
||||||
|
can be achieved with [theme extension].
|
||||||
|
|
||||||
|
[web app manifest]: https://web.dev/add-manifest/
|
||||||
|
[manifest support]: https://github.com/squidfunk/mkdocs-material/releases/tag/3.1.0
|
||||||
|
[theme extension]: ../customization.md#extending-the-theme
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
## Customization
|
## Customization
|
||||||
|
|
||||||
### Displaying the metadata
|
### Using metadata in templates
|
||||||
|
|
||||||
Sometimes it's useful to be able to display the medatada in the page body, e.g.
|
|
||||||
print the name of the page author at the bottom of the page. To achieve that,
|
|
||||||
you can [extend the theme][7] by adding the following contents to `main.html`:
|
|
||||||
|
|
||||||
``` html
|
|
||||||
{% extends "base.html" %}
|
|
||||||
|
|
||||||
{% block content %}
|
|
||||||
{{ super() }}
|
|
||||||
{% if page and page.meta and page.meta.author %}
|
|
||||||
<p><small>Author: {{ page.meta.author }}</small></p>
|
|
||||||
{% endif %}
|
|
||||||
{% endblock %}
|
|
||||||
```
|
|
||||||
|
|
||||||
[7]: ../customization.md#extending-the-theme
|
|
||||||
|
|
||||||
### Custom meta tags
|
|
||||||
|
|
||||||
#### on all pages
|
#### on all pages
|
||||||
|
|
||||||
In order to add custom `meta` tags to your document, you can [extend the theme
|
In order to add custom `meta` tags to your document, you can [extend the theme
|
||||||
][7] and simply [override the `extrahead` block][8], e.g. to add indexing
|
][theme extension] and [override the `extrahead` block][overriding blocks],
|
||||||
policies for search engines:
|
e.g. to add indexing policies for search engines via the `robots` property:
|
||||||
|
|
||||||
``` html
|
``` html
|
||||||
{% extends "base.html" %}
|
{% extends "base.html" %}
|
||||||
@ -120,7 +116,7 @@ policies for search engines:
|
|||||||
{% endblock %}
|
{% endblock %}
|
||||||
```
|
```
|
||||||
|
|
||||||
[8]: ../customization.md#overriding-blocks-recommended
|
[overriding blocks]: ../customization.md#overriding-blocks
|
||||||
|
|
||||||
#### on a single page
|
#### on a single page
|
||||||
|
|
||||||
@ -140,63 +136,9 @@ template override, e.g.:
|
|||||||
{% endblock %}
|
{% endblock %}
|
||||||
```
|
```
|
||||||
|
|
||||||
You can now use `robots` exactly like [`title`][9] and [`description`][10] to
|
You can now use `robots` exactly like [`title`][title] and
|
||||||
set values. Note that in this case, the template defines an `else` branch, which
|
[`description`][description] to set values. Note that in this case, the
|
||||||
would set a default if none was given.
|
template defines an `else` branch, which would set a default if none was given.
|
||||||
|
|
||||||
[9]: #setting-the-page-title
|
[title]: #setting-the-page-title
|
||||||
[10]: #setting-the-page-description
|
[description]: #setting-the-page-description
|
||||||
|
|
||||||
### Social meta tags
|
|
||||||
|
|
||||||
Some further examples, including [Open Graph][1] and [Twitter Cards][11]:
|
|
||||||
|
|
||||||
=== "Open Graph"
|
|
||||||
|
|
||||||
``` html
|
|
||||||
{% block extrahead %}
|
|
||||||
{% set title = config.site_name %}
|
|
||||||
{% if page and page.meta and page.meta.title %}
|
|
||||||
{% set title = title ~ " - " ~ page.meta.title %}
|
|
||||||
{% elif page and page.title and not page.is_homepage %}
|
|
||||||
{% set title = title ~ " - " ~ page.title | striptags %}
|
|
||||||
{% endif %}
|
|
||||||
<meta property="og:type" content="website" />
|
|
||||||
<meta property="og:title" content="{{ title }}" />
|
|
||||||
<meta property="og:description" content="{{ config.site_description }}" />
|
|
||||||
<meta property="og:url" content="{{ page.canonical_url }}" />
|
|
||||||
<meta property="og:image" content="<url>" />
|
|
||||||
<meta property="og:image:type" content="image/png" />
|
|
||||||
<meta property="og:image:width" content="1200" />
|
|
||||||
<meta property="og:image:height" content="630" />
|
|
||||||
{% endblock %}
|
|
||||||
```
|
|
||||||
|
|
||||||
=== "Twitter Cards"
|
|
||||||
|
|
||||||
``` html
|
|
||||||
{% block extrahead %}
|
|
||||||
{% set title = config.site_name %}
|
|
||||||
{% if page and page.meta and page.meta.title %}
|
|
||||||
{% set title = title ~ " - " ~ page.meta.title %}
|
|
||||||
{% elif page and page.title and not page.is_homepage %}
|
|
||||||
{% set title = title ~ " - " ~ page.title | striptags %}
|
|
||||||
{% endif %}
|
|
||||||
<meta name="twitter:card" content="summary_large_image" />
|
|
||||||
<meta name="twitter:site" content="<username>" />
|
|
||||||
<meta name="twitter:creator" content="<username>" />
|
|
||||||
<meta name="twitter:title" content="{{ title }}" />
|
|
||||||
<meta name="twitter:description" content="{{ config.site_description }}" />
|
|
||||||
<meta name="twitter:image" content="<url>" />
|
|
||||||
{% endblock %}
|
|
||||||
```
|
|
||||||
|
|
||||||
!!! tip "Automatically generated social cards"
|
|
||||||
|
|
||||||
If you don't want to bother with meta tags and social cards yourself, you
|
|
||||||
can let the [built-in social cards plugin][12] do the work for you, which
|
|
||||||
generates beautiful image previews for social media automatically during
|
|
||||||
the build.
|
|
||||||
|
|
||||||
[11]: https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/abouts-cards
|
|
||||||
[12]: ../setup/setting-up-social-cards.md
|
|
||||||
|
@ -1,152 +0,0 @@
|
|||||||
---
|
|
||||||
template: overrides/main.html
|
|
||||||
---
|
|
||||||
|
|
||||||
# Variables
|
|
||||||
|
|
||||||
Macros and variables are powerful tools to parametrize Markdown files, as they
|
|
||||||
allow to perform Jinja templating directly from Markdown. This is especially
|
|
||||||
useful to include technical data from other files and add central variables via
|
|
||||||
`mkdocs.yml`.
|
|
||||||
|
|
||||||
## Configuration
|
|
||||||
|
|
||||||
### Macros
|
|
||||||
|
|
||||||
The [macros][1] plugin adds support to reference variables and call macros and
|
|
||||||
supports Jinja templating directly from Markdown. It can be installed with
|
|
||||||
`pip`:
|
|
||||||
|
|
||||||
```
|
|
||||||
pip install mkdocs-macros-plugin
|
|
||||||
```
|
|
||||||
|
|
||||||
Then, add the following to `mkdocs.yml`:
|
|
||||||
|
|
||||||
``` yaml
|
|
||||||
plugins:
|
|
||||||
- macros
|
|
||||||
```
|
|
||||||
|
|
||||||
[1]: https://github.com/fralau/mkdocs_macros_plugin
|
|
||||||
|
|
||||||
## Usage
|
|
||||||
|
|
||||||
### Using predefined variables
|
|
||||||
|
|
||||||
A set of predefined variables is enabled by default and can be used from
|
|
||||||
Markdown, including data from `mkdocs.yml`. More specifically, predefined
|
|
||||||
variables fall into the following categories:
|
|
||||||
|
|
||||||
- `config.*`: configuration parameters from `mkdocs.yml`
|
|
||||||
- `page.*`: metadata and content of current page
|
|
||||||
- `navigation.*`: list of all pages and sections
|
|
||||||
- `environment.*`: underlying operating system
|
|
||||||
- `git.*`: git-related information, if available
|
|
||||||
|
|
||||||
_Example_:
|
|
||||||
|
|
||||||
``` markdown
|
|
||||||
Welcome to {{ config.site_name }}!
|
|
||||||
```
|
|
||||||
|
|
||||||
_Result_:
|
|
||||||
|
|
||||||
``` markdown
|
|
||||||
Welcome to Material for MkDocs!
|
|
||||||
```
|
|
||||||
|
|
||||||
A list of all predefined variables can be printed with:
|
|
||||||
|
|
||||||
```
|
|
||||||
{{ macros_info() }}
|
|
||||||
```
|
|
||||||
|
|
||||||
### Using custom variables
|
|
||||||
|
|
||||||
All data defined under `extra` in `mkdocs.yml` is automatically exposed as a
|
|
||||||
variable and can be used from the template. This enables centralized parameter
|
|
||||||
storage and management.
|
|
||||||
|
|
||||||
_Example_:
|
|
||||||
|
|
||||||
=== "`docs/page.md`"
|
|
||||||
|
|
||||||
```` markdown
|
|
||||||
The unit price is {{ unit.price }}
|
|
||||||
````
|
|
||||||
|
|
||||||
=== "`mkdocs.yml`"
|
|
||||||
|
|
||||||
``` yaml
|
|
||||||
extra:
|
|
||||||
unit:
|
|
||||||
price: 12.50
|
|
||||||
```
|
|
||||||
|
|
||||||
_Result_:
|
|
||||||
|
|
||||||
The unit price is 12.50.
|
|
||||||
|
|
||||||
### Using variables in snippets
|
|
||||||
|
|
||||||
The [macros][2] plugin can be used to allow variables in snippets, which is not
|
|
||||||
possible with the [Snippets][3] extension alone. Add the snippets location to
|
|
||||||
the plugin configuration in `mkdocs.yml`:
|
|
||||||
|
|
||||||
``` yaml
|
|
||||||
plugins:
|
|
||||||
- search
|
|
||||||
- macros:
|
|
||||||
include_dir: snippets
|
|
||||||
```
|
|
||||||
|
|
||||||
In your Markdown file, include snippets with Jinja's [`include`][4] function:
|
|
||||||
|
|
||||||
``` markdown
|
|
||||||
{% include "definitions.md" %}
|
|
||||||
```
|
|
||||||
|
|
||||||
_Example_:
|
|
||||||
|
|
||||||
=== "`snippets/definitions.md`"
|
|
||||||
|
|
||||||
``` markdown
|
|
||||||
The unit price is {{ page.meta.unit.price }}
|
|
||||||
```
|
|
||||||
|
|
||||||
=== "`docs/page-1.md`"
|
|
||||||
|
|
||||||
``` markdown
|
|
||||||
---
|
|
||||||
unit:
|
|
||||||
price: 12.50
|
|
||||||
---
|
|
||||||
|
|
||||||
{% include "definitions.md" %}
|
|
||||||
```
|
|
||||||
|
|
||||||
=== "`docs/page-2.md`"
|
|
||||||
|
|
||||||
``` markdown
|
|
||||||
---
|
|
||||||
unit:
|
|
||||||
price: 25.00
|
|
||||||
---
|
|
||||||
|
|
||||||
{% include "definitions.md" %}
|
|
||||||
```
|
|
||||||
|
|
||||||
[2]: #macros
|
|
||||||
[3]: https://facelessuser.github.io/pymdown-extensions/extensions/snippets/
|
|
||||||
[4]: https://jinja.palletsprojects.com/en/2.11.x/templates/#include
|
|
||||||
|
|
||||||
## Customization
|
|
||||||
|
|
||||||
### Custom macros
|
|
||||||
|
|
||||||
The [macros][1] plugin allows to define custom macros, which can then be used
|
|
||||||
from Markdown files. See the [official documentation][5] for more information
|
|
||||||
how to define custom macros.
|
|
||||||
|
|
||||||
[5]: https://mkdocs-macros-plugin.readthedocs.io/en/latest/python/
|
|
@ -4,47 +4,43 @@ template: overrides/main.html
|
|||||||
|
|
||||||
# Adding a comment system
|
# Adding a comment system
|
||||||
|
|
||||||
Material for MkDocs is natively integrated with [Disqus][1], a comment system
|
Material for MkDocs is natively integrated with [Disqus], a comment system that
|
||||||
that provides a wide range of features like social integrations, user profiles,
|
provides a wide range of features like social integrations, user profiles, as
|
||||||
as well as spam and moderation tools. Of course, other comment systems can be
|
well as spam and moderation tools. Of course, other comment systems can be
|
||||||
integrated, too.
|
integrated, too.
|
||||||
|
|
||||||
[1]: https://disqus.com/
|
[Disqus]: https://disqus.com/
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
### Disqus
|
### Disqus
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][2] ·
|
[:octicons-tag-24: 1.1.0][Disqus support] ·
|
||||||
:octicons-milestone-24: Default: _none_
|
:octicons-milestone-24: Default: _none_
|
||||||
|
|
||||||
First, ensure you've set [`site_url`][3] in `mkdocs.yml`. Then, to integrate
|
First, ensure you've set [`site_url`][site_url] in `mkdocs.yml`. Then, to
|
||||||
Material for MkDocs with [Disqus][1], create an account and a site giving you a
|
integrate Material for MkDocs with [Disqus], create an account and a site
|
||||||
[shortname][4], and add it to `mkdocs.yml`:
|
giving you a [shortname], and add it to `mkdocs.yml`:
|
||||||
|
|
||||||
``` yaml
|
``` yaml
|
||||||
extra:
|
extra:
|
||||||
disqus: <shortname>
|
disqus: <shortname>
|
||||||
```
|
```
|
||||||
|
|
||||||
This will insert a comment system on _every page, except the index page_.
|
This will insert a comment system on every page, except the index page.
|
||||||
|
|
||||||
[2]: https://github.com/squidfunk/mkdocs-material/blob/master/src/partials/integrations/disqus.html
|
[Disqus support]: https://github.com/squidfunk/mkdocs-material/releases/tag/1.1.0
|
||||||
[3]: https://www.mkdocs.org/user-guide/configuration/#site_url
|
[site_url]: https://www.mkdocs.org/user-guide/configuration/#site_url
|
||||||
[4]: https://help.disqus.com/en/articles/1717111-what-s-a-shortname
|
[shortname]: https://help.disqus.com/en/articles/1717111-what-s-a-shortname
|
||||||
|
|
||||||
## Customization
|
## Customization
|
||||||
|
|
||||||
### Selective integration
|
### Selective integration
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][2] ·
|
When [Metadata] is enabled, Disqus can be enabled or disabled for a document
|
||||||
:octicons-note-24: Metadata ·
|
with custom front matter. Add the following lines at the top of a Markdown file:
|
||||||
:octicons-mortar-board-24: Difficulty: _easy_
|
|
||||||
|
|
||||||
If the [Metadata][5] extension is enabled, you can disable or enable Disqus for
|
=== ":octicons-check-circle-fill-16: Enabled"
|
||||||
specific pages by adding the following to the front matter of a page:
|
|
||||||
|
|
||||||
=== "Enable Disqus"
|
|
||||||
|
|
||||||
``` bash
|
``` bash
|
||||||
---
|
---
|
||||||
@ -55,7 +51,7 @@ specific pages by adding the following to the front matter of a page:
|
|||||||
...
|
...
|
||||||
```
|
```
|
||||||
|
|
||||||
=== "Disable Disqus"
|
=== ":octicons-skip-16: Disabled"
|
||||||
|
|
||||||
``` bash
|
``` bash
|
||||||
---
|
---
|
||||||
@ -66,15 +62,13 @@ specific pages by adding the following to the front matter of a page:
|
|||||||
...
|
...
|
||||||
```
|
```
|
||||||
|
|
||||||
[5]: ../../reference/meta-tags/#metadata
|
[Metadata]: extensions/python-markdown.md#metadata
|
||||||
|
|
||||||
### Other comment systems
|
### Other comment systems
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][6] ·
|
|
||||||
:octicons-mortar-board-24: Difficulty: _easy_
|
|
||||||
|
|
||||||
In order to integrate another JavaScript-based comment system provider, you can
|
In order to integrate another JavaScript-based comment system provider, you can
|
||||||
[extend the theme][7] and [override the `disqus` block][8]:
|
[extend the theme], create a new `main.html` in `overrides` and [override the
|
||||||
|
`disqus` block][overriding blocks]:
|
||||||
|
|
||||||
``` html
|
``` html
|
||||||
{% extends "base.html" %}
|
{% extends "base.html" %}
|
||||||
@ -84,6 +78,5 @@ In order to integrate another JavaScript-based comment system provider, you can
|
|||||||
{% endblock %}
|
{% endblock %}
|
||||||
```
|
```
|
||||||
|
|
||||||
[6]: https://github.com/squidfunk/mkdocs-material/blob/master/src/base.html
|
[extend the theme]: ../customization.md#extending-the-theme
|
||||||
[7]: ../customization.md#extending-the-theme
|
[overriding blocks]: ../customization.md#overriding-blocks
|
||||||
[8]: ../customization.md#overriding-blocks-recommended
|
|
||||||
|
@ -11,9 +11,14 @@ documents can be linked to specific source files.
|
|||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
### Repository
|
||||||
|
|
||||||
|
[:octicons-tag-24: 0.1.0][repo_url support] ·
|
||||||
|
:octicons-milestone-24: Default: _none_
|
||||||
|
|
||||||
In order to display a link to the repository of your project as part of your
|
In order to display a link to the repository of your project as part of your
|
||||||
documentation, set [`repo_url`][1] in `mkdocs.yml` to the public URL of your
|
documentation, set [`repo_url`][repo_url] in `mkdocs.yml` to the public URL of
|
||||||
repository, e.g.:
|
your repository, e.g.:
|
||||||
|
|
||||||
``` yaml
|
``` yaml
|
||||||
repo_url: https://github.com/squidfunk/mkdocs-material
|
repo_url: https://github.com/squidfunk/mkdocs-material
|
||||||
@ -21,35 +26,38 @@ repo_url: https://github.com/squidfunk/mkdocs-material
|
|||||||
|
|
||||||
The link to the repository will be rendered next to the search bar on big
|
The link to the repository will be rendered next to the search bar on big
|
||||||
screens and as part of the main navigation drawer on smaller screen sizes.
|
screens and as part of the main navigation drawer on smaller screen sizes.
|
||||||
Additionally, for GitHub and GitLab, the number of stars and forks is
|
Additionally, for public repositories hosted on [GitHub] or [GitLab], the
|
||||||
automatically requested and rendered for _public repositories_.
|
number of stars and forks is automatically requested and rendered.
|
||||||
|
|
||||||
[1]: https://www.mkdocs.org/user-guide/configuration/#repo_url
|
[repo_url support]: https://github.com/squidfunk/mkdocs-material/releases/tag/0.1.0
|
||||||
|
[repo_url]: https://www.mkdocs.org/user-guide/configuration/#repo_url
|
||||||
|
|
||||||
### Repository name
|
### Repository name
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][2] · :octicons-milestone-24: Default:
|
[:octicons-tag-24: 0.1.0][repo_name support] ·
|
||||||
_automatically set to_ `GitHub`, `GitLab` _or_ `Bitbucket`
|
:octicons-milestone-24: Default: _automatically set to_ `GitHub`, `GitLab` _or_
|
||||||
|
`Bitbucket`
|
||||||
|
|
||||||
MkDocs will infer the source provider by examining the URL and try to set the
|
MkDocs will infer the source provider by examining the URL and try to set the
|
||||||
_repository name_ automatically. If you wish to customize the name, set
|
_repository name_ automatically. If you wish to customize the name, set
|
||||||
[`repo_name`][3] in `mkdocs.yml`:
|
[`repo_name`][repo_name] in `mkdocs.yml`:
|
||||||
|
|
||||||
``` yaml
|
``` yaml
|
||||||
repo_name: squidfunk/mkdocs-material
|
repo_name: squidfunk/mkdocs-material
|
||||||
```
|
```
|
||||||
|
|
||||||
[2]: https://github.com/squidfunk/mkdocs-material/blob/master/src/partials/source.html
|
[repo_name support]: https://github.com/squidfunk/mkdocs-material/releases/tag/0.1.0
|
||||||
[3]: https://www.mkdocs.org/user-guide/configuration/#repo_name
|
[repo_name]: https://www.mkdocs.org/user-guide/configuration/#repo_name
|
||||||
|
|
||||||
### Repository icon
|
### Repository icon
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][2] · :octicons-milestone-24: Default:
|
[:octicons-tag-24: 5.0.0][icon.repo support] ·
|
||||||
`fontawesome/brands/git-alt`
|
:octicons-milestone-24: Default:
|
||||||
|
[`fontawesome/brands/git-alt`][icon.repo default]
|
||||||
|
|
||||||
While the default _repository icon_ is a generic git icon, it can be set to
|
While the default repository icon is a generic git icon, it can be set to
|
||||||
[any icon bundled with the theme][4] by referencing a valid icon path in
|
[any icon bundled with the theme][custom icons] by referencing a valid icon
|
||||||
`mkdocs.yml`:
|
path in `mkdocs.yml`:
|
||||||
|
|
||||||
``` yaml
|
``` yaml
|
||||||
theme:
|
theme:
|
||||||
@ -70,16 +78,18 @@ Some popular choices:
|
|||||||
- :fontawesome-brands-bitbucket: – `fontawesome/brands/bitbucket`
|
- :fontawesome-brands-bitbucket: – `fontawesome/brands/bitbucket`
|
||||||
- :fontawesome-solid-trash: – `fontawesome/solid/trash`
|
- :fontawesome-solid-trash: – `fontawesome/solid/trash`
|
||||||
|
|
||||||
[4]: https://github.com/squidfunk/mkdocs-material/tree/master/material/.icons
|
[icon.repo support]: https://github.com/squidfunk/mkdocs-material/releases/tag/5.0.0
|
||||||
|
[icon.repo default]: https://github.com/squidfunk/mkdocs-material/blob/master/material/.icons/fontawesome/brands/git-alt.svg
|
||||||
|
[custom icons]: https://github.com/squidfunk/mkdocs-material/tree/master/material/.icons
|
||||||
|
|
||||||
### Edit button
|
### Edit button
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][5] · :octicons-milestone-24: Default:
|
[:octicons-tag-24: 0.1.0][edit_uri support] ·
|
||||||
_automatically set_
|
:octicons-milestone-24: Default: _automatically set_
|
||||||
|
|
||||||
If the repository URL points to a [GitHub][6], [GitLab][7] or [Bitbucket][8]
|
If the repository URL points to a [GitHub], [GitLab] or [Bitbucket] repository,
|
||||||
repository, an _edit button_ is displayed at the top of each document. This
|
an edit button is displayed at the top of each document. This behavior can be
|
||||||
behavior can be changed by setting [`edit_uri`][9] in `mkdocs.yml`:
|
changed by setting [`edit_uri`][edit_uri] in `mkdocs.yml`:
|
||||||
|
|
||||||
=== "Customize edit path"
|
=== "Customize edit path"
|
||||||
|
|
||||||
@ -93,39 +103,39 @@ behavior can be changed by setting [`edit_uri`][9] in `mkdocs.yml`:
|
|||||||
edit_uri: ""
|
edit_uri: ""
|
||||||
```
|
```
|
||||||
|
|
||||||
[5]: https://github.com/squidfunk/mkdocs-material/blob/master/src/base.html
|
[edit_uri support]: https://github.com/squidfunk/mkdocs-material/releases/tag/0.1.0
|
||||||
[6]: https://github.com/
|
[edit_uri]: https://www.mkdocs.org/user-guide/configuration/#edit_uri
|
||||||
[7]: https://about.gitlab.com/
|
[GitHub]: https://github.com/
|
||||||
[8]: https://bitbucket.org/
|
[GitLab]: https://about.gitlab.com/
|
||||||
[9]: https://www.mkdocs.org/user-guide/configuration/#edit_uri
|
[Bitbucket]: https://bitbucket.org/
|
||||||
|
|
||||||
### Revision date
|
### Revision date
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][10] ·
|
[:octicons-tag-24: 4.6.0][git-revision-date support] ·
|
||||||
[:octicons-cpu-24: Plugin][11]
|
[:octicons-cpu-24: Plugin][git-revision-date]
|
||||||
|
|
||||||
The [git-revision-date][10] plugin adds support for displaying the date a
|
The [git-revision-date] plugin adds support for displaying the date a
|
||||||
document was _last updated_ at the bottom of each page. It can be installed
|
document was last updated at the bottom of each page. It can be installed
|
||||||
with `pip`:
|
with `pip`:
|
||||||
|
|
||||||
```
|
```
|
||||||
pip install mkdocs-git-revision-date-plugin
|
pip install mkdocs-git-revision-date-plugin
|
||||||
```
|
```
|
||||||
|
|
||||||
Then, add the following to `mkdocs.yml`:
|
Then, add the following lines to `mkdocs.yml`:
|
||||||
|
|
||||||
``` yaml
|
``` yaml
|
||||||
plugins:
|
plugins:
|
||||||
- git-revision-date
|
- git-revision-date
|
||||||
```
|
```
|
||||||
|
|
||||||
The following options are supported:
|
The following configuration options are supported:
|
||||||
|
|
||||||
`enabled_if_env`{ #enabled_if_env }
|
`enabled_if_env`{ #enabled-if-env }
|
||||||
|
|
||||||
: :octicons-milestone-24: Default: _none_ – When specified the data will only be extracted from git
|
: :octicons-milestone-24: Default: _none_ – When specified, the plugin will
|
||||||
if the environment variable exists. This makes it possible to disable
|
only be invoked if the environment variable exists. This makes it easy to
|
||||||
extraction for cases when the repository is not available:
|
disable extraction for cases when the repository is not available:
|
||||||
|
|
||||||
``` yaml
|
``` yaml
|
||||||
plugins:
|
plugins:
|
||||||
@ -133,21 +143,21 @@ The following options are supported:
|
|||||||
enabled_if_env: CI
|
enabled_if_env: CI
|
||||||
```
|
```
|
||||||
|
|
||||||
_Material for MkDocs doesn't provide official support for the other options of
|
The other configuration options of this extension are not officially supported
|
||||||
this plugin, so they may be supported but might yield unexpected results.
|
by Material for MkDocs, which is why they may yield unexpected results. Use
|
||||||
Use them at your own risk._
|
them at your own risk.
|
||||||
|
|
||||||
[10]: https://github.com/squidfunk/mkdocs-material/blob/master/src/partials/source-date.html
|
[git-revision-date support]: https://github.com/squidfunk/mkdocs-material/releases/tag/4.6.0
|
||||||
[11]: https://github.com/zhaoterryy/mkdocs-git-revision-date-plugin
|
[git-revision-date]: https://github.com/zhaoterryy/mkdocs-git-revision-date-plugin
|
||||||
|
|
||||||
### Revision date, localized
|
### Revision date, localized
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][10] ·
|
[:octicons-tag-24: 4.6.0][git-revision-date-localized support] ·
|
||||||
[:octicons-cpu-24: Plugin][12]
|
[:octicons-cpu-24: Plugin][git-revision-date-localized]
|
||||||
|
|
||||||
Similarly, the [git-revision-date-localized][12] plugin adds support for adding
|
Similarly, the [git-revision-date-localized] plugin adds support for adding
|
||||||
a localized _updated at_ and _created at_ date at the bottom of each page. It
|
a localized update and creation date at the bottom of each page. It can be
|
||||||
can be installed with `pip`:
|
installed with `pip`:
|
||||||
|
|
||||||
```
|
```
|
||||||
pip install mkdocs-git-revision-date-localized-plugin
|
pip install mkdocs-git-revision-date-localized-plugin
|
||||||
@ -160,7 +170,7 @@ plugins:
|
|||||||
- git-revision-date-localized
|
- git-revision-date-localized
|
||||||
```
|
```
|
||||||
|
|
||||||
The following options are supported:
|
The following configuration options are supported:
|
||||||
|
|
||||||
`type`{ #type }
|
`type`{ #type }
|
||||||
|
|
||||||
@ -174,11 +184,11 @@ The following options are supported:
|
|||||||
type: date
|
type: date
|
||||||
```
|
```
|
||||||
|
|
||||||
`fallback_to_build_date`{ #fallback_to_build_date }
|
`fallback_to_build_date`{ #fallback-to-build-date }
|
||||||
|
|
||||||
: :octicons-milestone-24: Default: `false` – Enables falling back to
|
: :octicons-milestone-24: Default: `false` – Enables falling back to
|
||||||
the time when `mkdocs build` was executed. Can be used as a fallback when
|
the time when `mkdocs build` was executed. Can be used as a fallback when
|
||||||
the build is performed outside of the git repository:
|
the build is performed outside of a git repository:
|
||||||
|
|
||||||
``` yaml
|
``` yaml
|
||||||
plugins:
|
plugins:
|
||||||
@ -186,11 +196,11 @@ The following options are supported:
|
|||||||
fallback_to_build_date: true
|
fallback_to_build_date: true
|
||||||
```
|
```
|
||||||
|
|
||||||
`enable_creation_date`{ #enable_creation_date }
|
`enable_creation_date`{ #enable-creation-date }
|
||||||
|
|
||||||
: :octicons-milestone-24: Default: `false` – Enables the display of the
|
: :octicons-milestone-24: Default: `false` – Enables the display of the
|
||||||
_created at_ date of the file associated with the page next to the
|
creation date of the file associated with the page next to the last updated
|
||||||
_updated at_ date at the bottom of the page:
|
date at the bottom of the page:
|
||||||
|
|
||||||
``` yaml
|
``` yaml
|
||||||
plugins:
|
plugins:
|
||||||
@ -199,8 +209,9 @@ The following options are supported:
|
|||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
_Material for MkDocs doesn't provide official support for the other options of
|
The other configuration options of this extension are not officially supported
|
||||||
this plugin, so they may be supported but might yield unexpected results.
|
by Material for MkDocs, which is why they may yield unexpected results. Use
|
||||||
Use them at your own risk._
|
them at your own risk.
|
||||||
|
|
||||||
[12]: https://github.com/timvink/mkdocs-git-revision-date-localized-plugin
|
[git-revision-date-localized support]: https://github.com/squidfunk/mkdocs-material/releases/tag/4.6.0
|
||||||
|
[git-revision-date-localized]: https://github.com/timvink/mkdocs-git-revision-date-localized-plugin
|
||||||
|
@ -5,12 +5,12 @@ template: overrides/main.html
|
|||||||
# Changing the colors
|
# Changing the colors
|
||||||
|
|
||||||
As any proper Material Design implementation, Material for MkDocs supports
|
As any proper Material Design implementation, Material for MkDocs supports
|
||||||
Google's original [color palette][1], which can be easily configured through
|
Google's original [color palette], which can be easily configured through
|
||||||
`mkdocs.yml`. Furthermore, colors can be customized with a few lines of CSS to
|
`mkdocs.yml`. Furthermore, colors can be customized with a few lines of CSS to
|
||||||
fit your brand's identity by using [CSS variables][2].
|
fit your brand's identity by using [CSS variables][custom colors].
|
||||||
|
|
||||||
[1]: http://www.materialui.co/colors
|
[color palette]: http://www.materialui.co/colors
|
||||||
[2]: #custom-colors
|
[custom colors]: #custom-colors
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
@ -18,9 +18,10 @@ fit your brand's identity by using [CSS variables][2].
|
|||||||
|
|
||||||
#### Color scheme
|
#### Color scheme
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][3] · :octicons-milestone-24: Default: `default`
|
[:octicons-tag-24: 5.2.0][palette.scheme support] ·
|
||||||
|
:octicons-milestone-24: Default: `default`
|
||||||
|
|
||||||
Material for MkDocs supports two _color schemes_: a light mode, which is just
|
Material for MkDocs supports two color schemes: a light mode, which is just
|
||||||
called `default`, and a dark mode, which is called `slate`. The color scheme
|
called `default`, and a dark mode, which is called `slate`. The color scheme
|
||||||
can be set via `mkdocs.yml`:
|
can be set via `mkdocs.yml`:
|
||||||
|
|
||||||
@ -30,7 +31,7 @@ theme:
|
|||||||
scheme: default
|
scheme: default
|
||||||
```
|
```
|
||||||
|
|
||||||
_Click on a tile to change the color scheme_:
|
Click on a tile to change the color scheme:
|
||||||
|
|
||||||
<div class="mdx-switch">
|
<div class="mdx-switch">
|
||||||
<button data-md-color-scheme="default"><code>default</code></button>
|
<button data-md-color-scheme="default"><code>default</code></button>
|
||||||
@ -49,13 +50,14 @@ _Click on a tile to change the color scheme_:
|
|||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
[3]: https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/stylesheets/palette/_scheme.scss
|
[palette.scheme support]: https://github.com/squidfunk/mkdocs-material/releases/tag/5.2.0
|
||||||
|
|
||||||
#### Primary color
|
#### Primary color
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][4] · :octicons-milestone-24: Default: `indigo`
|
[:octicons-tag-24: 0.2.0][palette.primary support] ·
|
||||||
|
:octicons-milestone-24: Default: `indigo`
|
||||||
|
|
||||||
The _primary color_ is used for the header, the sidebar, text links and several
|
The primary color is used for the header, the sidebar, text links and several
|
||||||
other components. In order to change the primary color, set the following value
|
other components. In order to change the primary color, set the following value
|
||||||
in `mkdocs.yml` to a valid color name:
|
in `mkdocs.yml` to a valid color name:
|
||||||
|
|
||||||
@ -65,7 +67,7 @@ theme:
|
|||||||
primary: indigo
|
primary: indigo
|
||||||
```
|
```
|
||||||
|
|
||||||
_Click on a tile to change the primary color_:
|
Click on a tile to change the primary color:
|
||||||
|
|
||||||
<div class="mdx-switch">
|
<div class="mdx-switch">
|
||||||
<button data-md-color-primary="red"><code>red</code></button>
|
<button data-md-color-primary="red"><code>red</code></button>
|
||||||
@ -103,13 +105,14 @@ _Click on a tile to change the primary color_:
|
|||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
[4]: https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/stylesheets/palette/_primary.scss
|
[palette.primary support]: https://github.com/squidfunk/mkdocs-material/releases/tag/0.2.0
|
||||||
|
|
||||||
#### Accent color
|
#### Accent color
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][5] · :octicons-milestone-24: Default: `indigo`
|
[:octicons-tag-24: 0.2.0][palette.accent support] ·
|
||||||
|
:octicons-milestone-24: Default: `indigo`
|
||||||
|
|
||||||
The _accent color_ is used to denote elements that can be interacted with, e.g.
|
The accent color is used to denote elements that can be interacted with, e.g.
|
||||||
hovered links, buttons and scrollbars. It can be changed in `mkdocs.yml` by
|
hovered links, buttons and scrollbars. It can be changed in `mkdocs.yml` by
|
||||||
choosing a valid color name:
|
choosing a valid color name:
|
||||||
|
|
||||||
@ -119,7 +122,7 @@ theme:
|
|||||||
accent: indigo
|
accent: indigo
|
||||||
```
|
```
|
||||||
|
|
||||||
_Click on a tile to change the accent color_:
|
Click on a tile to change the accent color:
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.md-typeset button[data-md-color-accent] > code {
|
.md-typeset button[data-md-color-accent] > code {
|
||||||
@ -159,36 +162,45 @@ _Click on a tile to change the accent color_:
|
|||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
[5]: https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/stylesheets/palette/_accent.scss
|
[palette.accent support]: https://github.com/squidfunk/mkdocs-material/releases/tag/0.2.0
|
||||||
|
|
||||||
### Color palette toggle
|
### Color palette toggle
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][6] · :octicons-milestone-24: Default: _none_
|
[:octicons-tag-24: 7.1.0][palette.toggle support] ·
|
||||||
|
:octicons-milestone-24: Default: _none_
|
||||||
|
|
||||||
It's also possible to offer a list of color palettes to the user, each of which
|
It's also possible to offer a list of color palettes to the user, each of which
|
||||||
can include a [`scheme`][7], [`primary`][8] and [`accent`][9] color each. The
|
can include a [`scheme`][palette.scheme], [`primary`][palette.primary] and
|
||||||
user can toggle between those color palettes:
|
[`accent`][palette.accent] color each. The user can toggle between those color
|
||||||
|
palettes:
|
||||||
|
|
||||||
``` yaml hl_lines="4-6 8-10"
|
``` yaml
|
||||||
theme:
|
theme:
|
||||||
palette:
|
palette: # (1)
|
||||||
- scheme: default
|
- scheme: default
|
||||||
toggle:
|
toggle:
|
||||||
icon: material/toggle-switch-off-outline
|
icon: material/toggle-switch-off-outline
|
||||||
name: Switch to dark mode
|
name: Switch to dark mode
|
||||||
- scheme: slate
|
- scheme: slate # (2)
|
||||||
toggle:
|
toggle:
|
||||||
icon: material/toggle-switch
|
icon: material/toggle-switch
|
||||||
name: Switch to light mode
|
name: Switch to light mode
|
||||||
```
|
```
|
||||||
|
|
||||||
The following fields must be set for each toggle:
|
1. Note that the `theme.palette` setting is now defined as a list.
|
||||||
|
2. With __2__ (color schemes) __x 21__ (primary colors) __x 17__ (accent color)
|
||||||
|
= __714__ combinations, it's impossible to ensure that all configurations
|
||||||
|
provide a good user experience (e.g. _yellow on light background_). Make
|
||||||
|
sure that the color combination of your choosing provides enough contrast
|
||||||
|
and tweak CSS variables where necessary.
|
||||||
|
|
||||||
`icon`{ #icon }
|
The following properties must be set for each toggle:
|
||||||
|
|
||||||
|
`icon`{ #toggle-icon }
|
||||||
|
|
||||||
: :octicons-milestone-24: Default: _none_ · :octicons-alert-24: Required –
|
: :octicons-milestone-24: Default: _none_ · :octicons-alert-24: Required –
|
||||||
This field must point to a valid icon path referencing [any icon bundled
|
This field must point to a valid icon path referencing [any icon bundled
|
||||||
with the theme][10], or the build will not succeed. Some popular
|
with the theme][custom icons], or the build will not succeed. Some popular
|
||||||
combinations:
|
combinations:
|
||||||
|
|
||||||
* :material-toggle-switch-off-outline: + :material-toggle-switch: – `material/toggle-switch-off-outline` + `material/toggle-switch`
|
* :material-toggle-switch-off-outline: + :material-toggle-switch: – `material/toggle-switch-off-outline` + `material/toggle-switch`
|
||||||
@ -196,102 +208,116 @@ The following fields must be set for each toggle:
|
|||||||
* :material-eye-outline: + :material-eye: – `material/eye-outline` + `material/eye`
|
* :material-eye-outline: + :material-eye: – `material/eye-outline` + `material/eye`
|
||||||
* :material-lightbulb-outline: + :material-lightbulb: – `material/lightbulb-outline` + `material/lightbulb`
|
* :material-lightbulb-outline: + :material-lightbulb: – `material/lightbulb-outline` + `material/lightbulb`
|
||||||
|
|
||||||
`name`{ #name }
|
`name`{ #toggle-name }
|
||||||
|
|
||||||
: :octicons-milestone-24: Default: _none_ · :octicons-alert-24: Required –
|
: :octicons-milestone-24: Default: _none_ · :octicons-alert-24: Required –
|
||||||
This field is used as the toggle's `title` attribute and should be set to a
|
This field is used as the toggle's `title` attribute and should be set to a
|
||||||
discernable name to improve accessibility.
|
discernable name to improve accessibility. It will appear on mouse hover.
|
||||||
|
|
||||||
[6]: https://github.com/squidfunk/mkdocs-material/blob/master/src/partials/header.html
|
[palette.toggle support]: https://github.com/squidfunk/mkdocs-material/releases/tag/7.1.0
|
||||||
[7]: #color-scheme
|
[palette.scheme]: #color-scheme
|
||||||
[8]: #primary-color
|
[palette.primary]: #primary-color
|
||||||
[9]: #accent-color
|
[palette.accent]: #accent-color
|
||||||
[10]: https://github.com/squidfunk/mkdocs-material/tree/master/material/.icons
|
[custom icons]: https://github.com/squidfunk/mkdocs-material/tree/master/material/.icons
|
||||||
|
|
||||||
### System preference
|
### System preference
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][6] · :octicons-milestone-24: Default: _none_
|
[:octicons-tag-24: 7.1.0][palette.media support] ·
|
||||||
|
:octicons-milestone-24: Default: _none_
|
||||||
|
|
||||||
In order to automatically set the color palette to the user's system preference,
|
In order to automatically set the color palette to the user's system preference,
|
||||||
a media query can be set as part of the `media` field next to the toggle
|
a media query can be set as part of the `media` field next to the toggle
|
||||||
definition in `mkdocs.yml`:
|
definition in `mkdocs.yml`:
|
||||||
|
|
||||||
``` yaml hl_lines="3 8"
|
``` yaml
|
||||||
theme:
|
theme:
|
||||||
palette:
|
palette:
|
||||||
- media: "(prefers-color-scheme: light)"
|
- media: "(prefers-color-scheme: light)" # (1)
|
||||||
scheme: default
|
scheme: default
|
||||||
toggle:
|
toggle:
|
||||||
icon: material/toggle-switch-off-outline
|
icon: material/toggle-switch-off-outline
|
||||||
name: Switch to dark mode
|
name: Switch to dark mode
|
||||||
- media: "(prefers-color-scheme: dark)"
|
- media: "(prefers-color-scheme: dark)" # (2)
|
||||||
scheme: slate
|
scheme: slate
|
||||||
toggle:
|
toggle:
|
||||||
icon: material/toggle-switch
|
icon: material/toggle-switch
|
||||||
name: Switch to light mode
|
name: Switch to light mode
|
||||||
```
|
```
|
||||||
|
|
||||||
|
1. This media query is __checked first__. It's also the __fallback__ when no
|
||||||
|
media query matches.
|
||||||
|
2. This media query is __checked second__. If it doesn't match, the first one
|
||||||
|
is automatically used.
|
||||||
|
|
||||||
When the user first visits your site, the media queries are evaluated in the
|
When the user first visits your site, the media queries are evaluated in the
|
||||||
order of their definition. The first media query that matches selects the
|
order of their definition. The first media query that matches selects the
|
||||||
default color palette.
|
default color palette.
|
||||||
|
|
||||||
!!! warning "Accessibility – not all color combinations work well"
|
[palette.media support]: https://github.com/squidfunk/mkdocs-material/releases/tag/7.1.0
|
||||||
|
|
||||||
With __2__ (color schemes) __x 21__ (primary colors) __x 17__ (accent color)
|
|
||||||
= __714__ combinations, it's impossible to ensure that all configurations
|
|
||||||
provide a good user experience (e.g. _yellow on light background_). Make
|
|
||||||
sure that the color combination of your choosing provides enough contrast
|
|
||||||
and tweak CSS variables where necessary.
|
|
||||||
|
|
||||||
## Customization
|
## Customization
|
||||||
|
|
||||||
### Custom colors
|
### Custom colors
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][11] ·
|
Material for MkDocs implements colors using [CSS variables] (custom
|
||||||
:octicons-mortar-board-24: Difficulty: _easy_
|
|
||||||
|
|
||||||
Material for MkDocs implements colors using [CSS variables][12] (custom
|
|
||||||
properties). If you want to customize the colors beyond the palette (e.g. to
|
properties). If you want to customize the colors beyond the palette (e.g. to
|
||||||
use your brand-specific colors), you can add an [additional stylesheet][13] and
|
use your brand-specific colors), you can add an [additional style sheet] and
|
||||||
tweak the values of the CSS variables.
|
tweak the values of the CSS variables.
|
||||||
|
|
||||||
Let's say you're :fontawesome-brands-youtube:{ style="color: #EE0F0F" }
|
Let's say you're :fontawesome-brands-youtube:{ style="color: #EE0F0F" }
|
||||||
__YouTube__, and want to set the primary color to your brand's palette. Just
|
__YouTube__, and want to set the primary color to your brand's palette. Just
|
||||||
add:
|
add:
|
||||||
|
|
||||||
``` css
|
=== ":octicons-file-code-16: docs/stylesheets/extra.css"
|
||||||
:root {
|
|
||||||
--md-primary-fg-color: #EE0F0F;
|
|
||||||
--md-primary-fg-color--light: #ECB7B7;
|
|
||||||
--md-primary-fg-color--dark: #90030C;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
See the file containing the [color definitions][11] for a list of all CSS
|
``` css
|
||||||
variables.
|
:root {
|
||||||
|
--md-primary-fg-color: #EE0F0F;
|
||||||
|
--md-primary-fg-color--light: #ECB7B7;
|
||||||
|
--md-primary-fg-color--dark: #90030C;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
[11]: https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/stylesheets/main/_colors.scss
|
=== ":octicons-file-code-16: mkdocs.yml"
|
||||||
[12]: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
|
|
||||||
[13]: ../customization.md#additional-css
|
``` yaml
|
||||||
|
extra_css:
|
||||||
|
- stylesheets/extra.css
|
||||||
|
```
|
||||||
|
|
||||||
|
See the file containing the [color definitions] for a list of all CSS variables.
|
||||||
|
|
||||||
|
[CSS variables]: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
|
||||||
|
[color definitions]: https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/stylesheets/main/_colors.scss
|
||||||
|
[additional style sheet]: ../customization.md#additional-css
|
||||||
|
|
||||||
|
|
||||||
### Custom color schemes
|
### Custom color schemes
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][11] ·
|
|
||||||
:octicons-mortar-board-24: Difficulty: _easy_
|
|
||||||
|
|
||||||
Besides overriding specific colors, you can create your own, named color scheme
|
Besides overriding specific colors, you can create your own, named color scheme
|
||||||
by wrapping the definitions in the `#!css [data-md-color-scheme="..."]`
|
by wrapping the definitions in a `[data-md-color-scheme="..."]`
|
||||||
[attribute selector][14], which you can then set via `mkdocs.yml` as described
|
[attribute selector], which you can then set via `mkdocs.yml` as described
|
||||||
in the [color schemes][7] section:
|
in the [color schemes][palette.scheme] section:
|
||||||
|
|
||||||
``` css
|
=== ":octicons-file-code-16: docs/stylesheets/extra.css"
|
||||||
[data-md-color-scheme="youtube"] {
|
|
||||||
--md-primary-fg-color: #EE0F0F;
|
``` css
|
||||||
--md-primary-fg-color--light: #ECB7B7;
|
[data-md-color-scheme="youtube"] {
|
||||||
--md-primary-fg-color--dark: #90030C;
|
--md-primary-fg-color: #EE0F0F;
|
||||||
}
|
--md-primary-fg-color--light: #ECB7B7;
|
||||||
```
|
--md-primary-fg-color--dark: #90030C;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
=== ":octicons-file-code-16: mkdocs.yml"
|
||||||
|
|
||||||
|
``` yaml
|
||||||
|
theme:
|
||||||
|
palette:
|
||||||
|
scheme: youtube
|
||||||
|
extra_css:
|
||||||
|
- stylesheets/extra.css
|
||||||
|
```
|
||||||
|
|
||||||
Additionally, the `slate` color scheme defines all of it's colors via `hsla`
|
Additionally, the `slate` color scheme defines all of it's colors via `hsla`
|
||||||
color functions and deduces its colors from the `--md-hue` CSS variable. You
|
color functions and deduces its colors from the `--md-hue` CSS variable. You
|
||||||
@ -299,8 +325,10 @@ can tune the `slate` theme with:
|
|||||||
|
|
||||||
``` css
|
``` css
|
||||||
[data-md-color-scheme="slate"] {
|
[data-md-color-scheme="slate"] {
|
||||||
--md-hue: 210; /* [0, 360] */
|
--md-hue: 210; /* (1) */
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
[14]: https://www.w3.org/TR/selectors-4/#attribute-selectors
|
1. The `hue` value must be in the range of `[0, 360]`
|
||||||
|
|
||||||
|
[attribute selector]: https://www.w3.org/TR/selectors-4/#attribute-selectors
|
||||||
|
@ -5,22 +5,22 @@ template: overrides/main.html
|
|||||||
# Changing the fonts
|
# Changing the fonts
|
||||||
|
|
||||||
Material for MkDocs makes it easy to change the typeface of your project
|
Material for MkDocs makes it easy to change the typeface of your project
|
||||||
documentation, as it directly integrates with [Google Fonts][1]. Alternatively,
|
documentation, as it directly integrates with [Google Fonts]. Alternatively,
|
||||||
fonts can be custom-loaded if self-hosting is preferred for data privacy reasons
|
fonts can be custom-loaded if self-hosting is preferred for data privacy reasons
|
||||||
or another destination should be used.
|
or another destination should be used.
|
||||||
|
|
||||||
[1]: https://fonts.google.com
|
[Google Fonts]: https://fonts.google.com
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
### Regular font
|
### Regular font
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][2] ·
|
[:octicons-tag-24: 0.1.2][font support] ·
|
||||||
:octicons-milestone-24: Default: [`Roboto`][3]
|
:octicons-milestone-24: Default: [`Roboto`][Roboto]
|
||||||
|
|
||||||
The _regular font_ is used for all body copy, headlines, and essentially
|
The regular font is used for all body copy, headlines, and essentially
|
||||||
everything that does not need to be monospaced. It can be set to any
|
everything that does not need to be monospaced. It can be set to any
|
||||||
valid [Google Font][1] with:
|
valid [Google Font][Google Fonts] via `mkdocs.yml`:
|
||||||
|
|
||||||
``` yaml
|
``` yaml
|
||||||
theme:
|
theme:
|
||||||
@ -30,17 +30,17 @@ theme:
|
|||||||
|
|
||||||
The typeface will be loaded in 300, 400, _400i_ and __700__.
|
The typeface will be loaded in 300, 400, _400i_ and __700__.
|
||||||
|
|
||||||
[2]: https://github.com/squidfunk/mkdocs-material/blob/master/src/base.html
|
[Roboto]: https://fonts.google.com/specimen/Roboto
|
||||||
[3]: https://fonts.google.com/specimen/Roboto
|
[font support]: https://github.com/squidfunk/mkdocs-material/releases/tag/0.1.2
|
||||||
|
|
||||||
### Monospaced font
|
### Monospaced font
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][2] ·
|
[:octicons-tag-24: 0.1.2][font support] ·
|
||||||
:octicons-milestone-24: Default: [`Roboto Mono`][4]
|
:octicons-milestone-24: Default: [`Roboto Mono`][Roboto Mono]
|
||||||
|
|
||||||
The _monospaced font_ is used for code blocks and can be configured separately.
|
The _monospaced font_ is used for code blocks and can be configured separately.
|
||||||
Just like the regular font, it can be set to any valid [Google Font][1] via
|
Just like the regular font, it can be set to any valid [Google Font]
|
||||||
`mkdocs.yml` with:
|
[Google Fonts] via `mkdocs.yml`:
|
||||||
|
|
||||||
``` yaml
|
``` yaml
|
||||||
theme:
|
theme:
|
||||||
@ -50,55 +50,63 @@ theme:
|
|||||||
|
|
||||||
The typeface will be loaded in 400.
|
The typeface will be loaded in 400.
|
||||||
|
|
||||||
[4]: https://fonts.google.com/specimen/Roboto+Mono
|
[Roboto Mono]: https://fonts.google.com/specimen/Roboto+Mono
|
||||||
|
|
||||||
## Customization
|
### Autoloading
|
||||||
|
|
||||||
If you want to load fonts from other destinations or don't want to use Google
|
[:octicons-tag-24: 1.0.0][font=false support] ·
|
||||||
Fonts for [data privacy][5] reasons, e.g. _due to GDPR_, you may customize
|
:octicons-milestone-24: Default: _none_
|
||||||
font loading as described below.
|
|
||||||
|
|
||||||
### Disabling font loading
|
If you want to prevent typefaces from being loaded from [Google Fonts], e.g.
|
||||||
|
to adhere to [data privacy] regulations, and fall back to system fonts, add the
|
||||||
[:octicons-file-code-24: Source][2] ·
|
following lines to `mkdocs.yml`:
|
||||||
:octicons-mortar-board-24: Difficulty: _easy_
|
|
||||||
|
|
||||||
If you want to prevent typefaces from being loaded from Google Fonts and fall
|
|
||||||
back to system fonts, add the following lines to `mkdocs.yml`:
|
|
||||||
|
|
||||||
``` yaml
|
``` yaml
|
||||||
theme:
|
theme:
|
||||||
font: false
|
font: false
|
||||||
```
|
```
|
||||||
|
|
||||||
|
[data privacy]: https://developers.google.com/fonts/faq#what_does_using_the_google_fonts_api_mean_for_the_privacy_of_my_users
|
||||||
|
[font=false support]: https://github.com/squidfunk/mkdocs-material/releases/tag/1.0.0
|
||||||
|
|
||||||
|
## Customization
|
||||||
|
|
||||||
### Additional fonts
|
### Additional fonts
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][2] ·
|
If you want to load an (additional) font from another destination or override
|
||||||
:octicons-mortar-board-24: Difficulty: _easy_
|
the system font, you can use an [additional style sheet] to add the
|
||||||
|
|
||||||
If you want to load an (additional) font from another or override
|
|
||||||
the fallback font, you can use an [additional stylesheet][8] to add the
|
|
||||||
corresponding `@font-face` definition:
|
corresponding `@font-face` definition:
|
||||||
|
|
||||||
``` css
|
=== ":octicons-file-code-16: docs/stylesheets/extra.css"
|
||||||
@font-face {
|
|
||||||
font-family: "<font>";
|
``` css
|
||||||
src: "...";
|
@font-face {
|
||||||
}
|
font-family: "<font>";
|
||||||
```
|
src: "...";
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
=== ":octicons-file-code-16: mkdocs.yml"
|
||||||
|
|
||||||
|
``` yaml
|
||||||
|
extra_css:
|
||||||
|
- stylesheets/extra.css
|
||||||
|
```
|
||||||
|
|
||||||
The font can then be applied to specific elements, e.g. only headlines, or
|
The font can then be applied to specific elements, e.g. only headlines, or
|
||||||
globally to be used as the site-wide regular or monospaced font (with fallback
|
globally to be used as the site-wide regular or monospaced font:
|
||||||
fonts being added automatically):
|
|
||||||
|
|
||||||
=== "Regular font"
|
=== "Regular font"
|
||||||
|
|
||||||
``` css
|
``` css
|
||||||
:root {
|
:root {
|
||||||
--md-text-font-family: "<font>";
|
--md-text-font-family: "<font>"; /* (1) */
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
1. Always define fonts through CSS variables and not `font-family`, as
|
||||||
|
this would disable the system font fallback.
|
||||||
|
|
||||||
=== "Monospaced font"
|
=== "Monospaced font"
|
||||||
|
|
||||||
``` css
|
``` css
|
||||||
@ -107,7 +115,4 @@ fonts being added automatically):
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
[5]: ../data-privacy.md
|
[additional style sheet]: ../customization.md#additional-css
|
||||||
[6]: ../customization.md#extending-the-theme
|
|
||||||
[7]: ../customization.md#overriding-blocks-recommended
|
|
||||||
[8]: ../customization.md#additional-stylesheets
|
|
||||||
|
@ -6,16 +6,17 @@ template: overrides/main.html
|
|||||||
|
|
||||||
Material for MkDocs supports internationalization (i18n) and provides
|
Material for MkDocs supports internationalization (i18n) and provides
|
||||||
translations for template variables and labels in 40+ languages. Additionally,
|
translations for template variables and labels in 40+ languages. Additionally,
|
||||||
the site search can be configured to use a language-specific stemmer (if
|
the site search can be configured to use a language-specific stemmer, if
|
||||||
available).
|
available.
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
### Site language
|
### Site language
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][1] · :octicons-milestone-24: Default: `en`
|
[:octicons-tag-24: 1.12.0][language support] ·
|
||||||
|
:octicons-milestone-24: Default: `en`
|
||||||
|
|
||||||
You can set the _site language_ in `mkdocs.yml` with:
|
You can set the site language in `mkdocs.yml` with:
|
||||||
|
|
||||||
``` yaml
|
``` yaml
|
||||||
theme:
|
theme:
|
||||||
@ -24,7 +25,7 @@ theme:
|
|||||||
|
|
||||||
The following languages are supported:
|
The following languages are supported:
|
||||||
|
|
||||||
<div class="mdx-columns" markdown="1">
|
<div class="mdx-columns" markdown>
|
||||||
|
|
||||||
- `af` – Afrikaans
|
- `af` – Afrikaans
|
||||||
- `ar` – Arabic
|
- `ar` – Arabic
|
||||||
@ -79,70 +80,72 @@ The following languages are supported:
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
_Note that some languages will produce unreadable anchor links, due to the way
|
Note that some languages will produce unreadable anchor links due to the way
|
||||||
the default slug function works. Consider using a Unicode-aware slug function,
|
the default slug function works. Consider using a [Unicode-aware slug function].
|
||||||
as [documented here][2]._
|
|
||||||
|
|
||||||
[1]: https://github.com/squidfunk/mkdocs-material/blob/master/src/partials/languages/en.html
|
[language support]: https://github.com/squidfunk/mkdocs-material/releases/tag/1.12.0
|
||||||
[2]: setting-up-navigation.md#slugify
|
[Unicode-aware slug function]: setting-up-navigation.md#slugify
|
||||||
|
|
||||||
### Site language selector
|
### Site language selector
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][3] ·
|
[:octicons-tag-24: 7.0.0][alternate support] ·
|
||||||
|
:octicons-milestone-24: Default: _none_ ·
|
||||||
:octicons-beaker-24: Experimental
|
:octicons-beaker-24: Experimental
|
||||||
|
|
||||||
If your documentation is available in multiple languages, a _language selector_
|
If your documentation is available in multiple languages, a language selector
|
||||||
can be added to the header next to the search bar. Alternate languages can be
|
pointing to those languages can be added to the header. Alternate languages
|
||||||
defined via `mkdocs.yml`:
|
can be defined via `mkdocs.yml`.
|
||||||
|
|
||||||
``` yaml
|
``` yaml
|
||||||
extra:
|
extra:
|
||||||
alternate:
|
alternate:
|
||||||
|
|
||||||
# Switch to English
|
|
||||||
- name: English
|
- name: English
|
||||||
link: <your-site>/en/
|
link: /en/ # (1)
|
||||||
lang: en
|
lang: en
|
||||||
|
|
||||||
# Switch to German
|
|
||||||
- name: Deutsch
|
- name: Deutsch
|
||||||
link: <your-site>/de/
|
link: /de/
|
||||||
lang: de
|
lang: de
|
||||||
|
|
||||||
# Switch to Japanese
|
|
||||||
- name: 日本語
|
|
||||||
link: <your-site>/ja/
|
|
||||||
lang: ja
|
|
||||||
```
|
```
|
||||||
|
|
||||||
This will render a language selector in the header next to the search bar:
|
1. Note that this must be an absolute link. If it includes a domain part, it's
|
||||||
|
used as defined. Otherwise the domain part of the [`site_url`][site_url] as
|
||||||
|
set in `mkdocs.yml` is prepended to the link.
|
||||||
|
|
||||||
[![Language selection][4]][4]
|
The following properties must be set for each alternate language:
|
||||||
|
|
||||||
[3]: https://github.com/squidfunk/mkdocs-material/blob/master/src/partials/header.html
|
`name`{ #language-name }
|
||||||
[4]: ../assets/screenshots/language-selection.png
|
|
||||||
|
|
||||||
### Site search language
|
: :octicons-milestone-24: Default: _none_ · :octicons-alert-24: Required –
|
||||||
|
This field is used inside the language selector as the name of the language
|
||||||
|
and must be set to a non-empty string.
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][5] ·
|
`link`{ #language-link }
|
||||||
:octicons-milestone-24: Default: _automatically set_
|
|
||||||
|
|
||||||
Some languages, like Arabic or Japanese, need dedicated stemmers for search to
|
: :octicons-milestone-24: Default: _none_ · :octicons-alert-24: Required –
|
||||||
work properly. Material for MkDocs relies on [lunr-languages][6] to provide this
|
This field must be set to an absolute link, which might also point to
|
||||||
functionality. See the guide detailing how to [set up site search][7] for
|
another domain or subdomain not necessarily generated with MkDocs.
|
||||||
more information.
|
|
||||||
|
|
||||||
[5]: https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/javascripts/integrations/search/worker/main/index.ts
|
`lang`{ #language-lang }
|
||||||
[6]: https://github.com/MihaiValentin/lunr-languages
|
|
||||||
[7]: setting-up-site-search.md
|
: :octicons-milestone-24: Default: _none_ · :octicons-alert-24: Required –
|
||||||
|
This field must contain a valid [ISO 639-1 language code] and is used for
|
||||||
|
the `hreflang` attribute of the link, improving discoverability via search
|
||||||
|
engines.
|
||||||
|
|
||||||
|
[![Language selector preview]][Language selector preview]
|
||||||
|
|
||||||
|
[alternate support]: https://github.com/squidfunk/mkdocs-material/releases/tag/7.0.0
|
||||||
|
[site_url]: https://www.mkdocs.org/user-guide/configuration/#site_url
|
||||||
|
[ISO 639-1 language code]: https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes
|
||||||
|
[Language selector preview]: ../assets/screenshots/language-selection.png
|
||||||
|
|
||||||
### Directionality
|
### Directionality
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][8] ·
|
[:octicons-tag-24: 2.5.0][direction support] ·
|
||||||
:octicons-milestone-24: Default: _automatically set_
|
:octicons-milestone-24: Default: _automatically set_
|
||||||
|
|
||||||
While many languages are read `ltr` (left-to-right), Material for MkDocs also
|
While many languages are read `ltr` (left-to-right), Material for MkDocs also
|
||||||
supports `rtl` (right-to-left) _directionality_ which is inferred from the
|
supports `rtl` (right-to-left) directionality which is deduced from the
|
||||||
selected language, but can also be set with:
|
selected language, but can also be set with:
|
||||||
|
|
||||||
``` yaml
|
``` yaml
|
||||||
@ -163,44 +166,54 @@ Click on a tile to change the directionality:
|
|||||||
button.addEventListener("click", function() {
|
button.addEventListener("click", function() {
|
||||||
var attr = this.getAttribute("data-md-dir")
|
var attr = this.getAttribute("data-md-dir")
|
||||||
document.body.dir = attr
|
document.body.dir = attr
|
||||||
var name = document.querySelector("#__code_1 code span:nth-child(5)")
|
var name = document.querySelector("#__code_3 code span:nth-child(5)")
|
||||||
name.textContent = attr
|
name.textContent = attr
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
[8]: https://github.com/squidfunk/mkdocs-material/blob/master/src/base.html
|
[direction support]: https://github.com/squidfunk/mkdocs-material/releases/tag/2.5.0
|
||||||
|
|
||||||
## Customization
|
## Customization
|
||||||
|
|
||||||
### Custom translations
|
### Custom translations
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][1] ·
|
|
||||||
:octicons-mortar-board-24: Difficulty: _easy_
|
|
||||||
|
|
||||||
If you want to customize some of the translations for a language, just follow
|
If you want to customize some of the translations for a language, just follow
|
||||||
the guide on [theme extension][9] and create a new partial in
|
the guide on [theme extension] and create a new partial in the `overrides`
|
||||||
`partials/languages`, e.g. `en-custom.html`. Next, look up the translation you
|
folder. Then, import the [translations] of the language as a fallback and only
|
||||||
want to change in the [base translation][1] and add it to the partial.
|
adjust the ones you want to override:
|
||||||
|
|
||||||
Let's say you want to change "__Table of contents__" to "__On this page__":
|
=== ":octicons-file-code-16: partials/languages/custom.html"
|
||||||
|
|
||||||
``` html
|
``` html
|
||||||
<!-- Use en language as fallback -->
|
<!-- Import translations for language and fallback -->
|
||||||
{% import "partials/languages/en.html" as fallback %}
|
{% import "partials/languages/de.html" as language %}
|
||||||
{% macro override(key) %}{{ {
|
{% import "partials/languages/en.html" as fallback %} <!-- (1) -->
|
||||||
"toc.title": "On this page"
|
|
||||||
}[key] }}{% endmacro %}
|
|
||||||
|
|
||||||
<!-- Re-export the translation macro for mkbuild-material to use -->
|
<!-- Define custom translations -->
|
||||||
{% macro t(key) %}{{ override(key) or fallback.t(key) }}{% endmacro %}
|
{% macro override(key) %}{{ {
|
||||||
```
|
"toc.title": "Auf dieser Seite" <!-- (2) -->
|
||||||
|
}[key] }}{% endmacro %}
|
||||||
|
|
||||||
Then, add the following lines to `mkdocs.yml`:
|
<!-- Re-export translations -->
|
||||||
|
{% macro t(key) %}{{
|
||||||
|
override(key) or language(key) or fallback.t(key)
|
||||||
|
}}{% endmacro %}
|
||||||
|
```
|
||||||
|
|
||||||
``` yaml
|
1. Note that `en` must always be used as a fallback language, as it's the
|
||||||
theme:
|
default theme language.
|
||||||
language: en-custom
|
|
||||||
```
|
|
||||||
|
|
||||||
[9]: ../customization.md#extending-the-theme
|
2. Check the [list of available languages], pick the translation you want
|
||||||
|
to override for your language and add them here.
|
||||||
|
|
||||||
|
=== ":octicons-file-code-16: mkdocs.yml"
|
||||||
|
|
||||||
|
``` yaml
|
||||||
|
theme:
|
||||||
|
language: custom
|
||||||
|
```
|
||||||
|
|
||||||
|
[theme extension]: ../customization.md#extending-the-theme
|
||||||
|
[translations]: https://github.com/squidfunk/mkdocs-material/blob/master/src/partials/languages/
|
||||||
|
[list of available languages]: https://github.com/squidfunk/mkdocs-material/blob/master/src/partials/languages/
|
||||||
|
@ -4,32 +4,32 @@ template: overrides/main.html
|
|||||||
|
|
||||||
# Changing the logo and icons
|
# Changing the logo and icons
|
||||||
|
|
||||||
When installing Material for MkDocs, you immediately get access to _over 7.000
|
When installing Material for MkDocs, you immediately get access to _over 8.000
|
||||||
icons_ ready to be used for customization of specific parts of the theme and/or
|
icons_ ready to be used for customization of specific parts of the theme and/or
|
||||||
when writing your documentation in Markdown. Not enough? You can also [add
|
when writing your documentation in Markdown. Not enough? You can also add
|
||||||
additional icons][1] with minimal effort.
|
[additional icons] with minimal effort.
|
||||||
|
|
||||||
[1]: #additional-icons
|
[additional icons]: #additional-icons
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
### Logo
|
### Logo
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][2] ·
|
[:octicons-tag-24: 0.1.0][logo support] ·
|
||||||
:octicons-milestone-24: Default: [`material/library`][3]
|
:octicons-milestone-24: Default: [`material/library`][logo default]
|
||||||
|
|
||||||
The _logo_ can be changed to a user-provided image (any type, incl. `*.png` and
|
The logo can be changed to a user-provided image (any type, incl. `*.png` and
|
||||||
`*.svg`) located in the `docs` folder, or to any icon bundled with the theme.
|
`*.svg`) located in the `docs` folder, or to any icon bundled with the theme.
|
||||||
Add the following lines to `mkdocs.yml`:
|
Add the following lines to `mkdocs.yml`:
|
||||||
|
|
||||||
=== "Image"
|
=== ":octicons-image-16: Image"
|
||||||
|
|
||||||
``` yaml
|
``` yaml
|
||||||
theme:
|
theme:
|
||||||
logo: assets/logo.png
|
logo: assets/logo.png
|
||||||
```
|
```
|
||||||
|
|
||||||
=== "Icon, bundled"
|
=== ":octicons-package-16: Icon, bundled"
|
||||||
|
|
||||||
``` yaml
|
``` yaml
|
||||||
theme:
|
theme:
|
||||||
@ -37,9 +37,8 @@ Add the following lines to `mkdocs.yml`:
|
|||||||
logo: material/library
|
logo: material/library
|
||||||
```
|
```
|
||||||
|
|
||||||
[2]: https://github.com/squidfunk/mkdocs-material/blob/master/src/partials/logo.html
|
[logo support]: https://github.com/squidfunk/mkdocs-material/releases/tag/0.1.0
|
||||||
[3]: https://github.com/squidfunk/mkdocs-material/blob/master/material/.icons/material/library.svg
|
[logo default]: https://github.com/squidfunk/mkdocs-material/blob/master/material/.icons/material/library.svg
|
||||||
[4]: https://github.com/squidfunk/mkdocs-material/tree/master/material/.icons
|
|
||||||
|
|
||||||
Normally, the logo in the header and sidebar links to the homepage of the
|
Normally, the logo in the header and sidebar links to the homepage of the
|
||||||
documentation, which is the same as `site_url`. This behavior can be changed
|
documentation, which is the same as `site_url`. This behavior can be changed
|
||||||
@ -52,60 +51,28 @@ extra:
|
|||||||
|
|
||||||
### Favicon
|
### Favicon
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][5] ·
|
[:octicons-tag-24: 0.1.0][favicon support] ·
|
||||||
:octicons-milestone-24: Default: `assets/images/favicon.png`
|
:octicons-milestone-24: Default: [`assets/images/favicon.png`][favicon default]
|
||||||
|
|
||||||
The _favicon_ can be changed to a path pointing to a user-provided image, which
|
The favicon can be changed to a path pointing to a user-provided image, which
|
||||||
must be located in the `docs` folder. It can be set via `mkdocs.yml`:
|
must be located in the `docs` folder. Add the following lines to `mkdocs.yml`:
|
||||||
|
|
||||||
``` yaml
|
``` yaml
|
||||||
theme:
|
theme:
|
||||||
favicon: images/favicon.png
|
favicon: images/favicon.png
|
||||||
```
|
```
|
||||||
|
|
||||||
[5]: https://github.com/squidfunk/mkdocs-material/blob/master/src/base.html
|
[favicon support]: https://github.com/squidfunk/mkdocs-material/releases/tag/0.1.0
|
||||||
|
[favicon default]: https://github.com/squidfunk/mkdocs-material/blob/master/material/assets/images/favicon.png
|
||||||
### Icons
|
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][4] · [:octicons-workflow-24: Extension][6]
|
|
||||||
|
|
||||||
The [Emoji][6] extension, which is part of [Python Markdown Extensions][7],
|
|
||||||
adds the ability to __integrate icons__ in the `*.svg` file format, which are
|
|
||||||
inlined when [building your site][8]:
|
|
||||||
|
|
||||||
``` yaml
|
|
||||||
markdown_extensions:
|
|
||||||
- pymdownx.emoji:
|
|
||||||
emoji_index: !!python/name:materialx.emoji.twemoji
|
|
||||||
emoji_generator: !!python/name:materialx.emoji.to_svg
|
|
||||||
```
|
|
||||||
|
|
||||||
The following icon sets are bundled with Material for MkDocs:
|
|
||||||
|
|
||||||
- :material-material-design: – [Material Design][9]
|
|
||||||
- :fontawesome-brands-font-awesome-flag: – [FontAwesome][10]
|
|
||||||
- :octicons-mark-github-16: – [Octicons][11]
|
|
||||||
|
|
||||||
If you want to add [additional icons][1], read on.
|
|
||||||
|
|
||||||
[6]: https://facelessuser.github.io/pymdown-extensions/extensions/emoji/
|
|
||||||
[7]: https://facelessuser.github.io/pymdown-extensions/
|
|
||||||
[8]: ../creating-your-site.md#building-your-site
|
|
||||||
[9]: https://materialdesignicons.com/
|
|
||||||
[10]: https://fontawesome.com/icons?d=gallery&m=free
|
|
||||||
[11]: https://octicons.github.com/
|
|
||||||
|
|
||||||
## Customization
|
## Customization
|
||||||
|
|
||||||
### Additional icons
|
### Additional icons
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][4] ·
|
In order to use custom icons, [extend the theme] and create a new folder named
|
||||||
:octicons-mortar-board-24: Difficulty: _easy_
|
`.icons` in the [`custom_dir`][custom_dir] you want to use for overrides.
|
||||||
|
Next, add your `*.svg` icons into a subfolder of the `.icons` folder. Let's say
|
||||||
In order to add additional icons, [extend the theme][12], and create a folder
|
you downloaded and unpacked the [Bootstrap] icon set, and want to add it to
|
||||||
named `.icons` in the [`custom_dir`][13] you want to use for overrides. Next,
|
|
||||||
add your `*.svg` icons into a subfolder of the `.icons` folder. Let's say you
|
|
||||||
downloaded and unpacked the [Bootstrap][14] icon set, and want to add it to
|
|
||||||
your project documentation. The structure of your project should look like this:
|
your project documentation. The structure of your project should look like this:
|
||||||
|
|
||||||
``` sh
|
``` sh
|
||||||
@ -129,9 +96,8 @@ markdown_extensions:
|
|||||||
- overrides/.icons
|
- overrides/.icons
|
||||||
```
|
```
|
||||||
|
|
||||||
You should now be able to use the :fontawesome-brands-bootstrap: Bootstrap
|
You can now use all :fontawesome-brands-bootstrap: Bootstrap icons.
|
||||||
icons.
|
|
||||||
|
|
||||||
[12]: ../customization.md#extending-the-theme
|
[extend the theme]: ../customization.md#extending-the-theme
|
||||||
[13]: https://www.mkdocs.org/user-guide/configuration/#custom_dir
|
[custom_dir]: https://www.mkdocs.org/user-guide/configuration/#custom_dir
|
||||||
[14]: https://icons.getbootstrap.com/
|
[Bootstrap]: https://icons.getbootstrap.com/
|
||||||
|
142
docs/setup/extensions/index.md
Normal file
142
docs/setup/extensions/index.md
Normal file
@ -0,0 +1,142 @@
|
|||||||
|
---
|
||||||
|
template: overrides/main.html
|
||||||
|
title: Extensions
|
||||||
|
---
|
||||||
|
|
||||||
|
# Extensions
|
||||||
|
|
||||||
|
Markdown is a very small language with a kind-of reference implementation called
|
||||||
|
[John Gruber's Markdown]. [Python Markdown] and [Python Markdown Extensions]
|
||||||
|
are two packages that enhance the Markdown writing experience, adding useful
|
||||||
|
syntax extensions for technical writing.
|
||||||
|
|
||||||
|
[John Gruber's Markdown]: https://daringfireball.net/projects/markdown/
|
||||||
|
[Python Markdown]: python-markdown.md
|
||||||
|
[Python Markdown Extensions]: python-markdown-extensions.md
|
||||||
|
|
||||||
|
## Supported extensions
|
||||||
|
|
||||||
|
The following extensions are all supported by Material for MkDocs and therefore
|
||||||
|
strongly recommended. Click on each extension to learn about its purpose and
|
||||||
|
configuration:
|
||||||
|
|
||||||
|
<div class="mdx-columns" markdown>
|
||||||
|
|
||||||
|
- [Abbreviations]
|
||||||
|
- [Admonition]
|
||||||
|
- [Arithmatex]
|
||||||
|
- [Attribute Lists]
|
||||||
|
- [BetterEm]
|
||||||
|
- [Caret, Mark & Tilde]
|
||||||
|
- [Critic]
|
||||||
|
- [Definition Lists]
|
||||||
|
- [Details]
|
||||||
|
- [Emoji]
|
||||||
|
- [Footnotes]
|
||||||
|
- [Highlight]
|
||||||
|
- [Keys]
|
||||||
|
- [Metadata]
|
||||||
|
- [Markdown in HTML]
|
||||||
|
- [SmartSymbols]
|
||||||
|
- [Snippets]
|
||||||
|
- [SuperFences]
|
||||||
|
- [Tabbed]
|
||||||
|
- [Table of Contents]
|
||||||
|
- [Tables]
|
||||||
|
- [Tasklist]
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
[Abbreviations]: python-markdown.md#abbreviations
|
||||||
|
[Admonition]: python-markdown.md#admonition
|
||||||
|
[Arithmatex]: python-markdown-extensions.md#arithmatex
|
||||||
|
[Attribute Lists]: python-markdown.md#attribute-lists
|
||||||
|
[BetterEm]: python-markdown-extensions.md#betterem
|
||||||
|
[Caret, Mark & Tilde]: python-markdown-extensions.md#caret-mark-tilde
|
||||||
|
[Critic]: python-markdown-extensions.md#critic
|
||||||
|
[Definition Lists]: python-markdown.md#definition-lists
|
||||||
|
[Details]: python-markdown-extensions.md#details
|
||||||
|
[Emoji]: python-markdown-extensions.md#emoji
|
||||||
|
[Footnotes]: python-markdown.md#footnotes
|
||||||
|
[Highlight]: python-markdown-extensions.md#highlight
|
||||||
|
[Keys]: python-markdown-extensions.md#keys
|
||||||
|
[Metadata]: python-markdown.md#metadata
|
||||||
|
[Markdown in HTML]: python-markdown.md#markdown-in-html
|
||||||
|
[SmartSymbols]: python-markdown-extensions.md#smartsymbols
|
||||||
|
[Snippets]: python-markdown-extensions.md#snippets
|
||||||
|
[SuperFences]: python-markdown-extensions.md#superfences
|
||||||
|
[Tabbed]: python-markdown-extensions.md#tabbed
|
||||||
|
[Table of Contents]: python-markdown.md#table-of-contents
|
||||||
|
[Tables]: python-markdown.md#tables
|
||||||
|
[Tasklist]: python-markdown-extensions.md#tasklist
|
||||||
|
|
||||||
|
## Configuration
|
||||||
|
|
||||||
|
Extensions are configured as part of `mkdocs.yml` – the MkDocs configuration
|
||||||
|
file. The following sections contain two example configurations to bootstrap
|
||||||
|
your documentation project.
|
||||||
|
|
||||||
|
[overview]: #advanced-configuration
|
||||||
|
|
||||||
|
### Minimal configuration
|
||||||
|
|
||||||
|
This configuration is a good starting point for when you're using Material for
|
||||||
|
MkDocs for the first time. The best idea is to explore the [reference], and
|
||||||
|
gradually add what you want to use:
|
||||||
|
|
||||||
|
``` yaml
|
||||||
|
markdown_extensions:
|
||||||
|
|
||||||
|
# Python Markdown
|
||||||
|
- meta
|
||||||
|
- toc:
|
||||||
|
permalink: true
|
||||||
|
|
||||||
|
# Python Markdown Extensions
|
||||||
|
- pymdownx.highlight
|
||||||
|
- pymdownx.superfences
|
||||||
|
```
|
||||||
|
|
||||||
|
[reference]: ../../reference/abbreviations.md
|
||||||
|
|
||||||
|
### Recommended configuration
|
||||||
|
|
||||||
|
This configuration enables all Markdown-related features of Material for MkDocs
|
||||||
|
and is great for experienced users bootstrapping a new documentation project:
|
||||||
|
|
||||||
|
``` yaml
|
||||||
|
markdown_extensions:
|
||||||
|
|
||||||
|
# Python Markdown
|
||||||
|
- abbr
|
||||||
|
- admonition
|
||||||
|
- attr_list
|
||||||
|
- def_list
|
||||||
|
- footnotes
|
||||||
|
- meta
|
||||||
|
- md_in_html
|
||||||
|
- toc:
|
||||||
|
permalink: true
|
||||||
|
|
||||||
|
# Python Markdown Extensions
|
||||||
|
- pymdownx.arithmatex:
|
||||||
|
generic: true
|
||||||
|
- pymdownx.betterem:
|
||||||
|
smart_enable: all
|
||||||
|
- pymdownx.caret
|
||||||
|
- pymdownx.details
|
||||||
|
- pymdownx.emoji:
|
||||||
|
emoji_index: !!python/name:materialx.emoji.twemoji
|
||||||
|
emoji_generator: !!python/name:materialx.emoji.to_svg
|
||||||
|
- pymdownx.highlight
|
||||||
|
- pymdownx.inlinehilite
|
||||||
|
- pymdownx.keys
|
||||||
|
- pymdownx.mark
|
||||||
|
- pymdownx.smartsymbols
|
||||||
|
- pymdownx.superfences
|
||||||
|
- pymdownx.tabbed:
|
||||||
|
alternate_style: true
|
||||||
|
- pymdownx.tasklist:
|
||||||
|
custom_checkbox: true
|
||||||
|
- pymdownx.tilde
|
||||||
|
```
|
691
docs/setup/extensions/python-markdown-extensions.md
Normal file
691
docs/setup/extensions/python-markdown-extensions.md
Normal file
@ -0,0 +1,691 @@
|
|||||||
|
---
|
||||||
|
template: overrides/main.html
|
||||||
|
---
|
||||||
|
|
||||||
|
# Python Markdown Extensions
|
||||||
|
|
||||||
|
The [Python Markdown Extensions] package is an excellent collection of
|
||||||
|
additional extensions perfectly suited for advanced technical writing. Material
|
||||||
|
for MkDocs lists this package as an explicit dependency, so it's automatically
|
||||||
|
installed with a supported version.
|
||||||
|
|
||||||
|
[Python Markdown Extensions]: https://facelessuser.github.io/pymdown-extensions/
|
||||||
|
|
||||||
|
## Supported extensions
|
||||||
|
|
||||||
|
### Arithmatex
|
||||||
|
|
||||||
|
[:octicons-tag-24: 1.0.0][Arithmatex support] ·
|
||||||
|
[:octicons-workflow-24: Extension][Arithmatex]
|
||||||
|
|
||||||
|
The [Arithmatex] extension allows for rendering of block and inline block
|
||||||
|
equations and integrates seamlessly with [MathJax][^1] – a library for
|
||||||
|
mathematical typesetting. Enable it via `mkdocs.yml`:
|
||||||
|
|
||||||
|
[^1]:
|
||||||
|
Other libraries like [KaTeX] are also supported and can be integrated with
|
||||||
|
some additional effort. See the [Arithmatex documentation on KaTeX] for
|
||||||
|
further guidance, as this is beyond the scope of Material for MkDocs.
|
||||||
|
|
||||||
|
``` yaml
|
||||||
|
markdown_extensions:
|
||||||
|
- pymdownx.arithmatex:
|
||||||
|
generic: true
|
||||||
|
```
|
||||||
|
|
||||||
|
Besides enabling the extension in `mkdocs.yml`, a MathJax configuration and
|
||||||
|
the JavaScript runtime need to be included, which can be done with a few lines
|
||||||
|
of [additional JavaScript]:
|
||||||
|
|
||||||
|
=== ":octicons-file-code-16: docs/javascripts/mathjax.js"
|
||||||
|
|
||||||
|
``` js
|
||||||
|
window.MathJax = {
|
||||||
|
tex: {
|
||||||
|
inlineMath: [["\\(", "\\)"]],
|
||||||
|
displayMath: [["\\[", "\\]"]],
|
||||||
|
processEscapes: true,
|
||||||
|
processEnvironments: true
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
ignoreHtmlClass: ".*|",
|
||||||
|
processHtmlClass: "arithmatex"
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
document$.subscribe(() => {
|
||||||
|
MathJax.typesetPromise()
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
=== ":octicons-file-code-16: mkdocs.yml"
|
||||||
|
|
||||||
|
``` yaml
|
||||||
|
extra_javascript:
|
||||||
|
- javascripts/mathjax.js
|
||||||
|
- https://polyfill.io/v3/polyfill.min.js?features=es6
|
||||||
|
- https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js
|
||||||
|
```
|
||||||
|
|
||||||
|
The other configuration options of this extension are not officially supported
|
||||||
|
by Material for MkDocs, which is why they may yield unexpected results. Use
|
||||||
|
them at your own risk.
|
||||||
|
|
||||||
|
See reference for usage:
|
||||||
|
|
||||||
|
- [Using block syntax]
|
||||||
|
- [Using inline block syntax]
|
||||||
|
|
||||||
|
[Arithmatex]: https://facelessuser.github.io/pymdown-extensions/extensions/arithmatex/
|
||||||
|
[Arithmatex support]: https://github.com/squidfunk/mkdocs-material/releases/tag/1.0.0
|
||||||
|
[Arithmatex documentation on KaTeX]: https://facelessuser.github.io/pymdown-extensions/extensions/arithmatex/#loading-katex
|
||||||
|
[MathJax]: https://www.mathjax.org/
|
||||||
|
[KaTeX]: https://github.com/Khan/KaTeX
|
||||||
|
[additional JavaScript]: ../../customization.md#additional-javascript
|
||||||
|
[Using block syntax]: ../../reference/mathjax.md#using-block-syntax
|
||||||
|
[Using inline block syntax]: ../../reference/mathjax.md#using-inline-block-syntax
|
||||||
|
|
||||||
|
### BetterEm
|
||||||
|
|
||||||
|
[:octicons-tag-24: 0.1.0][BetterEm support] ·
|
||||||
|
[:octicons-workflow-24: Extension][BetterEm]
|
||||||
|
|
||||||
|
The [BetterEm] extension improves the detection of Markup to emphasize text
|
||||||
|
in Markdown using special characters, i.e. for `**bold**` and `_italic_`
|
||||||
|
formatting. Enable it via `mkdocs.yml`:
|
||||||
|
|
||||||
|
``` yaml
|
||||||
|
markdown_extensions:
|
||||||
|
- pymdownx.betterem
|
||||||
|
```
|
||||||
|
|
||||||
|
The configuration options of this extension are not specific to Material for
|
||||||
|
MkDocs, as they only impact the Markdown parsing stage. See the [BetterEm
|
||||||
|
documentation][BetterEm] for more information.
|
||||||
|
|
||||||
|
[BetterEm]: https://facelessuser.github.io/pymdown-extensions/extensions/betterem/
|
||||||
|
[BetterEm support]: https://github.com/squidfunk/mkdocs-material/releases/tag/0.1.0
|
||||||
|
|
||||||
|
### Caret, Mark & Tilde
|
||||||
|
|
||||||
|
[:octicons-tag-24: 1.0.0][Caret support] ·
|
||||||
|
[:octicons-workflow-24: Extension][Caret]
|
||||||
|
|
||||||
|
The [Caret], [Mark] and [Tilde] extensions add the ability to highlight text
|
||||||
|
and define sub- and superscript using a simple syntax. Enable them together
|
||||||
|
via `mkdocs.yml`:
|
||||||
|
|
||||||
|
``` yaml
|
||||||
|
markdown_extensions:
|
||||||
|
- pymdownx.caret
|
||||||
|
- pymdownx.mark
|
||||||
|
- pymdownx.tilde
|
||||||
|
```
|
||||||
|
|
||||||
|
The configuration options of this extension are not specific to Material for
|
||||||
|
MkDocs, as they only impact the Markdown parsing stage. See the [Caret], [Mark]
|
||||||
|
and [Tilde documentation][Tilde] for guidance.
|
||||||
|
|
||||||
|
See reference for usage:
|
||||||
|
|
||||||
|
- [Highlighting text]
|
||||||
|
- [Sub- and superscripts]
|
||||||
|
|
||||||
|
[Caret]: https://facelessuser.github.io/pymdown-extensions/extensions/caret/
|
||||||
|
[Caret support]: https://github.com/squidfunk/mkdocs-material/releases/tag/1.0.0
|
||||||
|
[Mark]: https://facelessuser.github.io/pymdown-extensions/extensions/mark/
|
||||||
|
[Tilde]: https://facelessuser.github.io/pymdown-extensions/extensions/tilde/
|
||||||
|
[Highlighting text]: ../../reference/formatting.md#highlighting-text
|
||||||
|
[Sub- and superscripts]: ../../reference/formatting.md#sub-and-superscripts
|
||||||
|
|
||||||
|
### Critic
|
||||||
|
|
||||||
|
[:octicons-tag-24: 1.0.0][Critic support] ·
|
||||||
|
[:octicons-workflow-24: Extension][Critic]
|
||||||
|
|
||||||
|
The [Critic] extension allows for the usage of [Critic Markup] to highlight
|
||||||
|
added, deleted or updated sections in a document, i.e. for tracking changes in
|
||||||
|
Markdown syntax. Enable it via `mkdocs.yml`:
|
||||||
|
|
||||||
|
``` yaml
|
||||||
|
markdown_extensions:
|
||||||
|
- pymdownx.critic
|
||||||
|
```
|
||||||
|
|
||||||
|
The following configuration options are supported:
|
||||||
|
|
||||||
|
`mode`{ #critic-mode }
|
||||||
|
|
||||||
|
: :octicons-milestone-24: Default: `view` – This option defines how the markup
|
||||||
|
should be parsed, i.e. whether to just `view` all suggested changes, or
|
||||||
|
alternatively `accept` or `reject` them:
|
||||||
|
|
||||||
|
=== "View changes"
|
||||||
|
|
||||||
|
``` yaml
|
||||||
|
markdown_extensions:
|
||||||
|
- pymdownx.critic:
|
||||||
|
mode: view
|
||||||
|
```
|
||||||
|
|
||||||
|
=== "Accept changes"
|
||||||
|
|
||||||
|
``` yaml
|
||||||
|
markdown_extensions:
|
||||||
|
- pymdownx.critic:
|
||||||
|
mode: accept
|
||||||
|
```
|
||||||
|
|
||||||
|
=== "Reject changes"
|
||||||
|
|
||||||
|
``` yaml
|
||||||
|
markdown_extensions:
|
||||||
|
- pymdownx.critic:
|
||||||
|
mode: reject
|
||||||
|
```
|
||||||
|
|
||||||
|
See reference for usage:
|
||||||
|
|
||||||
|
- [Highlighting changes]
|
||||||
|
|
||||||
|
[Critic]: https://facelessuser.github.io/pymdown-extensions/extensions/critic/
|
||||||
|
[Critic support]: https://github.com/squidfunk/mkdocs-material/releases/tag/1.0.0
|
||||||
|
[Critic Markup]: https://github.com/CriticMarkup/CriticMarkup-toolkit
|
||||||
|
[Highlighting changes]: ../../reference/formatting.md#highlighting-changes
|
||||||
|
|
||||||
|
### Details
|
||||||
|
|
||||||
|
[:octicons-tag-24: 1.9.0][Details support] ·
|
||||||
|
[:octicons-workflow-24: Extension][Details]
|
||||||
|
|
||||||
|
The [Details] extension supercharges the [Admonition] extension, making the
|
||||||
|
resulting _call-outs_ collapsible, allowing them to be opened and closed by the
|
||||||
|
user. Enable it via `mkdocs.yml`:
|
||||||
|
|
||||||
|
``` yaml
|
||||||
|
markdown_extensions:
|
||||||
|
- pymdownx.details
|
||||||
|
```
|
||||||
|
|
||||||
|
No configuration options are available. See reference for usage:
|
||||||
|
|
||||||
|
- [Collapsible blocks]
|
||||||
|
|
||||||
|
[Details]: https://facelessuser.github.io/pymdown-extensions/extensions/details/
|
||||||
|
[Details support]: https://github.com/squidfunk/mkdocs-material/releases/tag/1.9.0
|
||||||
|
[Admonition]: python-markdown.md#admonition
|
||||||
|
[Collapsible blocks]: ../../reference/admonitions.md#collapsible-blocks
|
||||||
|
|
||||||
|
### Emoji
|
||||||
|
|
||||||
|
[:octicons-tag-24: 1.0.0][Emoji support] ·
|
||||||
|
[:octicons-workflow-24: Extension][Emoji]
|
||||||
|
|
||||||
|
The [Emoji] extension automatically inlines bundled and custom icons and emojis
|
||||||
|
in `*.svg` file format into the resulting HTML page. Enable it via `mkdocs.yml`:
|
||||||
|
|
||||||
|
``` yaml
|
||||||
|
markdown_extensions:
|
||||||
|
- pymdownx.emoji:
|
||||||
|
emoji_index: !!python/name:materialx.emoji.twemoji # (1)
|
||||||
|
emoji_generator: !!python/name:materialx.emoji.to_svg
|
||||||
|
```
|
||||||
|
|
||||||
|
1. [Python Markdown Extensions] uses the `pymdownx` namespace, but in order to
|
||||||
|
support the inlining of icons, the `materialx` namespace must be used, as it
|
||||||
|
extends the functionality of `pymdownx`.
|
||||||
|
|
||||||
|
The following configuration options are supported:
|
||||||
|
|
||||||
|
`emoji_index`{ #emoji-index }
|
||||||
|
|
||||||
|
: :octicons-milestone-24: Default: `emojione` – This option defines which set
|
||||||
|
of emojis is used for rendering. Note that the use of `emojione` is not
|
||||||
|
recommended due to [restrictions in licensing][Emoji index]:
|
||||||
|
|
||||||
|
``` yaml
|
||||||
|
markdown_extensions:
|
||||||
|
- pymdownx.emoji:
|
||||||
|
emoji_index: !!python/name:materialx.emoji.twemoji
|
||||||
|
```
|
||||||
|
|
||||||
|
`emoji_generator`{ #emoji-generator }
|
||||||
|
|
||||||
|
: :octicons-milestone-24: Default: `to_png` – This option defines how the
|
||||||
|
resolved emoji or icon shortcode is render. Note that icons can only be
|
||||||
|
used together with the `to_svg` configuration:
|
||||||
|
|
||||||
|
``` yaml
|
||||||
|
markdown_extensions:
|
||||||
|
- pymdownx.emoji:
|
||||||
|
emoji_generator: !!python/name:materialx.emoji.to_svg
|
||||||
|
```
|
||||||
|
|
||||||
|
`options.custom_icons`{ #custom-icons }
|
||||||
|
|
||||||
|
: :octicons-milestone-24: Default: _none_ – This option allows to list folders
|
||||||
|
with additional icon sets to be used in Markdown or `mkdocs.yml`, which is
|
||||||
|
explained in more detail in the [icon customization guide]:
|
||||||
|
|
||||||
|
``` yaml
|
||||||
|
markdown_extensions:
|
||||||
|
- pymdownx.emoji:
|
||||||
|
emoji_index: !!python/name:materialx.emoji.twemoji
|
||||||
|
emoji_generator: !!python/name:materialx.emoji.to_svg
|
||||||
|
options:
|
||||||
|
custom_icons:
|
||||||
|
- overrides/.icons
|
||||||
|
```
|
||||||
|
|
||||||
|
The other configuration options of this extension are not officially supported
|
||||||
|
by Material for MkDocs, which is why they may yield unexpected results. Use
|
||||||
|
them at your own risk.
|
||||||
|
|
||||||
|
See reference for usage:
|
||||||
|
|
||||||
|
- [Using emojis]
|
||||||
|
- [Using icons]
|
||||||
|
- [Using icons in templates]
|
||||||
|
|
||||||
|
[Emoji]: https://facelessuser.github.io/pymdown-extensions/extensions/emoji/
|
||||||
|
[Emoji support]: https://github.com/squidfunk/mkdocs-material/releases/tag/1.0.0
|
||||||
|
[Emoji index]: https://facelessuser.github.io/pymdown-extensions/extensions/emoji/#default-emoji-indexes
|
||||||
|
[icon customization guide]: ../changing-the-logo-and-icons.md#additional-icons
|
||||||
|
[Using emojis]: ../../reference/icons-emojis.md#using-emojis
|
||||||
|
[Using icons]: ../../reference/icons-emojis.md#using-icons
|
||||||
|
[Using icons in templates]: ../../reference/icons-emojis.md#using-icons-in-templates
|
||||||
|
|
||||||
|
### Highlight
|
||||||
|
|
||||||
|
[:octicons-tag-24: 5.0.0][Highlight support] ·
|
||||||
|
[:octicons-workflow-24: Extension][Highlight] ·
|
||||||
|
:octicons-zap-24: Supersedes [CodeHilite]
|
||||||
|
|
||||||
|
The [Highlight] extension adds support for syntax highlighting of code blocks
|
||||||
|
(with the help of [SuperFences][pymdownx.superfences]) and inline code blocks
|
||||||
|
(with the help of [InlineHilite][pymdownx.inlinehilite]). Enable it via
|
||||||
|
`mkdocs.yml`:
|
||||||
|
|
||||||
|
``` yaml
|
||||||
|
markdown_extensions:
|
||||||
|
- pymdownx.highlight
|
||||||
|
- pymdownx.superfences # (1)
|
||||||
|
```
|
||||||
|
|
||||||
|
1. [Highlight] is used by the [SuperFences][pymdownx.superfences] extension to
|
||||||
|
perform syntax highlighting on code blocks, not the other way round, which
|
||||||
|
is why this extension also needs to be enabled.
|
||||||
|
|
||||||
|
The following configuration options are supported:
|
||||||
|
|
||||||
|
`use_pygments`{ #highlight-use-pygments }
|
||||||
|
|
||||||
|
: :octicons-milestone-24: Default: `true` – This option allows to control
|
||||||
|
whether highlighting should be carried out during build time using
|
||||||
|
[Pygments] or in the browser with a JavaScript syntax highlighter:
|
||||||
|
|
||||||
|
=== "Pygments"
|
||||||
|
|
||||||
|
``` yaml
|
||||||
|
markdown_extensions:
|
||||||
|
- pymdownx.highlight:
|
||||||
|
use_pygments: true
|
||||||
|
- pymdownx.superfences
|
||||||
|
```
|
||||||
|
|
||||||
|
=== "JavaScript"
|
||||||
|
|
||||||
|
``` yaml
|
||||||
|
markdown_extensions:
|
||||||
|
- pymdownx.highlight:
|
||||||
|
use_pygments: false
|
||||||
|
```
|
||||||
|
|
||||||
|
As an example, [Highlight.js], a JavaScript syntax highlighter, can be
|
||||||
|
integrated with some [additional JavaScript] and [CSS][additional CSS]
|
||||||
|
in `mkdocs.yml`:
|
||||||
|
|
||||||
|
=== ":octicons-file-code-16: docs/javascripts/highlight.js"
|
||||||
|
|
||||||
|
``` js
|
||||||
|
document$.subscribe(() => {
|
||||||
|
hljs.highlightAll()
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
=== ":octicons-file-code-16: mkdocs.yml"
|
||||||
|
|
||||||
|
``` yaml
|
||||||
|
extra_javascript:
|
||||||
|
- https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js
|
||||||
|
- javascripts/highlight.js
|
||||||
|
extra_css:
|
||||||
|
- https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/default.min.css
|
||||||
|
```
|
||||||
|
|
||||||
|
Note that [Highlight.js] has no affiliation with the Highlight extension.
|
||||||
|
|
||||||
|
`linenums`{ #highlight-linenums }
|
||||||
|
|
||||||
|
: :octicons-milestone-24: Default: `false` – This option will add line numbers
|
||||||
|
to _all_ code blocks. If you wish to add line numbers to _some_, but not all
|
||||||
|
code blocks, consult the section on [adding line numbers][Adding line
|
||||||
|
numbers] in the code block reference, which also contains some tips on
|
||||||
|
working with line numbers:
|
||||||
|
|
||||||
|
``` yaml
|
||||||
|
markdown_extensions:
|
||||||
|
- pymdownx.highlight:
|
||||||
|
linenums: true
|
||||||
|
```
|
||||||
|
|
||||||
|
`linenums_style`{ #highlight-linenums-style }
|
||||||
|
|
||||||
|
: :octicons-milestone-24: Default: `table` – The [Highlight] extension
|
||||||
|
provides three ways to add line numbers, all of which are supported by
|
||||||
|
Material for MkDocs. While `table` wraps a code block in a table, `inline`
|
||||||
|
and `pymdownx-inline` render line numbers as part of the line itself:
|
||||||
|
|
||||||
|
``` yaml
|
||||||
|
markdown_extensions:
|
||||||
|
- pymdownx.highlight:
|
||||||
|
linenums_style: pymdownx-inline
|
||||||
|
```
|
||||||
|
|
||||||
|
Note that `inline` will put line numbers next to the actual code, which
|
||||||
|
means that they will be included when selecting text with the cursor or
|
||||||
|
copying a code block to the clipboard. Thus, the usage of either `table`
|
||||||
|
or `pymdownx-inline` is recommended.
|
||||||
|
|
||||||
|
The other configuration options of this extension are not officially supported
|
||||||
|
by Material for MkDocs, which is why they may yield unexpected results. Use
|
||||||
|
them at your own risk.
|
||||||
|
|
||||||
|
See reference for usage:
|
||||||
|
|
||||||
|
- [Specifying the language]
|
||||||
|
- [Adding line numbers]
|
||||||
|
- [Highlighting specific lines]
|
||||||
|
- [Custom syntax theme]
|
||||||
|
|
||||||
|
[Highlight]: https://facelessuser.github.io/pymdown-extensions/extensions/highlight/
|
||||||
|
[Highlight support]: https://github.com/squidfunk/mkdocs-material/releases/tag/5.0.0
|
||||||
|
[CodeHilite]: python-markdown.md#codehilite
|
||||||
|
[pymdownx.superfences]: #superfences
|
||||||
|
[pymdownx.inlinehilite]: #inlinehilite
|
||||||
|
[Pygments]: https://pygments.org
|
||||||
|
[additional CSS]: ../../customization.md#additional-css
|
||||||
|
[Highlight.js]: https://highlightjs.org/
|
||||||
|
[Adding line numbers]: ../../reference/code-blocks.md#adding-line-numbers
|
||||||
|
[Specifying the language]: ../../reference/code-blocks.md#specifying-the-language
|
||||||
|
[Highlighting specific lines]: ../../reference/code-blocks.md#highlighting-specific-lines
|
||||||
|
[Custom syntax theme]: ../../reference/code-blocks.md#custom-syntax-theme
|
||||||
|
|
||||||
|
### InlineHilite
|
||||||
|
|
||||||
|
[:octicons-tag-24: 5.0.0][InlineHilite support] ·
|
||||||
|
[:octicons-workflow-24: Extension][InlineHilite]
|
||||||
|
|
||||||
|
The [InlineHilite] extension add support for syntax highlighting of inline code
|
||||||
|
blocks. It's built on top of the [Highlight][pymdownx.highlight] extension, from
|
||||||
|
which it sources its configuration. Enable it via `mkdocs.yml`:
|
||||||
|
|
||||||
|
``` yaml
|
||||||
|
markdown_extensions:
|
||||||
|
- pymdownx.highlight
|
||||||
|
- pymdownx.inlinehilite
|
||||||
|
```
|
||||||
|
|
||||||
|
The configuration options of this extension are not specific to Material for
|
||||||
|
MkDocs, as they only impact the Markdown parsing stage. The only exception is
|
||||||
|
the [`css_class`][InlineHilite options] option, which must not be changed. See the
|
||||||
|
[InlineHilite documentation][InlineHilite] for guidance.
|
||||||
|
|
||||||
|
See reference for usage:
|
||||||
|
|
||||||
|
- [Highlighting inline code blocks]
|
||||||
|
|
||||||
|
[InlineHilite]: https://facelessuser.github.io/pymdown-extensions/extensions/inlinehilite/
|
||||||
|
[InlineHilite support]: https://github.com/squidfunk/mkdocs-material/releases/tag/5.0.0
|
||||||
|
[InlineHilite options]: https://facelessuser.github.io/pymdown-extensions/extensions/inlinehilite/#options
|
||||||
|
[pymdownx.highlight]: #highlight
|
||||||
|
[Highlighting inline code blocks]: ../../reference/code-blocks.md#highlighting-inline-code-blocks
|
||||||
|
|
||||||
|
### Keys
|
||||||
|
|
||||||
|
[:octicons-tag-24: 1.0.0][Keys support] ·
|
||||||
|
[:octicons-workflow-24: Extension][Keys]
|
||||||
|
|
||||||
|
The [Keys] extension adds a simple syntax to allow for the rendering of keyboard
|
||||||
|
keys and combinations, e.g. ++ctrl+alt+del++. Enable it via `mkdocs.yml`:
|
||||||
|
|
||||||
|
``` yaml
|
||||||
|
markdown_extensions:
|
||||||
|
- pymdownx.keys
|
||||||
|
```
|
||||||
|
|
||||||
|
The configuration options of this extension are not specific to Material for
|
||||||
|
MkDocs, as they only impact the Markdown parsing stage. The only exception is
|
||||||
|
the [`class`][Keys options] option, which must not be changed. See the
|
||||||
|
[Keys documentation][Keys] for more information.
|
||||||
|
|
||||||
|
See reference for usage:
|
||||||
|
|
||||||
|
- [Adding keyboard keys]
|
||||||
|
|
||||||
|
[Keys]: https://facelessuser.github.io/pymdown-extensions/extensions/keys/
|
||||||
|
[Keys support]: https://github.com/squidfunk/mkdocs-material/releases/tag/1.0.0
|
||||||
|
[Keys options]: https://facelessuser.github.io/pymdown-extensions/extensions/keys/#options
|
||||||
|
[Adding keyboard keys]: ../../reference/formatting.md#adding-keyboard-keys
|
||||||
|
|
||||||
|
### SmartSymbols
|
||||||
|
|
||||||
|
[:octicons-tag-24: 0.1.0][SmartSymbols support] ·
|
||||||
|
[:octicons-workflow-24: Extension][SmartSymbols]
|
||||||
|
|
||||||
|
The [SmartSymbols] extension converts some sequences of characters into their
|
||||||
|
corresponding symbols, e.h. copyright symbols or fractions. Enable it via
|
||||||
|
`mkdocs.yml`:
|
||||||
|
|
||||||
|
``` yaml
|
||||||
|
markdown_extensions:
|
||||||
|
- pymdownx.smartsymbols
|
||||||
|
```
|
||||||
|
|
||||||
|
The configuration options of this extension are not specific to Material for
|
||||||
|
MkDocs, as they only impact the Markdown parsing stage. See the [SmartSymbols
|
||||||
|
documentation][SmartSymbols] for guidance.
|
||||||
|
|
||||||
|
[SmartSymbols]: https://facelessuser.github.io/pymdown-extensions/extensions/smartsymbols/
|
||||||
|
[SmartSymbols support]: https://github.com/squidfunk/mkdocs-material/releases/tag/0.1.0
|
||||||
|
|
||||||
|
### Snippets
|
||||||
|
|
||||||
|
[:octicons-tag-24: 0.1.0][Snippets support] ·
|
||||||
|
[:octicons-workflow-24: Extension][Snippets]
|
||||||
|
|
||||||
|
The [Snippets] extension adds the ability to embed content from arbitrary files
|
||||||
|
into a document, including other documents or source files, by using a simple
|
||||||
|
syntax. Enable it via `mkdocs.yml`:
|
||||||
|
|
||||||
|
``` yaml
|
||||||
|
markdown_extensions:
|
||||||
|
- pymdownx.snippets
|
||||||
|
```
|
||||||
|
|
||||||
|
The configuration options of this extension are not specific to Material for
|
||||||
|
MkDocs, as they only impact the Markdown parsing stage. See the [Snippets
|
||||||
|
documentation][Snippets] for more information.
|
||||||
|
|
||||||
|
See reference for usage:
|
||||||
|
|
||||||
|
- [Adding a glossary]
|
||||||
|
- [Embedding external files]
|
||||||
|
|
||||||
|
[Snippets]: https://facelessuser.github.io/pymdown-extensions/extensions/snippets/
|
||||||
|
[Snippets support]: https://github.com/squidfunk/mkdocs-material/releases/tag/0.1.0
|
||||||
|
[Adding a glossary]: ../../reference/abbreviations.md#adding-a-glossary
|
||||||
|
[Embedding external files]: ../../reference/code-blocks.md#embedding-external-files
|
||||||
|
|
||||||
|
### SuperFences
|
||||||
|
|
||||||
|
[:octicons-tag-24: 0.1.0][SuperFences support] ·
|
||||||
|
[:octicons-workflow-24: Extension][SuperFences] ·
|
||||||
|
:octicons-zap-24: Supersedes [Fenced Code Blocks]
|
||||||
|
|
||||||
|
The [SuperFences] extension allows for arbitrary nesting of code and content
|
||||||
|
blocks inside each other, including admonitions, tabs, lists and all other
|
||||||
|
elements. Enable it via `mkdocs.yml`:
|
||||||
|
|
||||||
|
``` yaml
|
||||||
|
markdown_extensions:
|
||||||
|
- pymdownx.superfences
|
||||||
|
```
|
||||||
|
|
||||||
|
The following configuration options are supported:
|
||||||
|
|
||||||
|
`custom_fences`{ #superfences-custom-fences }
|
||||||
|
|
||||||
|
: :octicons-milestone-24: Default: _none_ – This option allows to define a
|
||||||
|
handler for custom fences, e.g. to preserve the definitions of [Mermaid.js]
|
||||||
|
diagrams to be interpreted in the browser:
|
||||||
|
|
||||||
|
``` yaml
|
||||||
|
markdown_extensions:
|
||||||
|
- pymdownx.superfences:
|
||||||
|
custom_fences:
|
||||||
|
- name: mermaid
|
||||||
|
class: mermaid
|
||||||
|
format: !!python/name:pymdownx.superfences.fence_code_format
|
||||||
|
```
|
||||||
|
|
||||||
|
Note that this will primarily prevent syntax highlighting from being
|
||||||
|
applied. See the reference on [diagrams] to learn how Mermaid.js is
|
||||||
|
integrated with Material for MkDocs.
|
||||||
|
|
||||||
|
The other configuration options of this extension are not officially supported
|
||||||
|
by Material for MkDocs, which is why they may yield unexpected results. Use
|
||||||
|
them at your own risk.
|
||||||
|
|
||||||
|
See reference for usage:
|
||||||
|
|
||||||
|
- [Using flowcharts]
|
||||||
|
- [Using sequence diagrams]
|
||||||
|
- [Using state diagrams]
|
||||||
|
- [Using class diagrams]
|
||||||
|
- [Using entity-relationship diagrams]
|
||||||
|
|
||||||
|
[SuperFences]: https://facelessuser.github.io/pymdown-extensions/extensions/superfences/
|
||||||
|
[SuperFences support]: https://github.com/squidfunk/mkdocs-material/releases/tag/0.1.0
|
||||||
|
[Fenced Code Blocks]: python-markdown.md#fenced-code-blocks
|
||||||
|
[Mermaid.js]: https://mermaid-js.github.io/mermaid/
|
||||||
|
[diagrams]: ../../reference/diagrams.md
|
||||||
|
[Using flowcharts]: ../../reference/diagrams.md#using-flowcharts
|
||||||
|
[Using sequence diagrams]: ../../reference/diagrams.md#using-sequence-diagrams
|
||||||
|
[Using state diagrams]: ../../reference/diagrams.md#using-state-diagrams
|
||||||
|
[Using class diagrams]: ../../reference/diagrams.md#using-class-diagrams
|
||||||
|
[Using entity-relationship diagrams]: ../../reference/diagrams.md#using-entity-relationship-diagrams
|
||||||
|
|
||||||
|
### Tabbed
|
||||||
|
|
||||||
|
[:octicons-tag-24: 5.0.0][Tabbed support] ·
|
||||||
|
[:octicons-workflow-24: Extension][Tabbed]
|
||||||
|
|
||||||
|
The [Tabbed] extension allows the usage of content tabs, a simple way to group
|
||||||
|
related content and code blocks under accessible tabs. Enable it via
|
||||||
|
`mkdocs.yml`:
|
||||||
|
|
||||||
|
``` yaml
|
||||||
|
markdown_extensions:
|
||||||
|
- pymdownx.tabbed:
|
||||||
|
alternate_style: true
|
||||||
|
```
|
||||||
|
|
||||||
|
The following configuration options are supported:
|
||||||
|
|
||||||
|
`alternate_style`{ #tabbed-alternate-style }
|
||||||
|
|
||||||
|
: :octicons-milestone-24: Default: `false` · [:octicons-tag-24: 7.3.1]
|
||||||
|
[Tabbed alternate support] – This option enables the [alternate style] of
|
||||||
|
content tabs, which has [better behavior on mobile viewports], and thus
|
||||||
|
is strongly recommended:
|
||||||
|
|
||||||
|
``` yaml
|
||||||
|
markdown_extensions:
|
||||||
|
- pymdownx.tabbed:
|
||||||
|
alternate_style: true
|
||||||
|
```
|
||||||
|
|
||||||
|
The other configuration options of this extension are not officially supported
|
||||||
|
by Material for MkDocs, which is why they may yield unexpected results. Use
|
||||||
|
them at your own risk.
|
||||||
|
|
||||||
|
See reference for usage:
|
||||||
|
|
||||||
|
- [Grouping code blocks]
|
||||||
|
- [Grouping other content]
|
||||||
|
- [Embedded content]
|
||||||
|
|
||||||
|
[Tabbed]: https://facelessuser.github.io/pymdown-extensions/extensions/tabbed/
|
||||||
|
[Tabbed support]: https://github.com/squidfunk/mkdocs-material/releases/tag/5.0.0
|
||||||
|
[Tabbed alternate support]: https://github.com/squidfunk/mkdocs-material/releases/tag/7.3.1
|
||||||
|
[alternate style]: https://facelessuser.github.io/pymdown-extensions/extensions/tabbed/#alternate-style
|
||||||
|
[better behavior on mobile viewports]: https://twitter.com/squidfunk/status/1424740370596958214
|
||||||
|
[Grouping code blocks]: ../../reference/content-tabs.md#grouping-code-blocks
|
||||||
|
[Grouping other content]: ../../reference/content-tabs.md#grouping-other-content
|
||||||
|
[Embedded content]: ../../reference/content-tabs.md#embedded-content
|
||||||
|
|
||||||
|
### Tasklist
|
||||||
|
|
||||||
|
[:octicons-tag-24: 1.0.0][Tasklist support] ·
|
||||||
|
[:octicons-workflow-24: Extension][Tasklist]
|
||||||
|
|
||||||
|
The [Tasklist] extension allows for the usage of [GitHub Flavored Markdown]
|
||||||
|
inspired [task lists][Tasklist specification], following the same syntactical
|
||||||
|
conventions. Enable it via `mkdocs.yml`:
|
||||||
|
|
||||||
|
``` yaml
|
||||||
|
markdown_extensions:
|
||||||
|
- pymdownx.tasklist:
|
||||||
|
custom_checkbox: true
|
||||||
|
```
|
||||||
|
|
||||||
|
The following configuration options are supported:
|
||||||
|
|
||||||
|
`custom_checkbox`{ #tasklist-custom-checkbox }
|
||||||
|
|
||||||
|
: :octicons-milestone-24: Default: `false` · This option toggles the rendering
|
||||||
|
style of checkboxes, replacing native checkbox styles with beautiful icons,
|
||||||
|
and is therefore recommended:
|
||||||
|
|
||||||
|
``` yaml
|
||||||
|
markdown_extensions:
|
||||||
|
- pymdownx.tasklist:
|
||||||
|
custom_checkbox: true
|
||||||
|
```
|
||||||
|
|
||||||
|
`clickable_checkbox`{ #tasklist-clickable-checkbox }
|
||||||
|
|
||||||
|
: :octicons-milestone-24: Default: `false` · This option toggles whether
|
||||||
|
checkboxes are clickable. As the state is not persisted, the use of this
|
||||||
|
option is _rather discouraged_ from a user experience perspective:
|
||||||
|
|
||||||
|
``` yaml
|
||||||
|
markdown_extensions:
|
||||||
|
- pymdownx.tasklist:
|
||||||
|
clickable_checkbox: true
|
||||||
|
```
|
||||||
|
|
||||||
|
The other configuration options of this extension are not officially supported
|
||||||
|
by Material for MkDocs, which is why they may yield unexpected results. Use
|
||||||
|
them at your own risk.
|
||||||
|
|
||||||
|
See reference for usage:
|
||||||
|
|
||||||
|
- [Using task lists]
|
||||||
|
|
||||||
|
[Tasklist]: https://facelessuser.github.io/pymdown-extensions/extensions/tasklist/
|
||||||
|
[Tasklist support]: https://github.com/squidfunk/mkdocs-material/releases/tag/1.0.0
|
||||||
|
[GitHub Flavored Markdown]: https://github.github.com/gfm/
|
||||||
|
[Tasklist specification]: https://github.github.com/gfm/#task-list-items-extension-
|
||||||
|
[Using task lists]: ../../reference/lists.md#using-task-lists
|
348
docs/setup/extensions/python-markdown.md
Normal file
348
docs/setup/extensions/python-markdown.md
Normal file
@ -0,0 +1,348 @@
|
|||||||
|
---
|
||||||
|
template: overrides/main.html
|
||||||
|
---
|
||||||
|
|
||||||
|
# Python Markdown
|
||||||
|
|
||||||
|
Material for MkDocs supports a large number of [Python Markdown] extensions,
|
||||||
|
which is part of what makes it so attractive for technical writing. Following
|
||||||
|
is a list of all supported extensions, linking to the relevant sections of the
|
||||||
|
reference for which features they need to be enabled.
|
||||||
|
|
||||||
|
[Python Markdown]: https://python-markdown.github.io/
|
||||||
|
|
||||||
|
## Supported extensions
|
||||||
|
|
||||||
|
### Abbreviations
|
||||||
|
|
||||||
|
[:octicons-tag-24: 1.0.0][Abbreviations support] ·
|
||||||
|
[:octicons-workflow-24: Extension][Abbreviations]
|
||||||
|
|
||||||
|
The [Abbreviations] extension adds the ability to add a small tooltip to an
|
||||||
|
element, by wrapping it with an `abbr` tag. Only plain text (no markup) is
|
||||||
|
supported. Enable it via `mkdocs.yml`:
|
||||||
|
|
||||||
|
``` yaml
|
||||||
|
markdown_extensions:
|
||||||
|
- abbr
|
||||||
|
```
|
||||||
|
|
||||||
|
No configuration options are available. See reference for usage:
|
||||||
|
|
||||||
|
- [Adding abbreviations]
|
||||||
|
- [Adding a glossary]
|
||||||
|
|
||||||
|
[Abbreviations]: https://python-markdown.github.io/extensions/abbreviations/
|
||||||
|
[Abbreviations support]: https://github.com/squidfunk/mkdocs-material/releases/tag/1.0.0
|
||||||
|
[Adding abbreviations]: ../../reference/abbreviations.md#adding-abbreviations
|
||||||
|
[Adding a glossary]: ../../reference/abbreviations.md#adding-a-glossary
|
||||||
|
|
||||||
|
### Admonition
|
||||||
|
|
||||||
|
[:octicons-tag-24: 0.1.0][Admonition support] ·
|
||||||
|
[:octicons-workflow-24: Extension][Admonition]
|
||||||
|
|
||||||
|
The [Admonition] extension adds support for admonitions, more commonly known as
|
||||||
|
_call-outs_, which can be defined in Markdown by using a simple syntax. Enable
|
||||||
|
it via `mkdocs.yml`:
|
||||||
|
|
||||||
|
``` yaml
|
||||||
|
markdown_extensions:
|
||||||
|
- admonition
|
||||||
|
```
|
||||||
|
|
||||||
|
No configuration options are available. See reference for usage:
|
||||||
|
|
||||||
|
- [Adding admonitions]
|
||||||
|
- [Changing the title]
|
||||||
|
- [Removing the title]
|
||||||
|
- [Supported types]
|
||||||
|
|
||||||
|
[Admonition]: https://python-markdown.github.io/extensions/admonition/
|
||||||
|
[Admonition support]: https://github.com/squidfunk/mkdocs-material/releases/tag/0.1.0
|
||||||
|
[Adding admonitions]: ../../reference/admonitions.md#usage
|
||||||
|
[Changing the title]: ../../reference/admonitions.md#changing-the-title
|
||||||
|
[Removing the title]: ../../reference/admonitions.md#removing-the-title
|
||||||
|
[Supported types]: ../../reference/admonitions.md#supported-types
|
||||||
|
|
||||||
|
### Attribute Lists
|
||||||
|
|
||||||
|
[:octicons-tag-24: 0.1.0][Attribute Lists support] ·
|
||||||
|
[:octicons-workflow-24: Extension][Attribute Lists]
|
||||||
|
|
||||||
|
The [Attribute Lists] extension allows to add HTML attributes and CSS classes
|
||||||
|
to [almost every][Attribute Lists limitations] Markdown inline- and block-level
|
||||||
|
element with a special syntax. Enable it via `mkdocs.yml`:
|
||||||
|
|
||||||
|
``` yaml
|
||||||
|
markdown_extensions:
|
||||||
|
- attr_list
|
||||||
|
```
|
||||||
|
|
||||||
|
No configuration options are available. See reference for usage:
|
||||||
|
|
||||||
|
- [Adding buttons]
|
||||||
|
- [Adding icons with colors]
|
||||||
|
- [Image alignment]
|
||||||
|
- [Image lazy-loading]
|
||||||
|
|
||||||
|
[Attribute Lists]: https://python-markdown.github.io/extensions/attr_list/
|
||||||
|
[Attribute Lists support]: https://github.com/squidfunk/mkdocs-material/releases/tag/0.1.0
|
||||||
|
[Attribute Lists limitations]: https://python-markdown.github.io/extensions/attr_list/#limitations
|
||||||
|
[Adding buttons]: ../../reference/buttons.md#adding-buttons
|
||||||
|
[Adding icons with colors]: ../../reference/buttons.md#with-colors
|
||||||
|
[Image alignment]: ../../reference/images.md#image-alignment
|
||||||
|
[Image lazy-loading]: ../../reference/images.md#image-lazy-loading
|
||||||
|
|
||||||
|
### Definition Lists
|
||||||
|
|
||||||
|
[:octicons-tag-24: 1.1.0][Definition Lists support] ·
|
||||||
|
[:octicons-workflow-24: Extension][Definition Lists]
|
||||||
|
|
||||||
|
The [Definition Lists] extension adds the ability to add definition lists (more
|
||||||
|
commonly known as [description lists] – `dl` in HTML) via Markdown to a
|
||||||
|
document. Enable it via `mkdocs.yml`:
|
||||||
|
|
||||||
|
``` yaml
|
||||||
|
markdown_extensions:
|
||||||
|
- def_list
|
||||||
|
```
|
||||||
|
|
||||||
|
No configuration options are available. See reference for usage:
|
||||||
|
|
||||||
|
- [Using definition lists]
|
||||||
|
|
||||||
|
[Definition Lists]: https://python-markdown.github.io/extensions/definition_lists/
|
||||||
|
[Definition Lists support]: https://github.com/squidfunk/mkdocs-material/releases/tag/1.1.0
|
||||||
|
[description lists]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl
|
||||||
|
[Using definition lists]: ../../reference/lists.md#using-definition-lists
|
||||||
|
|
||||||
|
### Footnotes
|
||||||
|
|
||||||
|
[:octicons-tag-24: 1.0.0][Footnotes support] ·
|
||||||
|
[:octicons-workflow-24: Extension][Footnotes]
|
||||||
|
|
||||||
|
The [Footnotes] extension allows to define inline footnotes, which are then
|
||||||
|
rendered below all Markdown content of a document. Enable it via `mkdocs.yml`:
|
||||||
|
|
||||||
|
``` yaml
|
||||||
|
markdown_extensions:
|
||||||
|
- footnotes
|
||||||
|
```
|
||||||
|
|
||||||
|
No configuration options are supported. See reference for usage:
|
||||||
|
|
||||||
|
- [Adding footnote references]
|
||||||
|
- [Adding footnote content]
|
||||||
|
|
||||||
|
[Footnotes]: https://python-markdown.github.io/extensions/footnotes/
|
||||||
|
[Footnotes support]: https://github.com/squidfunk/mkdocs-material/releases/tag/1.0.0
|
||||||
|
[Adding footnote references]: ../../reference/footnotes.md#adding-footnote-references
|
||||||
|
[Adding footnote content]: ../../reference/footnotes.md#adding-footnote-content
|
||||||
|
|
||||||
|
### Metadata
|
||||||
|
|
||||||
|
[:octicons-tag-24: 1.0.0][Metadata support] ·
|
||||||
|
[:octicons-workflow-24: Extension][Metadata]
|
||||||
|
|
||||||
|
The [Metadata] extension adds the ability to attach arbitrary key-value pairs
|
||||||
|
to a document via front matter written in YAML syntax before the Markdown.
|
||||||
|
Enable it via `mkdocs.yml`:
|
||||||
|
|
||||||
|
``` yaml
|
||||||
|
markdown_extensions:
|
||||||
|
- meta
|
||||||
|
```
|
||||||
|
|
||||||
|
No configuration options are available. See reference for usage:
|
||||||
|
|
||||||
|
- [Setting the page title]
|
||||||
|
- [Setting the page description]
|
||||||
|
- [Hiding the sidebars]
|
||||||
|
- [Adding tags]
|
||||||
|
|
||||||
|
[Metadata]: https://python-markdown.github.io/extensions/meta_data/
|
||||||
|
[Metadata support]: https://github.com/squidfunk/mkdocs-material/releases/tag/1.0.0
|
||||||
|
[Setting the page title]: ../../reference/meta-tags.md#setting-the-page-title
|
||||||
|
[Setting the page description]: ../../reference/meta-tags.md#setting-the-page-description
|
||||||
|
[Hiding the sidebars]: ../../setup/setting-up-navigation.md#hiding-the-sidebars
|
||||||
|
[Adding tags]: ../../setup/setting-up-tags.md#adding-tags
|
||||||
|
|
||||||
|
### Markdown in HTML
|
||||||
|
|
||||||
|
[:octicons-tag-24: 0.1.0][Markdown in HTML support] ·
|
||||||
|
[:octicons-workflow-24: Extension][Markdown in HTML]
|
||||||
|
|
||||||
|
The [Markdown in HTML] extension allows for writing Markdown inside of HTML,
|
||||||
|
which is useful for wrapping Markdown content with custom elements. Enable it
|
||||||
|
via `mkdocs.yml`:
|
||||||
|
|
||||||
|
``` yaml
|
||||||
|
markdown_extensions:
|
||||||
|
- md_in_html
|
||||||
|
```
|
||||||
|
|
||||||
|
> By default, Markdown ignores any content within a raw HTML block-level
|
||||||
|
> element. With the `md_in_html` extension enabled, the content of a raw HTML
|
||||||
|
> block-level element can be parsed as Markdown by including a `markdown`
|
||||||
|
> attribute on the opening tag. The `markdown` attribute will be stripped from
|
||||||
|
> the output, while all other attributes will be preserved.
|
||||||
|
|
||||||
|
No configuration options are available. See reference for usage:
|
||||||
|
|
||||||
|
- [Image captions]
|
||||||
|
|
||||||
|
[Markdown in HTML]: https://python-markdown.github.io/extensions/md_in_html/
|
||||||
|
[Markdown in HTML support]: https://github.com/squidfunk/mkdocs-material/releases/tag/0.1.0
|
||||||
|
[Image captions]: ../../reference/images.md#image-captions
|
||||||
|
|
||||||
|
### Table of Contents
|
||||||
|
|
||||||
|
[:octicons-tag-24: 0.1.0][Table of Contents support] ·
|
||||||
|
[:octicons-workflow-24: Extension][Table of Contents]
|
||||||
|
|
||||||
|
The [Table of Contents] extension automatically generates a table of contents
|
||||||
|
from a document, which Material for MkDocs will render as part of the resulting
|
||||||
|
page. Enable it via `mkdocs.yml`:
|
||||||
|
|
||||||
|
``` yaml
|
||||||
|
markdown_extensions:
|
||||||
|
- toc:
|
||||||
|
permalink: true
|
||||||
|
```
|
||||||
|
|
||||||
|
The following configuration options are supported:
|
||||||
|
|
||||||
|
`permalink`{ #toc-permalink }
|
||||||
|
|
||||||
|
: :octicons-milestone-24: Default: `false` – This option adds an anchor link
|
||||||
|
containing the paragraph symbol `¶` or another custom symbol at the end of
|
||||||
|
each headline, exactly like on the page you're currently viewing, which
|
||||||
|
Material for MkDocs will make appear on hover:
|
||||||
|
|
||||||
|
=== "¶"
|
||||||
|
|
||||||
|
``` yaml
|
||||||
|
markdown_extensions:
|
||||||
|
- toc:
|
||||||
|
permalink: true
|
||||||
|
```
|
||||||
|
|
||||||
|
=== "⚓︎"
|
||||||
|
|
||||||
|
``` yaml
|
||||||
|
markdown_extensions:
|
||||||
|
- toc:
|
||||||
|
permalink: ⚓︎
|
||||||
|
```
|
||||||
|
|
||||||
|
`slugify`{ #toc-slugify }
|
||||||
|
|
||||||
|
: :octicons-milestone-24: Default: `headerid.slugify` – This option allows for
|
||||||
|
customization of the slug function. For some languages, the default may not
|
||||||
|
produce good and readable identifiers – consider using another slug function
|
||||||
|
like for example those from [Python Markdown Extensions][Slugs]:
|
||||||
|
|
||||||
|
=== "Unicode"
|
||||||
|
|
||||||
|
``` yaml
|
||||||
|
markdown_extensions:
|
||||||
|
- toc:
|
||||||
|
slugify: !!python/name:pymdownx.slugs.uslugify
|
||||||
|
```
|
||||||
|
|
||||||
|
=== "Unicode, case-sensitive"
|
||||||
|
|
||||||
|
``` yaml
|
||||||
|
markdown_extensions:
|
||||||
|
- toc:
|
||||||
|
slugify: !!python/name:pymdownx.slugs.uslugify_cased
|
||||||
|
```
|
||||||
|
|
||||||
|
`toc_depth`{ #toc-depth }
|
||||||
|
|
||||||
|
: :octicons-milestone-24: Default: `6` – Define the range of levels to be
|
||||||
|
included in the table of contents. This may be useful for project
|
||||||
|
documentation with deeply structured headings to decrease the length of the
|
||||||
|
table of contents, or to remove the table of contents altogether:
|
||||||
|
|
||||||
|
=== "Hide levels 4-6"
|
||||||
|
|
||||||
|
``` yaml
|
||||||
|
markdown_extensions:
|
||||||
|
- toc:
|
||||||
|
toc_depth: 3
|
||||||
|
```
|
||||||
|
|
||||||
|
=== "Hide table of contents"
|
||||||
|
|
||||||
|
``` yaml
|
||||||
|
markdown_extensions:
|
||||||
|
- toc:
|
||||||
|
toc_depth: 0
|
||||||
|
```
|
||||||
|
|
||||||
|
The other configuration options of this extension are not officially supported
|
||||||
|
by Material for MkDocs, which is why they may yield unexpected results. Use them at your
|
||||||
|
own risk.
|
||||||
|
|
||||||
|
[Table of Contents]: https://python-markdown.github.io/extensions/toc/
|
||||||
|
[Table of Contents support]: https://github.com/squidfunk/mkdocs-material/releases/tag/0.1.0
|
||||||
|
[Slugs]: https://facelessuser.github.io/pymdown-extensions/extras/slugs/
|
||||||
|
|
||||||
|
### Tables
|
||||||
|
|
||||||
|
[:octicons-tag-24: 0.1.0][Tables support] ·
|
||||||
|
[:octicons-workflow-24: Extension][Tables]
|
||||||
|
|
||||||
|
The [Tables] extension adds the ability to create tables in Markdown by using a
|
||||||
|
simple syntax. Enable it via `mkdocs.yml` (albeit it should be enabled by
|
||||||
|
default):
|
||||||
|
|
||||||
|
``` yaml
|
||||||
|
markdown_extensions:
|
||||||
|
- tables
|
||||||
|
```
|
||||||
|
|
||||||
|
No configuration options are available. See reference for usage:
|
||||||
|
|
||||||
|
- [Using data tables]
|
||||||
|
- [Column alignment]
|
||||||
|
|
||||||
|
[Tables]: https://python-markdown.github.io/extensions/tables/
|
||||||
|
[Tables support]: https://github.com/squidfunk/mkdocs-material/releases/tag/0.1.0
|
||||||
|
[Using data tables]: ../../reference/data-tables.md#using-data-tables
|
||||||
|
[Column alignment]: ../../reference/data-tables.md#column-alignment
|
||||||
|
|
||||||
|
## Superseded extensions
|
||||||
|
|
||||||
|
The following [Python Markdown] extensions are not (or might not be) supported
|
||||||
|
anymore, and are therefore not recommended for use. Instead, the alternatives
|
||||||
|
should be considered.
|
||||||
|
|
||||||
|
### Fenced Code Blocks
|
||||||
|
|
||||||
|
[:octicons-tag-24: 0.1.0][Fenced Code Blocks support] ·
|
||||||
|
[:octicons-workflow-24: Extension][Fenced Code Blocks]
|
||||||
|
|
||||||
|
Superseded by [SuperFences]. This extension might still work, but the
|
||||||
|
[SuperFences] extension is superior in many ways, as it allows for arbitrary
|
||||||
|
nesting, and is therefore recommended.
|
||||||
|
|
||||||
|
[Fenced Code Blocks]: https://python-markdown.github.io/extensions/fenced_code_blocks/
|
||||||
|
[Fenced Code Blocks support]: https://github.com/squidfunk/mkdocs-material/releases/tag/0.1.0
|
||||||
|
[SuperFences]: https://facelessuser.github.io/pymdown-extensions/extensions/superfences/
|
||||||
|
|
||||||
|
### CodeHilite
|
||||||
|
|
||||||
|
[:octicons-tag-24: 0.1.0 ... 5.5.14][CodeHilite support] ·
|
||||||
|
[:octicons-workflow-24: Extension][CodeHilite]
|
||||||
|
|
||||||
|
Superseded by [Highlight]. Support for CodeHilite was dropped in
|
||||||
|
:octicons-tag-24: 6.0.0, as [Highlight] has a better integration with other
|
||||||
|
essential extensions like [SuperFences] and [InlineHilite].
|
||||||
|
|
||||||
|
[CodeHilite]: https://python-markdown.github.io/extensions/code_hilite/
|
||||||
|
[CodeHilite support]: https://github.com/squidfunk/mkdocs-material/releases/tag/0.1.0
|
||||||
|
[Highlight]: https://facelessuser.github.io/pymdown-extensions/extensions/highlight/
|
||||||
|
[InlineHilite]: https://facelessuser.github.io/pymdown-extensions/extensions/inlinehilite/
|
@ -6,22 +6,23 @@ template: overrides/main.html
|
|||||||
|
|
||||||
A clear and concise navigation structure is an important aspect of good project
|
A clear and concise navigation structure is an important aspect of good project
|
||||||
documentation. Material for MkDocs provides a multitude of options to configure
|
documentation. Material for MkDocs provides a multitude of options to configure
|
||||||
the behavior of navigational elements, including [tabs][1] and [sections][2],
|
the behavior of navigational elements, including [tabs][navigation.tabs] and
|
||||||
and its flag-ship feature: [instant loading][3].
|
[sections][navigation.sections], and its flag-ship feature: [instant loading]
|
||||||
|
[navigation.instant].
|
||||||
|
|
||||||
[1]: #navigation-tabs
|
[navigation.tabs]: #navigation-tabs
|
||||||
[2]: #navigation-sections
|
[navigation.sections]: #navigation-sections
|
||||||
[3]: #instant-loading
|
[navigation.instant]: #instant-loading
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
### Instant loading
|
### Instant loading
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][4] ·
|
[:octicons-tag-24: 5.0.0][navigation.instant support] ·
|
||||||
:octicons-unlock-24: Feature flag
|
:octicons-unlock-24: Feature flag
|
||||||
|
|
||||||
When _instant loading_ is enabled, clicks on all internal links will be
|
When instant loading is enabled, clicks on all internal links will be
|
||||||
intercepted and dispatched via [XHR][5] without fully reloading the page. Add
|
intercepted and dispatched via [XHR] without fully reloading the page. Add
|
||||||
the following lines to `mkdocs.yml`:
|
the following lines to `mkdocs.yml`:
|
||||||
|
|
||||||
``` yaml
|
``` yaml
|
||||||
@ -31,23 +32,21 @@ theme:
|
|||||||
```
|
```
|
||||||
|
|
||||||
The resulting page is parsed and injected and all event handlers and components
|
The resulting page is parsed and injected and all event handlers and components
|
||||||
are rebound automatically. This means that __Material for MkDocs behaves like a
|
are rebound automatically, i.e., __Material for MkDocs now behaves like a Single
|
||||||
Single Page Application__, which is especially useful for large documentation
|
Page Application__. Now, the search index survives navigation, which is
|
||||||
sites that come with a massive search index, as the search index will now
|
especially useful for large documentation sites.
|
||||||
remain intact in-between document switches.
|
|
||||||
|
|
||||||
_Material for MkDocs is the only MkDocs theme offering this feature._
|
[navigation.instant support]: https://github.com/squidfunk/mkdocs-material/releases/tag/5.2.0
|
||||||
|
[XHR]: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
|
||||||
[4]: https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/javascripts/integrations/instant/index.ts
|
|
||||||
[5]: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
|
|
||||||
|
|
||||||
### Anchor tracking
|
### Anchor tracking
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][6] ·
|
[:octicons-heart-fill-24:{ .mdx-heart } Insiders][Insiders]{ .mdx-insiders } ·
|
||||||
|
[:octicons-tag-24: insiders-2.1.0][Insiders] ·
|
||||||
:octicons-unlock-24: Feature flag ·
|
:octicons-unlock-24: Feature flag ·
|
||||||
[:octicons-heart-fill-24:{ .mdx-heart } Insiders only][6]{ .mdx-insiders }
|
:octicons-beaker-24: Experimental
|
||||||
|
|
||||||
When _anchor tracking_ is enabled, the URL in the address bar is automatically
|
When anchor tracking is enabled, the URL in the address bar is automatically
|
||||||
updated with the active anchor as highlighted in the table of contents. Add the
|
updated with the active anchor as highlighted in the table of contents. Add the
|
||||||
following lines to `mkdocs.yml`:
|
following lines to `mkdocs.yml`:
|
||||||
|
|
||||||
@ -57,24 +56,25 @@ theme:
|
|||||||
- navigation.tracking
|
- navigation.tracking
|
||||||
```
|
```
|
||||||
|
|
||||||
[6]: ../insiders/index.md
|
[Insiders]: ../insiders/index.md
|
||||||
|
|
||||||
### Navigation tabs
|
### Navigation tabs
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][7] · :octicons-unlock-24: Feature flag
|
[:octicons-tag-24: 1.1.0][navigation.tabs support] ·
|
||||||
|
:octicons-unlock-24: Feature flag
|
||||||
|
|
||||||
When _tabs_ are enabled, top-level sections are rendered in a menu layer below
|
When tabs are enabled, top-level sections are rendered in a menu layer below
|
||||||
the header for viewports above `1220px`, but remain as-is on mobile.[^1] Add
|
the header for viewports above `1220px`, but remain as-is on mobile.[^1] Add
|
||||||
the following lines to `mkdocs.yml`:
|
the following lines to `mkdocs.yml`:
|
||||||
|
|
||||||
[^1]:
|
[^1]:
|
||||||
Prior to version 6.2, navigation tabs had a slightly different behavior.
|
Prior to :octicons-tag-24: 6.2.0, navigation tabs had a slightly different
|
||||||
All top-level pages (i.e. all top-level entries that directly refer to an
|
behavior. All top-level pages (i.e. all top-level entries directly
|
||||||
`*.md` file) defined inside the `nav` entry of `mkdocs.yml` were grouped
|
refefring to a `*.md` file) defined inside the `nav` entry of `mkdocs.yml`
|
||||||
under the first tab which received the title of the first page. This made
|
were grouped under the first tab which received the title of the first page.
|
||||||
it impossible to include a top-level page (or external link) as a tab item,
|
This made it impossible to include a top-level page (or external link) as a
|
||||||
as was reported in #1884 and #2072. From version 6.2 on, navigation tabs
|
tab item, as was reported in #1884 and #2072. From :octicons-tag-24: 6.2.0
|
||||||
include all top-level pages and sections.
|
on, navigation tabs include all top-level pages and sections.
|
||||||
|
|
||||||
``` yaml
|
``` yaml
|
||||||
theme:
|
theme:
|
||||||
@ -82,25 +82,25 @@ theme:
|
|||||||
- navigation.tabs
|
- navigation.tabs
|
||||||
```
|
```
|
||||||
|
|
||||||
=== "With tabs"
|
=== ":octicons-check-circle-fill-16: Enabled"
|
||||||
|
|
||||||
[![With tabs][8]][8]
|
[![navigation.tabs enabled]][navigation.tabs enabled]
|
||||||
|
|
||||||
=== "Without tabs"
|
=== ":octicons-skip-16: Disabled"
|
||||||
|
|
||||||
[![Without tabs][9]][9]
|
[![navigation.tabs disabled]][navigation.tabs disabled]
|
||||||
|
|
||||||
[7]: https://github.com/squidfunk/mkdocs-material/blob/master/src/partials/tabs.html
|
[navigation.tabs support]: https://github.com/squidfunk/mkdocs-material/releases/tag/1.1.0
|
||||||
[8]: ../assets/screenshots/navigation-tabs.png
|
[navigation.tabs enabled]: ../assets/screenshots/navigation-tabs.png
|
||||||
[9]: ../assets/screenshots/navigation.png
|
[navigation.tabs disabled]: ../assets/screenshots/navigation.png
|
||||||
|
|
||||||
#### Sticky navigation tabs
|
#### Sticky navigation tabs
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][10] ·
|
[:octicons-tag-24: 7.3.0][navigation.tabs.sticky support] ·
|
||||||
:octicons-unlock-24: Feature flag ·
|
:octicons-unlock-24: Feature flag ·
|
||||||
:octicons-beaker-24: Experimental
|
:octicons-beaker-24: Experimental
|
||||||
|
|
||||||
When _sticky tabs_ are enabled, navigation tabs will lock below the header and
|
When sticky tabs are enabled, navigation tabs will lock below the header and
|
||||||
always remain visible when scrolling down. Just add the following two feature
|
always remain visible when scrolling down. Just add the following two feature
|
||||||
flags to `mkdocs.yml`:
|
flags to `mkdocs.yml`:
|
||||||
|
|
||||||
@ -111,24 +111,24 @@ theme:
|
|||||||
- navigation.tabs.sticky
|
- navigation.tabs.sticky
|
||||||
```
|
```
|
||||||
|
|
||||||
=== "With sticky tabs"
|
=== ":octicons-check-circle-fill-16: Enabled"
|
||||||
|
|
||||||
[![With sticky tabs][11]][11]
|
[![navigation.tabs.sticky enabled]][navigation.tabs.sticky enabled]
|
||||||
|
|
||||||
=== "Without sticky tabs"
|
=== ":octicons-skip-16: Disabled"
|
||||||
|
|
||||||
[![Without sticky tabs][12]][12]
|
[![navigation.tabs.sticky disabled]][navigation.tabs.sticky disabled]
|
||||||
|
|
||||||
[10]: https://github.com/squidfunk/mkdocs-material/blob/master/src/partials/header.html
|
[navigation.tabs.sticky support]: https://github.com/squidfunk/mkdocs-material/releases/tag/7.3.0
|
||||||
[11]: ../assets/screenshots/navigation-tabs-sticky.png
|
[navigation.tabs.sticky enabled]: ../assets/screenshots/navigation-tabs.png
|
||||||
[12]: ../assets/screenshots/navigation-tabs-collapsed.png
|
[navigation.tabs.sticky disabled]: ../assets/screenshots/navigation.png
|
||||||
|
|
||||||
### Navigation sections
|
### Navigation sections
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][13] ·
|
[:octicons-tag-24: 6.2.0][navigation.sections support] ·
|
||||||
:octicons-unlock-24: Feature flag
|
:octicons-unlock-24: Feature flag
|
||||||
|
|
||||||
When _sections_ are enabled, top-level sections are rendered as groups in the
|
When sections are enabled, top-level sections are rendered as groups in the
|
||||||
sidebar for viewports above `1220px`, but remain as-is on mobile. Add the
|
sidebar for viewports above `1220px`, but remain as-is on mobile. Add the
|
||||||
following lines to `mkdocs.yml`:
|
following lines to `mkdocs.yml`:
|
||||||
|
|
||||||
@ -138,27 +138,29 @@ theme:
|
|||||||
- navigation.sections
|
- navigation.sections
|
||||||
```
|
```
|
||||||
|
|
||||||
=== "With sections"
|
=== ":octicons-check-circle-fill-16: Enabled"
|
||||||
|
|
||||||
[![With sections][14]][14]
|
[![navigation.sections enabled]][navigation.sections enabled]
|
||||||
|
|
||||||
=== "Without sections"
|
=== ":octicons-skip-16: Disabled"
|
||||||
|
|
||||||
[![Without sections][9]][9]
|
[![navigation.sections disabled]][navigation.sections disabled]
|
||||||
|
|
||||||
[13]: https://github.com/squidfunk/mkdocs-material/blob/master/src/partials/nav-item.html
|
[navigation.sections support]: https://github.com/squidfunk/mkdocs-material/releases/tag/6.2.0
|
||||||
[14]: ../assets/screenshots/navigation-sections.png
|
[navigation.sections enabled]: ../assets/screenshots/navigation-sections.png
|
||||||
|
[navigation.sections disabled]: ../assets/screenshots/navigation.png
|
||||||
|
|
||||||
Both feature flags, _tabs_ and _sections_, can be combined with each other. If
|
Both feature flags, [`navigation.tabs`][navigation.tabs] and
|
||||||
both feature flags are enabled, sections are rendered for level 2 navigation
|
[`navigation.sections`][navigation.sections], can be combined with each other.
|
||||||
|
If both feature flags are enabled, sections are rendered for level 2 navigation
|
||||||
items.
|
items.
|
||||||
|
|
||||||
### Navigation expansion
|
### Navigation expansion
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][13] ·
|
[:octicons-tag-24: 6.2.0][navigation.expand support] ·
|
||||||
:octicons-unlock-24: Feature flag
|
:octicons-unlock-24: Feature flag
|
||||||
|
|
||||||
When _expansion_ is enabled, the left sidebar will expand all collapsible
|
When expansion is enabled, the left sidebar will expand all collapsible
|
||||||
subsections by default, so the user doesn't have to open subsections manually.
|
subsections by default, so the user doesn't have to open subsections manually.
|
||||||
Add the following lines to `mkdocs.yml`:
|
Add the following lines to `mkdocs.yml`:
|
||||||
|
|
||||||
@ -168,23 +170,25 @@ theme:
|
|||||||
- navigation.expand
|
- navigation.expand
|
||||||
```
|
```
|
||||||
|
|
||||||
=== "With expansion"
|
=== ":octicons-check-circle-fill-16: Enabled"
|
||||||
|
|
||||||
[![With expansion][15]][15]
|
[![navigation.expand enabled]][navigation.expand enabled]
|
||||||
|
|
||||||
=== "Without expansion"
|
=== ":octicons-skip-16: Disabled"
|
||||||
|
|
||||||
[![Without expansion][9]][9]
|
[![navigation.expand disabled]][navigation.expand disabled]
|
||||||
|
|
||||||
[15]: ../assets/screenshots/navigation-expand.png
|
[navigation.expand support]: https://github.com/squidfunk/mkdocs-material/releases/tag/6.2.0
|
||||||
|
[navigation.expand enabled]: ../assets/screenshots/navigation-expand.png
|
||||||
|
[navigation.expand disabled]: ../assets/screenshots/navigation.png
|
||||||
|
|
||||||
### Section index pages
|
### Section index pages
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][16] ·
|
[:octicons-tag-24: 7.3.0][navigation.indexes support] ·
|
||||||
:octicons-unlock-24: Feature flag ·
|
:octicons-unlock-24: Feature flag ·
|
||||||
:octicons-beaker-24: Experimental
|
:octicons-beaker-24: Experimental
|
||||||
|
|
||||||
When _section index pages_ are enabled, documents can be directly attached to
|
When section index pages are enabled, documents can be directly attached to
|
||||||
sections, which is particularly useful for providing overview pages. Add the
|
sections, which is particularly useful for providing overview pages. Add the
|
||||||
following lines to `mkdocs.yml`:
|
following lines to `mkdocs.yml`:
|
||||||
|
|
||||||
@ -194,13 +198,13 @@ theme:
|
|||||||
- navigation.indexes
|
- navigation.indexes
|
||||||
```
|
```
|
||||||
|
|
||||||
=== "With section index pages"
|
=== ":octicons-check-circle-fill-16: Enabled"
|
||||||
|
|
||||||
[![With expansion][17]][17]
|
[![navigation.indexes enabled]][navigation.indexes enabled]
|
||||||
|
|
||||||
=== "Without section index pages"
|
=== ":octicons-skip-16: Disabled"
|
||||||
|
|
||||||
[![Without expansion][18]][18]
|
[![navigation.indexes disabled]][navigation.indexes disabled]
|
||||||
|
|
||||||
In order to link a page to a section, create a new document with the name
|
In order to link a page to a section, create a new document with the name
|
||||||
`index.md` in the respective folder, and add it to the beginning of your
|
`index.md` in the respective folder, and add it to the beginning of your
|
||||||
@ -215,20 +219,50 @@ nav:
|
|||||||
- Page n: section/page-n.md
|
- Page n: section/page-n.md
|
||||||
```
|
```
|
||||||
|
|
||||||
_This feature flag can be combined with all other feature flags, e.g. [tabs][1]
|
This feature flag is not compatible with [`toc.integrate`][toc.integrate].
|
||||||
and [sections][2], except for table of contents [navigation integration][19]._
|
|
||||||
|
|
||||||
[16]: https://github.com/squidfunk/mkdocs-material/blob/master/src/partials/nav-item.html
|
[navigation.indexes support]: https://github.com/squidfunk/mkdocs-material/releases/tag/7.3.0
|
||||||
[17]: ../assets/screenshots/navigation-index-on.png
|
[navigation.indexes enabled]: ../assets/screenshots/navigation-index-on.png
|
||||||
[18]: ../assets/screenshots/navigation-index-off.png
|
[navigation.indexes disabled]: ../assets/screenshots/navigation-index-off.png
|
||||||
[19]: #navigation-integration
|
[toc.integrate]: #integrated-table-of-contents
|
||||||
|
|
||||||
|
### Integrated table of contents
|
||||||
|
|
||||||
|
[:octicons-tag-24: 6.2.0][toc.integrate support] ·
|
||||||
|
:octicons-unlock-24: Feature flag
|
||||||
|
|
||||||
|
When navigation integration for the table of contents is enabled, it is always
|
||||||
|
rendered as part of the navigation sidebar on the left. Add the following lines
|
||||||
|
to `mkdocs.yml`:
|
||||||
|
|
||||||
|
``` yaml
|
||||||
|
theme:
|
||||||
|
features:
|
||||||
|
- toc.integrate
|
||||||
|
```
|
||||||
|
|
||||||
|
=== ":octicons-check-circle-fill-16: Enabled"
|
||||||
|
|
||||||
|
[![toc.integrate enabled]][toc.integrate enabled]
|
||||||
|
|
||||||
|
=== ":octicons-skip-16: Disabled"
|
||||||
|
|
||||||
|
[![toc.integrate disabled]][toc.integrate disabled]
|
||||||
|
|
||||||
|
This feature flag is not compatible with [`navigation.indexes`]
|
||||||
|
[navigation.indexes].
|
||||||
|
|
||||||
|
[toc.integrate support]: https://github.com/squidfunk/mkdocs-material/releases/tag/7.3.0
|
||||||
|
[toc.integrate enabled]: ../assets/screenshots/toc-integrate.png
|
||||||
|
[toc.integrate disabled]: ../assets/screenshots/navigation-tabs.png
|
||||||
|
[navigation.indexes]: #section-index-pages
|
||||||
|
|
||||||
### Back-to-top button
|
### Back-to-top button
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][20] ·
|
[:octicons-tag-24: 7.1.0][navigation.top support] ·
|
||||||
:octicons-unlock-24: Feature flag
|
:octicons-unlock-24: Feature flag
|
||||||
|
|
||||||
A _back-to-top button_ can be shown when the user, after scrolling down, starts
|
A back-to-top button can be shown when the user, after scrolling down, starts
|
||||||
to scroll up again. It's rendered centered and just below the header. Add the
|
to scroll up again. It's rendered centered and just below the header. Add the
|
||||||
following lines to `mkdocs.yml`:
|
following lines to `mkdocs.yml`:
|
||||||
|
|
||||||
@ -238,137 +272,15 @@ theme:
|
|||||||
- navigation.top
|
- navigation.top
|
||||||
```
|
```
|
||||||
|
|
||||||
[![back-to-top button][21]][21]
|
[navigation.top support]: https://github.com/squidfunk/mkdocs-material/releases/tag/7.1.0
|
||||||
|
|
||||||
[20]: https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/stylesheets/main/layout/_top.scss
|
|
||||||
[21]: ../assets/screenshots/back-to-top.png
|
|
||||||
|
|
||||||
### Table of contents
|
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][22] · [:octicons-workflow-24: Extension][23]
|
|
||||||
|
|
||||||
The [Table of contents][24] extension, which is part of the standard Markdown
|
|
||||||
library, provides some options that are supported by Material for MkDocs to
|
|
||||||
customize its appearance:
|
|
||||||
|
|
||||||
`permalink`{ #permalink }
|
|
||||||
|
|
||||||
: :octicons-milestone-24: Default: `false` – This option adds an anchor link
|
|
||||||
containing the paragraph symbol `¶` or another custom symbol at the end of
|
|
||||||
each headline, exactly like on the page you're currently viewing, which
|
|
||||||
Material for MkDocs will make appear on hover:
|
|
||||||
|
|
||||||
=== "¶"
|
|
||||||
|
|
||||||
``` yaml
|
|
||||||
markdown_extensions:
|
|
||||||
- toc:
|
|
||||||
permalink: true
|
|
||||||
```
|
|
||||||
|
|
||||||
=== "⚓︎"
|
|
||||||
|
|
||||||
``` yaml
|
|
||||||
markdown_extensions:
|
|
||||||
- toc:
|
|
||||||
permalink: ⚓︎
|
|
||||||
```
|
|
||||||
|
|
||||||
`slugify`{ #slugify }
|
|
||||||
|
|
||||||
: :octicons-milestone-24: Default: `headerid.slugify` – This option allows for
|
|
||||||
customization of the slug function. For some languages, the default may not
|
|
||||||
produce good and readable identifiers – consider using another slug function
|
|
||||||
like for example those from [Python Markdown Extensions][25]:
|
|
||||||
|
|
||||||
=== "Unicode"
|
|
||||||
|
|
||||||
``` yaml
|
|
||||||
markdown_extensions:
|
|
||||||
- toc:
|
|
||||||
slugify: !!python/name:pymdownx.slugs.uslugify
|
|
||||||
```
|
|
||||||
|
|
||||||
=== "Unicode, case-sensitive"
|
|
||||||
|
|
||||||
``` yaml
|
|
||||||
markdown_extensions:
|
|
||||||
- toc:
|
|
||||||
slugify: !!python/name:pymdownx.slugs.uslugify_cased
|
|
||||||
```
|
|
||||||
|
|
||||||
`toc_depth`{ #toc_depth }
|
|
||||||
|
|
||||||
: :octicons-milestone-24: Default: `6` – Define the range of levels to be
|
|
||||||
included in the table of contents. This may be useful for project
|
|
||||||
documentation with deeply structured headings to decrease the length of the
|
|
||||||
table of contents, or to remove the table of contents altogether:
|
|
||||||
|
|
||||||
=== "Hide levels 4-6"
|
|
||||||
|
|
||||||
``` yaml
|
|
||||||
markdown_extensions:
|
|
||||||
- toc:
|
|
||||||
toc_depth: 3
|
|
||||||
```
|
|
||||||
|
|
||||||
=== "Hide table of contents"
|
|
||||||
|
|
||||||
``` yaml
|
|
||||||
markdown_extensions:
|
|
||||||
- toc:
|
|
||||||
toc_depth: 0
|
|
||||||
```
|
|
||||||
|
|
||||||
_Material for MkDocs doesn't provide official support for the other options of
|
|
||||||
this extension, so they may be supported but might yield unexpected results.
|
|
||||||
Use them at your own risk._
|
|
||||||
|
|
||||||
[22]: https://github.com/squidfunk/mkdocs-material/blob/master/src/partials/toc.html
|
|
||||||
[23]: https://python-markdown.github.io/extensions/toc/
|
|
||||||
[24]: https://python-markdown.github.io/extensions/toc/#usage
|
|
||||||
[25]: https://facelessuser.github.io/pymdown-extensions/extras/slugs/
|
|
||||||
|
|
||||||
#### Navigation integration
|
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][26] ·
|
|
||||||
:octicons-unlock-24: Feature flag
|
|
||||||
|
|
||||||
When _integration_ is enabled, the table of contents is rendered as part of
|
|
||||||
the navigation for viewports above `1220px`, but remains as-is on mobile. Add
|
|
||||||
the following lines to `mkdocs.yml`:
|
|
||||||
|
|
||||||
``` yaml
|
|
||||||
theme:
|
|
||||||
features:
|
|
||||||
- toc.integrate
|
|
||||||
```
|
|
||||||
|
|
||||||
=== "Integrate table of contents"
|
|
||||||
|
|
||||||
[![Integrate table of contents][27]][27]
|
|
||||||
|
|
||||||
=== "Separate table of contents"
|
|
||||||
|
|
||||||
[![Separate table of contents][8]][8]
|
|
||||||
|
|
||||||
[26]: https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/stylesheets/main/layout/_nav.scss
|
|
||||||
[27]: ../assets/screenshots/toc-integrate.png
|
|
||||||
|
|
||||||
The content section will now always stretch to the right side, resulting in
|
|
||||||
more space for your content. This feature flag can be combined with all other
|
|
||||||
feature flags, e.g. [tabs][1] and [sections][2].
|
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
### Hiding the sidebars
|
### Hiding the sidebars
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][28] ·
|
When [Metadata] is enabled, the navigation and/or table of contents sidebars
|
||||||
:octicons-note-24: Metadata
|
can be hidden for a document with custom front matter. Add the following lines
|
||||||
|
at the top of a Markdown file:
|
||||||
Sometimes it's desirable to hide the navigation and/or table of contents
|
|
||||||
sidebar, especially when there's a single navigation item. This can be done for
|
|
||||||
any page using the [Metadata][29] extension:
|
|
||||||
|
|
||||||
``` bash
|
``` bash
|
||||||
---
|
---
|
||||||
@ -383,33 +295,29 @@ hide:
|
|||||||
|
|
||||||
=== "Hide navigation"
|
=== "Hide navigation"
|
||||||
|
|
||||||
[![Hide navigation][30]][30]
|
[![hide.navigation enabled]][hide.navigation enabled]
|
||||||
|
|
||||||
=== "Hide table of contents"
|
=== "Hide table of contents"
|
||||||
|
|
||||||
[![Hide table of contents][31]][31]
|
[![hide.toc enabled]][hide.toc enabled]
|
||||||
|
|
||||||
=== "Hide both"
|
=== "Hide both"
|
||||||
|
|
||||||
[![Hide navigation and table of contents][32]][32]
|
[![hide.* enabled]][hide.* enabled]
|
||||||
|
|
||||||
[28]: https://github.com/squidfunk/mkdocs-material/blob/master/src/base.html
|
[Metadata]: extensions/python-markdown.md#metadata
|
||||||
[29]: ../../reference/meta-tags/#metadata
|
[hide.navigation enabled]: ../assets/screenshots/hide-navigation.png
|
||||||
[30]: ../assets/screenshots/hide-navigation.png
|
[hide.toc enabled]: ../assets/screenshots/hide-toc.png
|
||||||
[31]: ../assets/screenshots/hide-toc.png
|
[hide.* enabled]: ../assets/screenshots/hide-navigation-toc.png
|
||||||
[32]: ../assets/screenshots/hide-navigation-toc.png
|
|
||||||
|
|
||||||
## Customization
|
## Customization
|
||||||
|
|
||||||
### Keyboard shortcuts
|
### Keyboard shortcuts
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][33] ·
|
|
||||||
:octicons-mortar-board-24: Difficulty: _easy_
|
|
||||||
|
|
||||||
Material for MkDocs includes several keyboard shortcuts that make it possible
|
Material for MkDocs includes several keyboard shortcuts that make it possible
|
||||||
to navigate your project documentation via keyboard. There're two modes:
|
to navigate your project documentation via keyboard. There're two modes:
|
||||||
|
|
||||||
`search`{ #search }
|
`search`{ #mode-search }
|
||||||
|
|
||||||
: This mode is active when the _search is focused_. It provides several key
|
: This mode is active when the _search is focused_. It provides several key
|
||||||
bindings to make search accessible and navigable via keyboard:
|
bindings to make search accessible and navigable via keyboard:
|
||||||
@ -418,7 +326,7 @@ to navigate your project documentation via keyboard. There're two modes:
|
|||||||
* ++esc++ , ++tab++ : close search dialog
|
* ++esc++ , ++tab++ : close search dialog
|
||||||
* ++enter++ : follow selected result
|
* ++enter++ : follow selected result
|
||||||
|
|
||||||
`global`{ #global }
|
`global`{ #mode-global }
|
||||||
|
|
||||||
: This mode is active when _search is not focussed_ and when there's no other
|
: This mode is active when _search is not focussed_ and when there's no other
|
||||||
focussed element that is susceptible to keyboard input. The following keys
|
focussed element that is susceptible to keyboard input. The following keys
|
||||||
@ -429,54 +337,66 @@ to navigate your project documentation via keyboard. There're two modes:
|
|||||||
* ++n++ , ++period++ : go to next page
|
* ++n++ , ++period++ : go to next page
|
||||||
|
|
||||||
Let's say you want to bind some action to the ++x++ key. By using [additional
|
Let's say you want to bind some action to the ++x++ key. By using [additional
|
||||||
JavaScript][34], you can subscribe to the `keyboard$` observable and attach
|
JavaScript], you can subscribe to the `keyboard$` observable and attach
|
||||||
your custom event listener:
|
your custom event listener:
|
||||||
|
|
||||||
``` js
|
=== ":octicons-file-code-16: docs/javascripts/shortcuts.js"
|
||||||
keyboard$.subscribe(function(key) {
|
|
||||||
if (key.mode === "global" && key.type === "x") {
|
|
||||||
/* Add custom keyboard handler here */
|
|
||||||
key.claim()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
```
|
|
||||||
|
|
||||||
The call to `#!js key.claim()` will essentially execute `#!js preventDefault()`
|
``` js
|
||||||
on the underlying event, so the keypress will not propagate further and touch
|
keyboard$.subscribe(function(key) {
|
||||||
other event listeners.
|
if (key.mode === "global" && key.type === "x") {
|
||||||
|
/* Add custom keyboard handler here */
|
||||||
|
key.claim() // (1)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
[33]: https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/javascripts/integrations/keyboard/index.ts
|
1. The call to `key.claim()` will execute `preventDefault()` on the
|
||||||
[34]: ../customization.md#additional-javascript
|
underlying event, so the keypress will not propagate further and
|
||||||
|
touch other event listeners.
|
||||||
|
|
||||||
|
=== ":octicons-file-code-16: mkdocs.yml"
|
||||||
|
|
||||||
|
``` yaml
|
||||||
|
extra_javascript:
|
||||||
|
- javascripts/shortcuts.js
|
||||||
|
```
|
||||||
|
|
||||||
|
[additional JavaScript]: ../customization.md#additional-javascript
|
||||||
|
|
||||||
### Content area width
|
### Content area width
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][35] ·
|
|
||||||
:octicons-mortar-board-24: Difficulty: _easy_
|
|
||||||
|
|
||||||
The width of the content area is set so the length of each line doesn't exceed
|
The width of the content area is set so the length of each line doesn't exceed
|
||||||
80-100 characters, depending on the width of the characters. While this
|
80-100 characters, depending on the width of the characters. While this
|
||||||
is a reasonable default, as longer lines tend to be harder to read, it may be
|
is a reasonable default, as longer lines tend to be harder to read, it may be
|
||||||
desirable to increase the overall width of the content area, or even make it
|
desirable to increase the overall width of the content area, or even make it
|
||||||
stretch to the entire available space.
|
stretch to the entire available space.
|
||||||
|
|
||||||
This can easily be achieved with an [additional stylesheet][36] and a few lines
|
This can easily be achieved with an [additional style sheet] and a few lines
|
||||||
of CSS:
|
of CSS:
|
||||||
|
|
||||||
=== "Increase width"
|
=== ":octicons-file-code-16: docs/stylesheets/extra.css"
|
||||||
|
|
||||||
``` css
|
``` css
|
||||||
.md-grid {
|
.md-grid {
|
||||||
max-width: 1440px;
|
max-width: 1440px; /* (1) */
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
=== "Stretch to fit"
|
1. If you want the content area to always stretch to the available screen
|
||||||
|
space, reset `max-width` with the following CSS:
|
||||||
|
|
||||||
``` css
|
``` css
|
||||||
.md-grid {
|
.md-grid {
|
||||||
max-width: initial;
|
max-width: initial;
|
||||||
}
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
=== ":octicons-file-code-16: mkdocs.yml"
|
||||||
|
|
||||||
|
``` yaml
|
||||||
|
extra_css:
|
||||||
|
- stylesheets/extra.css
|
||||||
```
|
```
|
||||||
|
|
||||||
[35]: https://github.com/squidfunk/mkdocs-material/blob/aeaa00a625abf952f355164de02c539b061e6127/src/assets/stylesheets/main/layout/_base.scss
|
[additional style sheet]: ../customization.md#additional-css
|
||||||
[36]: ../customization.md#additional-css
|
|
||||||
|
@ -6,23 +6,24 @@ template: overrides/main.html
|
|||||||
|
|
||||||
As with any other service offered on the web, understanding how your project
|
As with any other service offered on the web, understanding how your project
|
||||||
documentation is actually used can be an essential success factor. Material for
|
documentation is actually used can be an essential success factor. Material for
|
||||||
MkDocs natively integrates with [Google Analytics][1] and offers a customizable
|
MkDocs natively integrates with [Google Analytics] and offers a customizable
|
||||||
and extendable [cookie consent][2].
|
and extendable [cookie consent][extra.consent].
|
||||||
|
|
||||||
[1]: https://developers.google.com/analytics
|
[Google Analytics]: https://developers.google.com/analytics
|
||||||
[2]: #cookie-consent
|
[extra.consent]: #cookie-consent
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
### Google Analytics
|
### Google Analytics
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][3] · :octicons-milestone-24: Default: _none_
|
[:octicons-tag-24: 7.1.8][Google Analytics support] ·
|
||||||
|
:octicons-milestone-24: Default: _none_
|
||||||
|
|
||||||
Material for MkDocs integrates with both, Google Analytics 4 and the now phasing
|
Material for MkDocs integrates with both, Google Analytics 4 and the now phasing
|
||||||
out Universal Analytics (`UA-*`). Depending on the prefix of the property, add
|
out Universal Analytics. Depending on the given property prefix, add the
|
||||||
the following to `mkdocs.yml`:
|
following lines to `mkdocs.yml`:
|
||||||
|
|
||||||
=== "Google Analytics 4"
|
=== ":material-google-analytics: Google Analytics 4"
|
||||||
|
|
||||||
``` yaml
|
``` yaml
|
||||||
extra:
|
extra:
|
||||||
@ -31,7 +32,7 @@ the following to `mkdocs.yml`:
|
|||||||
property: G-XXXXXXXXXX
|
property: G-XXXXXXXXXX
|
||||||
```
|
```
|
||||||
|
|
||||||
=== "Universal Analytics"
|
=== ":material-google-analytics: Universal Analytics"
|
||||||
|
|
||||||
``` yaml
|
``` yaml
|
||||||
extra:
|
extra:
|
||||||
@ -40,34 +41,34 @@ the following to `mkdocs.yml`:
|
|||||||
property: UA-XXXXXXXX-X
|
property: UA-XXXXXXXX-X
|
||||||
```
|
```
|
||||||
|
|
||||||
[3]: https://github.com/squidfunk/mkdocs-material/blob/master/src/partials/integrations/analytics.html
|
[Google Analytics support]: https://github.com/squidfunk/mkdocs-material/releases/tag/7.1.8
|
||||||
|
|
||||||
#### Site search tracking
|
#### Site search tracking
|
||||||
|
|
||||||
Besides basic page views, _site search_ can also be tracked to understand better
|
Besides basic page views, site search can also be tracked to understand better
|
||||||
how people use your documentation and what they expect to find. To enable
|
how people use your documentation and what they expect to find. To enable
|
||||||
search tracking:
|
search tracking:
|
||||||
|
|
||||||
1. Go to your Google Analytics __admin settings__
|
1. Go to your Google Analytics __admin settings__
|
||||||
2. Select the property for the respective tracking code
|
2. Select the property for the respective tracking code
|
||||||
3. Go to the __view settings__ tab.
|
3. Go to the __view settings__ tab.
|
||||||
4. Scroll down and enable __site search settings__
|
4. Scroll down and enable __site search settings__
|
||||||
5. Set the __query parameter__ to `q`.
|
5. Set the __query parameter__ to `q`.
|
||||||
|
|
||||||
_Site search tracking is not supported with Google Analytics 4 due to the much
|
Site search tracking is not supported with Google Analytics 4 due to the more
|
||||||
more complicated manual setup. If you want to set up site search tracking
|
complicated manual setup. If you want to set up site search tracking yourself,
|
||||||
yourself, [this tutorial][4] might be a good start._
|
[this tutorial][tutorial] is a good start.
|
||||||
|
|
||||||
[4]: https://www.analyticsmania.com/post/track-site-search-with-google-tag-manager-and-google-analytics/
|
[tutorial]: https://www.analyticsmania.com/post/track-site-search-with-google-tag-manager-and-google-analytics/
|
||||||
|
|
||||||
### Cookie consent
|
### Cookie consent
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][5] ·
|
[:octicons-heart-fill-24:{ .mdx-heart } Insiders][Insiders]{ .mdx-insiders } ·
|
||||||
:octicons-milestone-24: Default: _none_ ·
|
[:octicons-tag-24: insiders-2.10.0][Insiders] ·
|
||||||
[:octicons-heart-fill-24:{ .mdx-heart } Insiders only][5]{ .mdx-insiders }
|
:octicons-milestone-24: Default: _none_
|
||||||
|
|
||||||
Material for MkDocs ships a native and extensible cookie consent form, which
|
Material for MkDocs ships a native and extensible cookie consent form which
|
||||||
asks the user for his consent prior to setting up analytics. Add the following
|
asks the user for his consent prior to sending any analytics. Add the following
|
||||||
to `mkdocs.yml`:
|
to `mkdocs.yml`:
|
||||||
|
|
||||||
``` yaml
|
``` yaml
|
||||||
@ -81,15 +82,15 @@ extra:
|
|||||||
make our documentation better.
|
make our documentation better.
|
||||||
```
|
```
|
||||||
|
|
||||||
1. You can add arbitrary HTML tags in the `description`, e.g. to link to your
|
1. You can add arbitrary HTML tags in the `description`, e.g. to link to your
|
||||||
terms of service or other parts of the site.
|
terms of service or other parts of the site.
|
||||||
|
|
||||||
Note that both, `title` and `description`, are required. If Google Analytics was
|
Note that both, `title` and `description`, are required. If Google Analytics was
|
||||||
configured via `mkdocs.yml`, the cookie consent will automatically include a
|
configured via `mkdocs.yml`, the cookie consent will automatically include a
|
||||||
setting for the user to disable it. Furthermore, [custom cookies][6] can be
|
setting for the user to disable it. Furthermore, [custom cookies] can be
|
||||||
integrated by using the `cookies` field:
|
integrated by using the `cookies` field:
|
||||||
|
|
||||||
=== "Change cookie name"
|
=== "Custom cookie name"
|
||||||
|
|
||||||
``` yaml
|
``` yaml
|
||||||
extra:
|
extra:
|
||||||
@ -100,7 +101,7 @@ integrated by using the `cookies` field:
|
|||||||
|
|
||||||
1. The default name of the `analytics` cookie is `Google Analytics`.
|
1. The default name of the `analytics` cookie is `Google Analytics`.
|
||||||
|
|
||||||
=== "Add custom cookie"
|
=== "Custom cookie"
|
||||||
|
|
||||||
``` yaml
|
``` yaml
|
||||||
extra:
|
extra:
|
||||||
@ -115,78 +116,87 @@ integrated by using the `cookies` field:
|
|||||||
|
|
||||||
When a user first visits your site, a cookie consent form is rendered:
|
When a user first visits your site, a cookie consent form is rendered:
|
||||||
|
|
||||||
[![Cookie consent][7]][7]
|
[![extra.consent enabled]][extra.consent enabled]
|
||||||
|
|
||||||
In order to comply with GDPR, users must be able to change their cookie settings
|
In order to comply with GDPR, users must be able to change their cookie settings
|
||||||
at any time. This can be done by creating a simple link as part of any document,
|
at any time. This can be done by creating a simple link as part of any document,
|
||||||
e.g. privacy policy:
|
e.g. your privacy policy:
|
||||||
|
|
||||||
``` markdown
|
``` markdown
|
||||||
[Change cookie settings](#__consent){ .md-button }
|
[Change cookie settings](#__consent){ .md-button }
|
||||||
```
|
```
|
||||||
|
|
||||||
[5]: ../insiders/index.md
|
[Insiders]: ../insiders/index.md
|
||||||
[6]: #custom-cookies
|
[custom cookies]: #custom-cookies
|
||||||
[7]: ../assets/screenshots/consent.png
|
[extra.consent enabled]: ../assets/screenshots/consent.png
|
||||||
|
|
||||||
## Customization
|
## Customization
|
||||||
|
|
||||||
### Custom site analytics
|
### Custom site analytics
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][3] ·
|
|
||||||
:octicons-mortar-board-24: Difficulty: _moderate_
|
|
||||||
|
|
||||||
In order to integrate another analytics service provider offering a
|
In order to integrate another analytics service provider offering a
|
||||||
JavaScript-based tracking solution, you can [extend the theme][8] and add a new
|
JavaScript-based tracking solution, just follow the guide on [theme extension]
|
||||||
`custom.html` partial [here][9]. The name of the partial can then be used to
|
and create a new partial in the `overrides` folder. The name of the partial is
|
||||||
configure the custom integration from `mkdocs.yml`:
|
used to configure the custom integration via `mkdocs.yml`:
|
||||||
|
|
||||||
``` yaml
|
=== ":octicons-file-code-16: partials/integrations/analytics/custom.html"
|
||||||
extra:
|
|
||||||
analytics:
|
|
||||||
provider: custom # (1)
|
|
||||||
key: value # (2)
|
|
||||||
```
|
|
||||||
|
|
||||||
1. Of course, you can change the name to the partial to anything you like.
|
``` html
|
||||||
2. You can add arbitrary `key` and `value` combinations to configure your custom
|
<script>
|
||||||
integration. This is especially useful if you're sharing the custom
|
/* Add custom analytics integration here, e.g. */
|
||||||
integration across multiple repositories.
|
var property = "{{ config.extra.analytics.property }}" // (1)
|
||||||
|
|
||||||
[8]: ../customization.md#extending-the-theme
|
/* Wait for page to load and application to mount */
|
||||||
[9]: https://github.com/squidfunk/mkdocs-material/tree/master/src/partials/integrations/analytics
|
document.addEventListener("DOMContentLoaded", function() {
|
||||||
|
location$.subscribe(function(url) {
|
||||||
|
/* Add custom page event tracking here */ // (2)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
#### Instant loading
|
1. As an example, this variable receives the value set in `mkdocs.yml`,
|
||||||
|
which is `"foobar"` for `property`.
|
||||||
|
2. If you're using [instant loading], you can use the `location$`
|
||||||
|
observable to listen for navigation events, which always emits the
|
||||||
|
current `URL`.
|
||||||
|
|
||||||
If you're using [instant loading][10], you may use the `location$` observable,
|
=== ":octicons-file-code-16: mkdocs.yml"
|
||||||
which will emit the current `URL` to listen for navigation events and register
|
|
||||||
a page view event with:
|
|
||||||
|
|
||||||
``` js
|
``` yaml
|
||||||
location$.subscribe(function(url) {
|
extra:
|
||||||
/* Track a page event */
|
analytics:
|
||||||
})
|
provider: custom
|
||||||
```
|
property: foobar # (1)
|
||||||
|
```
|
||||||
|
|
||||||
Note that this must be integrated with [additional JavaScript][11].
|
1. You can add arbitrary key-value combinations to configure your
|
||||||
|
custom integration. This is especially useful if you're sharing the
|
||||||
|
custom integration across multiple repositories.
|
||||||
|
|
||||||
[10]: setting-up-navigation.md#instant-loading
|
[theme extension]: ../customization.md#extending-the-theme
|
||||||
[11]: ../customization.md#additional-javascript
|
[instant loading]: setting-up-navigation.md#instant-loading
|
||||||
|
|
||||||
### Custom cookies
|
### Custom cookies
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][3] ·
|
If you've customized the [cookie consent][extra.consent] and added a `custom`
|
||||||
:octicons-mortar-board-24: Difficulty: _moderate_
|
cookie, the user will be prompted to accept your custom cookie. Use [additional
|
||||||
|
JavaScript] to check whether the user accepted it:
|
||||||
|
|
||||||
If you've customized the [cookie consent][12] and added a `custom` cookie, the
|
=== ":octicons-file-code-16: docs/javascripts/consent.js"
|
||||||
user will be prompted to accept your custom cookie. Use
|
|
||||||
[additional JavaScript][11] to check whether the user accepted it:
|
|
||||||
|
|
||||||
``` js
|
``` js
|
||||||
var consent = __md_get("__consent")
|
var consent = __md_get("__consent")
|
||||||
if (consent && consent.custom) {
|
if (consent && consent.custom) {
|
||||||
/* The user accepted the cookie */
|
/* The user accepted the cookie */
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
[12]: #cookie-consent
|
=== ":octicons-file-code-16: mkdocs.yml"
|
||||||
|
|
||||||
|
``` yaml
|
||||||
|
extra_javascript:
|
||||||
|
- javascripts/consent.js
|
||||||
|
```
|
||||||
|
|
||||||
|
[additional JavaScript]: ../customization.md#additional-javascript
|
||||||
|
@ -37,7 +37,7 @@ plugins:
|
|||||||
|
|
||||||
The following options are supported:
|
The following options are supported:
|
||||||
|
|
||||||
`lang`{ #lang }
|
`lang`{ #search-lang }
|
||||||
|
|
||||||
: :octicons-milestone-24: Default: _automatically set_ – This option allows
|
: :octicons-milestone-24: Default: _automatically set_ – This option allows
|
||||||
to include the language-specific stemmers provided by [lunr-languages][5].
|
to include the language-specific stemmers provided by [lunr-languages][5].
|
||||||
@ -65,7 +65,7 @@ The following options are supported:
|
|||||||
|
|
||||||
The following languages are supported:
|
The following languages are supported:
|
||||||
|
|
||||||
<div class="mdx-columns" markdown="1">
|
<div class="mdx-columns" markdown>
|
||||||
|
|
||||||
- `ar` – Arabic
|
- `ar` – Arabic
|
||||||
- `da` – Danish
|
- `da` – Danish
|
||||||
@ -98,7 +98,7 @@ The following options are supported:
|
|||||||
JavaScript payload by around 20kb (before `gzip`) and by another 15-30kb
|
JavaScript payload by around 20kb (before `gzip`) and by another 15-30kb
|
||||||
per language.
|
per language.
|
||||||
|
|
||||||
`separator`{ #separator }
|
`separator`{ #search-separator }
|
||||||
|
|
||||||
: :octicons-milestone-24: Default: _automatically set_ – The separator for
|
: :octicons-milestone-24: Default: _automatically set_ – The separator for
|
||||||
indexing and query tokenization can be customized, making it possible to
|
indexing and query tokenization can be customized, making it possible to
|
||||||
@ -111,7 +111,7 @@ The following options are supported:
|
|||||||
separator: '[\s\-\.]+'
|
separator: '[\s\-\.]+'
|
||||||
```
|
```
|
||||||
|
|
||||||
~~`prebuild_index`~~{ #prebuild-index }[^1]
|
~~`prebuild_index`~~{ #search-prebuild-index }[^1]
|
||||||
|
|
||||||
: :octicons-milestone-24: Default: `false` · :octicons-archive-24: Deprecated
|
: :octicons-milestone-24: Default: `false` · :octicons-archive-24: Deprecated
|
||||||
– MkDocs can generate a [prebuilt index][7] of all pages during
|
– MkDocs can generate a [prebuilt index][7] of all pages during
|
||||||
@ -146,11 +146,11 @@ Use them at your own risk._
|
|||||||
|
|
||||||
### Search suggestions
|
### Search suggestions
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][8] ·
|
|
||||||
:octicons-unlock-24: Feature flag ·
|
:octicons-unlock-24: Feature flag ·
|
||||||
:octicons-beaker-24: Experimental
|
:octicons-beaker-24: Experimental ·
|
||||||
|
[:octicons-tag-24: 7.2.0][Search suggestions support]
|
||||||
|
|
||||||
When _search suggestions_ are enabled, the search will display the likeliest
|
When search suggestions are enabled, the search will display the likeliest
|
||||||
completion for the last word, saving the user many key strokes by accepting the
|
completion for the last word, saving the user many key strokes by accepting the
|
||||||
suggestion with the ++arrow-right++ key.
|
suggestion with the ++arrow-right++ key.
|
||||||
|
|
||||||
@ -166,17 +166,18 @@ Searching for [:octicons-search-24: search su][9] yields ^^search suggestions^^
|
|||||||
|
|
||||||
[![Search suggestions][10]][10]
|
[![Search suggestions][10]][10]
|
||||||
|
|
||||||
|
[Search suggestions support]: https://github.com/squidfunk/mkdocs-material/releases/tag/7.2.0
|
||||||
[8]: https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/javascripts/components/search/suggest/index.ts
|
[8]: https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/javascripts/components/search/suggest/index.ts
|
||||||
[9]: ?q=search+su
|
[9]: ?q=search+su
|
||||||
[10]: ../assets/screenshots/search-suggestions.png
|
[10]: ../assets/screenshots/search-suggestions.png
|
||||||
|
|
||||||
### Search highlighting
|
### Search highlighting
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][11] ·
|
|
||||||
:octicons-unlock-24: Feature flag ·
|
:octicons-unlock-24: Feature flag ·
|
||||||
:octicons-beaker-24: Experimental
|
:octicons-beaker-24: Experimental ·
|
||||||
|
[:octicons-tag-24: 7.2.0][Search highlighting support]
|
||||||
|
|
||||||
When _search highlighting_ is enabled and a user clicks on a search result,
|
When search highlighting is enabled and a user clicks on a search result,
|
||||||
Material for MkDocs will highlight all occurrences after following the link.
|
Material for MkDocs will highlight all occurrences after following the link.
|
||||||
Add the following lines to `mkdocs.yml`:
|
Add the following lines to `mkdocs.yml`:
|
||||||
|
|
||||||
@ -190,17 +191,18 @@ Searching for [:octicons-search-24: code blocks][12] yields:
|
|||||||
|
|
||||||
[![Search highlighting][13]][13]
|
[![Search highlighting][13]][13]
|
||||||
|
|
||||||
|
[Search highlighting support]: https://github.com/squidfunk/mkdocs-material/releases/tag/7.2.0
|
||||||
[11]: https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/javascripts/components/search/highlight/index.ts
|
[11]: https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/javascripts/components/search/highlight/index.ts
|
||||||
[12]: ../reference/code-blocks.md?h=code+blocks
|
[12]: ../reference/code-blocks.md?h=code+blocks
|
||||||
[13]: ../assets/screenshots/search-highlighting.png
|
[13]: ../assets/screenshots/search-highlighting.png
|
||||||
|
|
||||||
### Search sharing
|
### Search sharing
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][14] ·
|
|
||||||
:octicons-unlock-24: Feature flag ·
|
:octicons-unlock-24: Feature flag ·
|
||||||
:octicons-beaker-24: Experimental
|
:octicons-beaker-24: Experimental ·
|
||||||
|
[:octicons-tag-24: 7.2.0][Search highlighting support]
|
||||||
|
|
||||||
When _search sharing_ is activated, a :material-share-variant: share button is
|
When search sharing is activated, a :material-share-variant: share button is
|
||||||
rendered next to the reset button, which allows to deep link to the current
|
rendered next to the reset button, which allows to deep link to the current
|
||||||
search query and result. Add the following lines to `mkdocs.yml`:
|
search query and result. Add the following lines to `mkdocs.yml`:
|
||||||
|
|
||||||
@ -215,6 +217,7 @@ clipboard.
|
|||||||
|
|
||||||
[![Search sharing][15]][15]
|
[![Search sharing][15]][15]
|
||||||
|
|
||||||
|
[Search sharing support]: https://github.com/squidfunk/mkdocs-material/releases/tag/7.2.0
|
||||||
[14]: https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/javascripts/components/search/share/index.ts
|
[14]: https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/javascripts/components/search/share/index.ts
|
||||||
[15]: ../assets/screenshots/search-share.png
|
[15]: ../assets/screenshots/search-share.png
|
||||||
|
|
||||||
@ -245,9 +248,9 @@ For setup instructions, refer to the [official documentation][19].
|
|||||||
|
|
||||||
### Search boosting
|
### Search boosting
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][20] ·
|
[:octicons-heart-fill-24:{ .mdx-heart } Insiders][Insiders]{ .mdx-insiders } ·
|
||||||
:octicons-note-24: Metadata ·
|
:octicons-note-24: Metadata ·
|
||||||
[:octicons-heart-fill-24:{ .mdx-heart } Insiders only][20]{ .mdx-insiders }
|
[:octicons-tag-24: insiders-2.8.0][Insiders]
|
||||||
|
|
||||||
In order to give specific pages a higher relevance in search, [lunr][4] supports
|
In order to give specific pages a higher relevance in search, [lunr][4] supports
|
||||||
page-specific boosts, which can be defined for each page by leveraging the
|
page-specific boosts, which can be defined for each page by leveraging the
|
||||||
@ -263,14 +266,16 @@ search:
|
|||||||
...
|
...
|
||||||
```
|
```
|
||||||
|
|
||||||
|
[Insiders]: ../insiders/index.md
|
||||||
[20]: ../insiders/index.md
|
[20]: ../insiders/index.md
|
||||||
[21]: ../reference/meta-tags.md#metadata
|
[21]: ../reference/meta-tags.md#metadata
|
||||||
|
|
||||||
### Search exclusion
|
### Search exclusion
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][20] ·
|
[:octicons-heart-fill-24:{ .mdx-heart } Insiders][Insiders]{ .mdx-insiders } ·
|
||||||
|
:octicons-note-24: Metadata ·
|
||||||
:octicons-beaker-24: Experimental ·
|
:octicons-beaker-24: Experimental ·
|
||||||
[:octicons-heart-fill-24:{ .mdx-heart } Insiders only][20]{ .mdx-insiders }
|
[:octicons-tag-24: insiders-3.1.0][Insiders]
|
||||||
|
|
||||||
#### Excluding pages
|
#### Excluding pages
|
||||||
|
|
||||||
@ -395,19 +400,19 @@ export function defaultTransform(query: string): string {
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
1. Search for terms in quotation marks and prepend a `+` modifier to denote
|
1. Search for terms in quotation marks and prepend a `+` modifier to denote
|
||||||
that the resulting document must contain all terms, converting the query
|
that the resulting document must contain all terms, converting the query
|
||||||
to an `AND` query (as opposed to the default `OR` behavior). While users
|
to an `AND` query (as opposed to the default `OR` behavior). While users
|
||||||
may expect terms enclosed in quotation marks to map to span queries, i.e.
|
may expect terms enclosed in quotation marks to map to span queries, i.e.
|
||||||
for which order is important, `lunr` doesn't support them, so the best
|
for which order is important, `lunr` doesn't support them, so the best
|
||||||
we can do is to convert the terms to an `AND` query.
|
we can do is to convert the terms to an `AND` query.
|
||||||
|
|
||||||
2. Replace control characters which are not located at the beginning of the
|
2. Replace control characters which are not located at the beginning of the
|
||||||
query or preceded by white space, or are not followed by a non-whitespace
|
query or preceded by white space, or are not followed by a non-whitespace
|
||||||
character or are at the end of the query string. Furthermore, filter
|
character or are at the end of the query string. Furthermore, filter
|
||||||
unmatched quotation marks.
|
unmatched quotation marks.
|
||||||
|
|
||||||
3. Trim excess whitespace from left and right.
|
3. Trim excess whitespace from left and right.
|
||||||
|
|
||||||
If you want to switch to the default behavior of the `mkdocs` and `readthedocs`
|
If you want to switch to the default behavior of the `mkdocs` and `readthedocs`
|
||||||
themes, both of which don't transform the query prior to submission, or
|
themes, both of which don't transform the query prior to submission, or
|
||||||
@ -434,7 +439,7 @@ and must return the processed query string to be submitted to the search index.
|
|||||||
|
|
||||||
[23]: https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/javascripts/integrations/search/transform/index.ts
|
[23]: https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/javascripts/integrations/search/transform/index.ts
|
||||||
[24]: ../customization.md#extending-the-theme
|
[24]: ../customization.md#extending-the-theme
|
||||||
[25]: ../customization.md#overriding-blocks-recommended
|
[25]: ../customization.md#overriding-blocks
|
||||||
|
|
||||||
### Custom search
|
### Custom search
|
||||||
|
|
||||||
|
@ -6,8 +6,8 @@ template: overrides/main.html
|
|||||||
|
|
||||||
Social cards, also known as social previews, are images that are displayed when
|
Social cards, also known as social previews, are images that are displayed when
|
||||||
a link to your project documentation is shared on social media. Material for
|
a link to your project documentation is shared on social media. Material for
|
||||||
MkDocs can generate beautiful social cards automatically, using the [colors][1],
|
MkDocs can generate beautiful social cards automatically, using the [colors]
|
||||||
[fonts][2] and [logo][3][^1] defined in `mkdocs.yml`.
|
[palette.primary], [fonts][font.text] and [logo][^1] defined in `mkdocs.yml`.
|
||||||
|
|
||||||
[^1]:
|
[^1]:
|
||||||
Both types of logos, images (`theme.logo`) and icons (`theme.icon.logo`)
|
Both types of logos, images (`theme.logo`) and icons (`theme.icon.logo`)
|
||||||
@ -15,69 +15,71 @@ MkDocs can generate beautiful social cards automatically, using the [colors][1],
|
|||||||
color used in the header (white or black), which depends on the primary
|
color used in the header (white or black), which depends on the primary
|
||||||
color.
|
color.
|
||||||
|
|
||||||
[1]: changing-the-colors.md#primary-color
|
[palette.primary]: changing-the-colors.md#primary-color
|
||||||
[2]: changing-the-fonts.md#regular-font
|
[font.text]: changing-the-fonts.md#regular-font
|
||||||
[3]: changing-the-logo-and-icons.md#logo
|
[logo]: changing-the-logo-and-icons.md#logo
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
### Built-in social cards
|
### Built-in social cards
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][4] ·
|
[:octicons-heart-fill-24:{ .mdx-heart } Insiders][Insiders]{ .mdx-insiders } ·
|
||||||
[:octicons-cpu-24: Plugin][4] ·
|
[:octicons-tag-24: insiders-2.12.0][Insiders] ·
|
||||||
:octicons-beaker-24: Experimental ·
|
:octicons-cpu-24: Plugin ·
|
||||||
[:octicons-heart-fill-24:{ .mdx-heart } Insiders only][4]{ .mdx-insiders }
|
:octicons-beaker-24: Experimental
|
||||||
|
|
||||||
The [built-in social cards plugin][4] generates a social card image for every
|
The built-in social cards plugin generates a social preview image for every page
|
||||||
page and adds the necessary meta tags, so it's displayed on social media when
|
and adds the necessary meta tags, so it's displayed on social media when shared.
|
||||||
shared. Enable it via `mkdocs.yml`:
|
First, ensure you've set [`site_url`][site_url] in `mkdocs.yml`.[^2] Then, add
|
||||||
|
the following lines to `mkdocs.yml` to enable the plugin:
|
||||||
|
|
||||||
|
[^2]:
|
||||||
|
When using this plugin, the [`site_url`][site_url] setting is mandatory, as
|
||||||
|
social preview images don't work with relative URLs.
|
||||||
|
|
||||||
``` yaml
|
``` yaml
|
||||||
plugins:
|
plugins:
|
||||||
- social
|
- social
|
||||||
```
|
```
|
||||||
|
|
||||||
For example, the page on [setting up site analytics][5] renders as:
|
For example, the page on [setting up site analytics] renders as:
|
||||||
|
|
||||||
<figure markdown="1">
|
<figure markdown>
|
||||||
|
|
||||||
[![Social Cards][6]][6]
|
[![Social cards preview]][Social cards preview]
|
||||||
|
|
||||||
<figcaption markdown="1">
|
<figcaption markdown>
|
||||||
|
|
||||||
Want to try it out? Copy the current URL and paste it into [Twitter's Card
|
Want to try it out? Copy the current URL and paste it into [Twitter's Card
|
||||||
validator][7] to see how social cards look in action.
|
validator] to see how social cards look in action.
|
||||||
|
|
||||||
</figcaption>
|
</figcaption>
|
||||||
</figure>
|
</figure>
|
||||||
|
|
||||||
This is a built-in plugin, which means that no third-party plugin needs to be
|
The following configuration options are available:
|
||||||
installed, as Material for MkDocs already bundles it. The following options
|
|
||||||
are available:
|
|
||||||
|
|
||||||
`cards_color`{ #cards_color } :material-new-box:
|
`cards_color`{ #cards-color }
|
||||||
|
|
||||||
: :octicons-milestone-24: Default: _automatically set based on [primary
|
: :octicons-milestone-24: Default: [primary color][palette.primary] + header
|
||||||
color][8]_ – This option specifies which colors to use for the background
|
text color – This option specifies which colors to use for the background
|
||||||
`fill` and foreground `text` when generating the social card.
|
`fill` and foreground `text` when generating the social card:
|
||||||
|
|
||||||
``` yaml
|
``` yaml
|
||||||
plugins:
|
plugins:
|
||||||
- social:
|
- social:
|
||||||
cards_color:
|
cards_color:
|
||||||
fill: "#0FF1CE"
|
fill: "#0FF1CE" # (1)
|
||||||
text: "#FFFFFF"
|
text: "#FFFFFF"
|
||||||
```
|
```
|
||||||
|
|
||||||
Note that the values for `fill` and `text` can either be HEX color values
|
1. Colors can either be defined as HEX colors, or as [CSS color keywords].
|
||||||
(e.g. `#0FF1CE`, must be enclosed in quotes) or CSS color keywords (e.g.
|
Note that HEX colors must be enclosed in quotes.
|
||||||
`red`, `green`, etc.).
|
|
||||||
|
|
||||||
`cards_directory`{ #cards_directory }
|
`cards_directory`{ #cards-directory }
|
||||||
|
|
||||||
: :octicons-milestone-24: Default: `assets/images/social` – This option
|
: :octicons-milestone-24: Default: `assets/images/social` – This option
|
||||||
specifies where the generated social card images will be written to. It
|
specifies where the generated social card images will be written to. It's
|
||||||
should normally not be necessary to change this option.
|
normally not necessary to change this option:
|
||||||
|
|
||||||
``` yaml
|
``` yaml
|
||||||
plugins:
|
plugins:
|
||||||
@ -85,24 +87,26 @@ are available:
|
|||||||
cards_directory: assets/images/social
|
cards_directory: assets/images/social
|
||||||
```
|
```
|
||||||
|
|
||||||
[4]: ../insiders/index.md
|
[Insiders]: ../insiders/index.md
|
||||||
[5]: setting-up-site-analytics.md
|
[site_url]: https://www.mkdocs.org/user-guide/configuration/#site_url
|
||||||
[6]: ../assets/screenshots/social-cards.png
|
[setting up site analytics]: setting-up-site-analytics.md
|
||||||
[7]: https://cards-dev.twitter.com/validator
|
[Social cards preview]: ../assets/screenshots/social-cards.png
|
||||||
[8]: changing-the-colors.md#primary-color
|
[Twitter's Card validator]: https://cards-dev.twitter.com/validator
|
||||||
|
[meta tags]: #meta-tags
|
||||||
|
[CSS color keywords]: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#color_keywords
|
||||||
|
|
||||||
#### Caching
|
#### Caching <small>recommended</small> { #caching data-toc-label="Caching" }
|
||||||
|
|
||||||
When enabled, the [social cards plugin][9] automatically fetches the fonts you
|
The [built-in social cards] plugin automatically fetches the fonts you define
|
||||||
define in `mkdocs.yml` from Google Fonts, and uses them to render the text that
|
in `mkdocs.yml` from Google Fonts, and uses them to render the text that is
|
||||||
is displayed on the social card. The font files and generated cards are both
|
displayed on the social card. The font files and generated cards are both
|
||||||
written to the `.cache` directory, which is used in subsequent builds to detect
|
written to the `.cache` directory, which is used in subsequent builds to detect
|
||||||
whether the social cards need to be regenerated. You might want to:
|
whether the social cards need to be regenerated. You might want to:
|
||||||
|
|
||||||
1. Ignore the `.cache` directory in your project, by adding it to `.gitignore`.
|
1. Ignore the `.cache` directory in your project, by adding it to `.gitignore`.
|
||||||
2. When building your site for publishing, use a build cache to save the
|
2. When building your site for publishing, use a build cache to save the
|
||||||
`.cache` directory in between builds. Taking the example from the
|
`.cache` directory in between builds. Taking the example from the
|
||||||
[publishing guide][10], add the following lines:
|
[publishing guide], add the following lines:
|
||||||
|
|
||||||
``` yaml hl_lines="15-18"
|
``` yaml hl_lines="15-18"
|
||||||
name: ci
|
name: ci
|
||||||
@ -127,18 +131,64 @@ whether the social cards need to be regenerated. You might want to:
|
|||||||
- run: mkdocs gh-deploy --force
|
- run: mkdocs gh-deploy --force
|
||||||
```
|
```
|
||||||
|
|
||||||
[9]: #built-in-social-cards
|
[built-in social cards]: #built-in-social-cards
|
||||||
[10]: ../publishing-your-site.md#with-github-actions
|
[publishing guide]: ../publishing-your-site.md#with-github-actions
|
||||||
|
|
||||||
|
#### Meta tags
|
||||||
|
|
||||||
|
The [built-in social cards] plugin automatically sets all necessary `meta` tags,
|
||||||
|
equivalent to the following two customizations, which you can set manually when
|
||||||
|
you don't want to use it:
|
||||||
|
|
||||||
|
=== ":material-graph: Open Graph"
|
||||||
|
|
||||||
|
``` html
|
||||||
|
{% block extrahead %}
|
||||||
|
{% set title = config.site_name %}
|
||||||
|
{% if page and page.meta and page.meta.title %}
|
||||||
|
{% set title = title ~ " - " ~ page.meta.title %}
|
||||||
|
{% elif page and page.title and not page.is_homepage %}
|
||||||
|
{% set title = title ~ " - " ~ page.title %}
|
||||||
|
{% endif %}
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:title" content="{{ title }}" />
|
||||||
|
<meta property="og:description" content="{{ config.site_description }}" />
|
||||||
|
<meta property="og:url" content="{{ page.canonical_url }}" />
|
||||||
|
<meta property="og:image" content="<url>" />
|
||||||
|
<meta property="og:image:type" content="image/png" />
|
||||||
|
<meta property="og:image:width" content="1200" />
|
||||||
|
<meta property="og:image:height" content="630" />
|
||||||
|
{% endblock %}
|
||||||
|
```
|
||||||
|
|
||||||
|
=== ":fontawesome-brands-twitter: Twitter Cards"
|
||||||
|
|
||||||
|
``` html
|
||||||
|
{% block extrahead %}
|
||||||
|
{% set title = config.site_name %}
|
||||||
|
{% if page and page.meta and page.meta.title %}
|
||||||
|
{% set title = title ~ " - " ~ page.meta.title %}
|
||||||
|
{% elif page and page.title and not page.is_homepage %}
|
||||||
|
{% set title = title ~ " - " ~ page.title %}
|
||||||
|
{% endif %}
|
||||||
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
|
<meta name="twitter:title" content="{{ title }}" />
|
||||||
|
<meta name="twitter:description" content="{{ config.site_description }}" />
|
||||||
|
<meta name="twitter:image" content="<url>" />
|
||||||
|
{% endblock %}
|
||||||
|
```
|
||||||
|
|
||||||
|
[Twitter Cards]: https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/abouts-cards
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
If you want to adjust the title or set a custom description for the social card,
|
If you want to adjust the title or set a custom description for the social card,
|
||||||
you can use the [Metadata][11] extension, which takes precedence over the
|
you can use the [Metadata] extension, which takes precedence over the
|
||||||
default values.
|
default values.
|
||||||
|
|
||||||
- [Changing the title][12]
|
- [Changing the title]
|
||||||
- [Changing the description][13]
|
- [Changing the description]
|
||||||
|
|
||||||
[11]: ../reference/meta-tags.md#metadata
|
[Metadata]: extensions/python-markdown.md#metadata
|
||||||
[12]: ../reference/meta-tags.md#setting-the-page-title
|
[Changing the title]: ../reference/meta-tags.md#setting-the-page-title
|
||||||
[13]: ../reference/meta-tags.md#setting-the-page-description
|
[Changing the description]: ../reference/meta-tags.md#setting-the-page-description
|
||||||
|
@ -13,12 +13,12 @@ can help to discover relevant information faster.
|
|||||||
|
|
||||||
### Built-in tags
|
### Built-in tags
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][1] ·
|
[:octicons-heart-fill-24:{ .mdx-heart } Insiders][Insiders]{ .mdx-insiders } ·
|
||||||
[:octicons-cpu-24: Plugin][1] ·
|
[:octicons-tag-24: insiders-2.7.0][Insiders] ·
|
||||||
:octicons-beaker-24: Experimental ·
|
:octicons-cpu-24: Plugin ·
|
||||||
[:octicons-heart-fill-24:{ .mdx-heart } Insiders only][1]{ .mdx-insiders }
|
:octicons-beaker-24: Experimental
|
||||||
|
|
||||||
The [built-in tags plugin][1] adds the ability to categorize any page with tags
|
The built-in tags plugin adds the ability to categorize any page with tags
|
||||||
as part of the front matter of the page. In order to add support for tags, add
|
as part of the front matter of the page. In order to add support for tags, add
|
||||||
the following lines to `mkdocs.yml`:
|
the following lines to `mkdocs.yml`:
|
||||||
|
|
||||||
@ -27,15 +27,13 @@ plugins:
|
|||||||
- tags
|
- tags
|
||||||
```
|
```
|
||||||
|
|
||||||
Note that no third-party plugin[^1] needs to be installed, as Material for
|
The following configuration options are available:
|
||||||
MkDocs provides its own implementation to allow for a meaningful integration.
|
|
||||||
The following options are available:
|
|
||||||
|
|
||||||
`tags_file`{ #tags_file }
|
`tags_file`{ #tags-file }
|
||||||
|
|
||||||
: :octicons-milestone-24: Default: _none_ – This option specifies which file
|
: :octicons-milestone-24: Default: _none_ – This option specifies which file
|
||||||
should be used to render the tags index. See the section on [adding a tags
|
should be used to render the tags index. See the section on [adding a tags
|
||||||
index][3] for more information. If this option is specified, tags will
|
index] for more information. If this option is specified, tags will
|
||||||
become clickable, pointing to the corresponding section in the tags index:
|
become clickable, pointing to the corresponding section in the tags index:
|
||||||
|
|
||||||
``` yaml
|
``` yaml
|
||||||
@ -49,31 +47,18 @@ The following options are available:
|
|||||||
option is not specified, tags are still rendered and searchable,
|
option is not specified, tags are still rendered and searchable,
|
||||||
but without a tags index.
|
but without a tags index.
|
||||||
|
|
||||||
[^1]:
|
[Insiders]: ../insiders/index.md
|
||||||
The built-in tags plugin has no affiliation with [mkdocs-plugin-tags][2],
|
[adding a tags index]: #adding-a-tags-index
|
||||||
another option to add tag support to MkDocs, which has several caveats:
|
|
||||||
it requires a `title` set in the front matter for every page for which tags
|
|
||||||
should be added, doesn't support all syntactic flavors of front matter,
|
|
||||||
doesn't integrate tags in search and doesn't render tags on pages without
|
|
||||||
additional effort. The built-in tags plugin supports all of these
|
|
||||||
features out-of-the-box.
|
|
||||||
|
|
||||||
[1]: ../insiders/index.md
|
|
||||||
[2]: https://github.com/jldiaz/mkdocs-plugin-tags
|
|
||||||
[3]: #adding-a-tags-index
|
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
### Adding tags
|
### Adding tags
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][1] ·
|
When both, the [built-in tags] plugin and [Metadata] extension are enabled,
|
||||||
:octicons-note-24: Metadata
|
tags can be added for a document with custom front matter. Add the following
|
||||||
|
lines at the top of a Markdown file:
|
||||||
|
|
||||||
If both, the [built-in tags plugin][4] and [Metadata][5] extension are enabled,
|
``` bash
|
||||||
tags can be added for any page as part of the front matter, e.g. to add the tags
|
|
||||||
`insiders` and `brand new` to this page, add:
|
|
||||||
|
|
||||||
``` yaml
|
|
||||||
---
|
---
|
||||||
tags:
|
tags:
|
||||||
- insiders
|
- insiders
|
||||||
@ -89,22 +74,22 @@ following screenshots:
|
|||||||
|
|
||||||
=== "Tags"
|
=== "Tags"
|
||||||
|
|
||||||
[![Tags][6]][6]
|
[![Tags preview]][Tags preview]
|
||||||
|
|
||||||
=== "Tag search"
|
=== "Tag search"
|
||||||
|
|
||||||
[![Tag search][7]][7]
|
[![Tag search preview]][Tag search preview]
|
||||||
|
|
||||||
[4]: #built-in-tags
|
[built-in tags]: #built-in-tags
|
||||||
[5]: ../../reference/meta-tags/#metadata
|
[Metadata]: extensions/python-markdown.md#metadata
|
||||||
[6]: ../assets/screenshots/tags.png
|
[Tags preview]: ../assets/screenshots/tags.png
|
||||||
[7]: ../assets/screenshots/tags-search.png
|
[Tag search preview]: ../assets/screenshots/tags-search.png
|
||||||
|
|
||||||
### Adding a tags index
|
### Adding a tags index
|
||||||
|
|
||||||
The [built-in tags plugin][4] allows to define a file to render a [tags
|
The [built-in tags] plugin allows to define a file to render a [tags index]
|
||||||
index][8], which can be any page that is part of the `nav` section. To add a
|
[tags.tags_file], which can be any page that is part of the `nav` section. To
|
||||||
tags index, create a page, e.g. `tags.md`:
|
add a tags index, create a page, e.g. `tags.md`:
|
||||||
|
|
||||||
``` markdown
|
``` markdown
|
||||||
# Tags
|
# Tags
|
||||||
@ -120,17 +105,14 @@ arbitrary content before and after the marker:
|
|||||||
|
|
||||||
[![Tags index][9]][9]
|
[![Tags index][9]][9]
|
||||||
|
|
||||||
[8]: #tags_file
|
[tags.tags_file]: #tags-file
|
||||||
[9]: ../assets/screenshots/tags-index.png
|
[9]: ../assets/screenshots/tags-index.png
|
||||||
|
|
||||||
### Hiding the tags
|
### Hiding the tags
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][1] ·
|
|
||||||
:octicons-note-24: Metadata
|
|
||||||
|
|
||||||
While the tags are rendered above the main headline, sometimes, it might be
|
While the tags are rendered above the main headline, sometimes, it might be
|
||||||
desirable to hide them for a specific page, which can be achieved by using the
|
desirable to hide them for a specific page, which can be achieved by using the
|
||||||
[Metadata][10] extension:
|
[Metadata] extension:
|
||||||
|
|
||||||
``` bash
|
``` bash
|
||||||
---
|
---
|
||||||
@ -141,5 +123,3 @@ hide:
|
|||||||
# Document title
|
# Document title
|
||||||
...
|
...
|
||||||
```
|
```
|
||||||
|
|
||||||
[10]: ../../reference/meta-tags/#metadata
|
|
||||||
|
@ -15,10 +15,10 @@ configured via `mkdocs.yml`.
|
|||||||
|
|
||||||
### Social links
|
### Social links
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][1] ·
|
[:octicons-tag-24: 1.0.0][Social links support] ·
|
||||||
:octicons-milestone-24: Default: _none_
|
:octicons-milestone-24: Default: _none_
|
||||||
|
|
||||||
All _social links_ are rendered next to the copyright information as part of the
|
Social links are rendered next to the copyright notice as part of the
|
||||||
footer of your project documentation. Add a list of social links in `mkdocs.yml`
|
footer of your project documentation. Add a list of social links in `mkdocs.yml`
|
||||||
with:
|
with:
|
||||||
|
|
||||||
@ -29,13 +29,14 @@ extra:
|
|||||||
link: https://twitter.com/squidfunk
|
link: https://twitter.com/squidfunk
|
||||||
```
|
```
|
||||||
|
|
||||||
For each entry, the following fields are available:
|
For each entry, the following settings are available:
|
||||||
|
|
||||||
`icon`{ #icon }
|
`icon`{ #social-icon }
|
||||||
|
|
||||||
: :octicons-milestone-24: Default: _none_ · :octicons-alert-24: Required –
|
: :octicons-milestone-24: Default: _none_ · :octicons-alert-24: Required –
|
||||||
This field must point to a valid icon path referencing [any icon bundled
|
This field must point to a valid icon path referencing [any icon bundled
|
||||||
with the theme][2], or the build will not succeed. Some popular choices:
|
with the theme][custom icons], or the build will not succeed. Some popular
|
||||||
|
choices:
|
||||||
|
|
||||||
* :fontawesome-brands-behance: – `fontawesome/brands/behance`
|
* :fontawesome-brands-behance: – `fontawesome/brands/behance`
|
||||||
* :fontawesome-brands-docker: – `fontawesome/brands/docker`
|
* :fontawesome-brands-docker: – `fontawesome/brands/docker`
|
||||||
@ -48,16 +49,16 @@ For each entry, the following fields are available:
|
|||||||
* :fontawesome-brands-slack: – `fontawesome/brands/slack`
|
* :fontawesome-brands-slack: – `fontawesome/brands/slack`
|
||||||
* :fontawesome-brands-twitter: – `fontawesome/brands/twitter`
|
* :fontawesome-brands-twitter: – `fontawesome/brands/twitter`
|
||||||
|
|
||||||
[1]: https://github.com/squidfunk/mkdocs-material/blob/master/src/partials/social.html
|
[Social links support]: https://github.com/squidfunk/mkdocs-material/releases/tag/1.0.0
|
||||||
[2]: https://github.com/squidfunk/mkdocs-material/tree/master/material/.icons
|
[custom icons]: https://github.com/squidfunk/mkdocs-material/tree/master/material/.icons
|
||||||
|
|
||||||
`link`{ #link }
|
`link`{ #social-link }
|
||||||
|
|
||||||
: :octicons-milestone-24: Default: _none_ · :octicons-alert-24: Required –
|
: :octicons-milestone-24: Default: _none_ · :octicons-alert-24: Required –
|
||||||
This field must contain a valid relative or absolute URL including the URI
|
This field must contain a valid relative or absolute URL including the URI
|
||||||
scheme. All URI schemes are supported, including `mailto` and `bitcoin`:
|
scheme. All URI schemes are supported, including `mailto` and `bitcoin`:
|
||||||
|
|
||||||
=== "Twitter"
|
=== ":fontawesome-brands-twitter: Twitter"
|
||||||
|
|
||||||
``` yaml
|
``` yaml
|
||||||
extra:
|
extra:
|
||||||
@ -66,7 +67,7 @@ For each entry, the following fields are available:
|
|||||||
link: https://twitter.com/squidfunk
|
link: https://twitter.com/squidfunk
|
||||||
```
|
```
|
||||||
|
|
||||||
=== "Email address"
|
=== ":octicons-mail-16: Email"
|
||||||
|
|
||||||
``` yaml
|
``` yaml
|
||||||
extra:
|
extra:
|
||||||
@ -75,7 +76,7 @@ For each entry, the following fields are available:
|
|||||||
link: mailto:<email-address>
|
link: mailto:<email-address>
|
||||||
```
|
```
|
||||||
|
|
||||||
`name`{ #name }
|
`name`{ #social-name }
|
||||||
|
|
||||||
: :octicons-milestone-24: Default: _domain name from_ `link`_, if available_ –
|
: :octicons-milestone-24: Default: _domain name from_ `link`_, if available_ –
|
||||||
This field is used as the link's `title` attribute and can be set to a
|
This field is used as the link's `title` attribute and can be set to a
|
||||||
@ -91,21 +92,23 @@ For each entry, the following fields are available:
|
|||||||
|
|
||||||
### Copyright notice
|
### Copyright notice
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][3] ·
|
[:octicons-tag-24: 0.1.0][Copyright notice support] ·
|
||||||
:octicons-milestone-24: Default: _none_
|
:octicons-milestone-24: Default: _none_
|
||||||
|
|
||||||
A custom _copyright banner_ can be rendered as part of the footer, which is
|
A custom copyright banner can be rendered as part of the footer, which is
|
||||||
displayed next to the social links. It can be defined as part of `mkdocs.yml`:
|
displayed next to the social links. It can be defined as part of `mkdocs.yml`:
|
||||||
|
|
||||||
``` yaml
|
``` yaml
|
||||||
copyright: Copyright © 2016 - 2020 Martin Donath
|
copyright: Copyright © 2016 - 2020 Martin Donath
|
||||||
```
|
```
|
||||||
|
|
||||||
|
[Copyright notice support]: https://github.com/squidfunk/mkdocs-material/releases/tag/0.1.0
|
||||||
[3]: https://github.com/squidfunk/mkdocs-material/blob/master/src/partials/footer.html
|
[3]: https://github.com/squidfunk/mkdocs-material/blob/master/src/partials/footer.html
|
||||||
|
|
||||||
### Remove generator
|
### Generator notice
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][3]
|
[:octicons-tag-24: 7.3.0][Generator notice support] ·
|
||||||
|
:octicons-milestone-24: Default: `true`
|
||||||
|
|
||||||
The footer displays a _Made with Material for MkDocs_ notice to denote how
|
The footer displays a _Made with Material for MkDocs_ notice to denote how
|
||||||
the site was generated. The notice can be removed with the following setting
|
the site was generated. The notice can be removed with the following setting
|
||||||
@ -121,25 +124,24 @@ extra:
|
|||||||
The subtle __Made with Material for MkDocs__ hint in the footer is one of
|
The subtle __Made with Material for MkDocs__ hint in the footer is one of
|
||||||
the reasons why this project is so popular, as it tells the user how the
|
the reasons why this project is so popular, as it tells the user how the
|
||||||
site is generated, helping new users to discover this project. Before
|
site is generated, helping new users to discover this project. Before
|
||||||
removing it, please consider that you're enjoying the benefits of
|
removing please consider that you're enjoying the benefits of @squidfunk's
|
||||||
@squidfunk's work for free, as this project is Open Source and has a
|
work for free, as this project is Open Source and has a permissive license.
|
||||||
permissive license. Thousands of hours went into this project, most of them
|
Thousands of hours went into this project, most of them
|
||||||
without any financial return. Thus, if you remove this notice, please
|
without any financial return.
|
||||||
consider [sponsoring][4] the project. __Thank you__
|
|
||||||
:octicons-heart-fill-24:{ .mdx-heart .mdx-insiders }
|
|
||||||
|
|
||||||
[4]: ../insiders/index.md
|
Thus, if you remove this notice, please consider [sponsoring][Insiders] the
|
||||||
|
project. __Thank you__ :octicons-heart-fill-24:{ .mdx-heart .mdx-insiders }
|
||||||
|
|
||||||
|
[Generator notice support]: https://github.com/squidfunk/mkdocs-material/releases/tag/7.3.0
|
||||||
|
[Insiders]: ../insiders/index.md
|
||||||
|
|
||||||
## Customization
|
## Customization
|
||||||
|
|
||||||
### Custom icons
|
### Custom icons
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][2] ·
|
The social links feature uses the standard [icon integration] of Material for
|
||||||
:octicons-mortar-board-24: Difficulty: _easy_
|
|
||||||
|
|
||||||
The social links feature uses the standard [icon integration][5] of Material for
|
|
||||||
MkDocs. If you want to use custom icons, follow the guide explaining how to
|
MkDocs. If you want to use custom icons, follow the guide explaining how to
|
||||||
add [additional icons][6].
|
add [additional icons].
|
||||||
|
|
||||||
[5]: changing-the-logo-and-icons.md#icons
|
[icon integration]: extensions/python-markdown-extensions.md#emoji
|
||||||
[6]: changing-the-logo-and-icons.md#additional-icons
|
[additional icons]: changing-the-logo-and-icons.md#additional-icons
|
||||||
|
@ -6,20 +6,20 @@ template: overrides/main.html
|
|||||||
|
|
||||||
Material for MkDocs' header can be customized to show an announcement bar that
|
Material for MkDocs' header can be customized to show an announcement bar that
|
||||||
disappears upon scrolling, and provides some options for further configuration.
|
disappears upon scrolling, and provides some options for further configuration.
|
||||||
It also includes the [search bar][1] and a place to display your project's
|
It also includes the [search bar] and a place to display your project's
|
||||||
[git repository][2], as explained in those dedicated guides.
|
[git repository], as explained in those dedicated guides.
|
||||||
|
|
||||||
[1]: setting-up-site-search.md
|
[search bar]: setting-up-site-search.md
|
||||||
[2]: adding-a-git-repository.md
|
[git repository]: adding-a-git-repository.md
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
### Automatic hiding
|
### Automatic hiding
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][3] ·
|
[:octicons-tag-24: 6.2.0][Automatic hiding support] ·
|
||||||
:octicons-unlock-24: Feature flag
|
:octicons-unlock-24: Feature flag
|
||||||
|
|
||||||
When _autohiding_ is enabled, the header is automatically hidden when the
|
When autohiding is enabled, the header is automatically hidden when the
|
||||||
user scrolls past a certain threshold, leaving more space for content. Add the
|
user scrolls past a certain threshold, leaving more space for content. Add the
|
||||||
following lines to `mkdocs.yml`:
|
following lines to `mkdocs.yml`:
|
||||||
|
|
||||||
@ -29,25 +29,27 @@ theme:
|
|||||||
- header.autohide
|
- header.autohide
|
||||||
```
|
```
|
||||||
|
|
||||||
[3]: https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/stylesheets/main/layout/_header.scss
|
[Automatic hiding support]: https://github.com/squidfunk/mkdocs-material/releases/tag/6.2.0
|
||||||
|
|
||||||
## Customization
|
|
||||||
|
|
||||||
### Announcement bar
|
### Announcement bar
|
||||||
|
|
||||||
|
[:octicons-tag-24: 5.0.0][Announcement bar support] ·
|
||||||
|
:octicons-file-symlink-file-24: Customization
|
||||||
|
|
||||||
Material for MkDocs includes an announcement bar, which is the perfect place to
|
Material for MkDocs includes an announcement bar, which is the perfect place to
|
||||||
display project news or other important information to the user. When the user
|
display project news or other important information to the user. When the user
|
||||||
scrolls past the header, the bar will automatically disappear. In order to add
|
scrolls past the header, the bar will automatically disappear. In order to add
|
||||||
an announcement bar, [extend the theme][4] and [override the `announce`
|
an announcement bar, [extend the theme] and [override the `announce`
|
||||||
block][5], which is empty by default:
|
block][overriding blocks], which is empty by default:
|
||||||
|
|
||||||
``` html
|
``` html
|
||||||
{% extends "base.html" %}
|
{% extends "base.html" %}
|
||||||
|
|
||||||
{% block announce %}
|
{% block announce %}
|
||||||
<!-- Add your announcement here, including arbitrary HTML -->
|
<!-- Add announcement here, including arbitrary HTML -->
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
```
|
```
|
||||||
|
|
||||||
[4]: ../customization.md#extending-the-theme
|
[Announcement bar support]: https://github.com/squidfunk/mkdocs-material/releases/tag/6.2.0
|
||||||
[5]: ../customization.md#overriding-blocks-recommended
|
[extend the theme]: ../customization.md#extending-the-theme
|
||||||
|
[overriding blocks]: ../customization.md#overriding-blocks
|
||||||
|
@ -6,21 +6,21 @@ template: overrides/main.html
|
|||||||
|
|
||||||
Material for MkDocs makes it easy to deploy multiple versions of your project
|
Material for MkDocs makes it easy to deploy multiple versions of your project
|
||||||
documentation by integrating with external utilities that add those capabilities
|
documentation by integrating with external utilities that add those capabilities
|
||||||
to MkDocs, i.e. [mike][1]. When deploying a new version, older versions of your
|
to MkDocs, i.e. [mike]. When deploying a new version, older versions of your
|
||||||
documentation remain untouched.
|
documentation remain untouched.
|
||||||
|
|
||||||
[1]: https://github.com/jimporter/mike
|
[mike]: https://github.com/jimporter/mike
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
### Versioning
|
### Versioning
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][2] ·
|
[:octicons-tag-24: 7.0.0][version support] ·
|
||||||
[:octicons-package-24: Utility][1]
|
[:octicons-package-24: Utility][mike]
|
||||||
|
|
||||||
[mike][1] makes it easy to deploy multiple versions of your project
|
[mike] makes it easy to deploy multiple versions of your project documentation.
|
||||||
documentation. It integrates natively with Material for MkDocs and can be
|
It integrates natively with Material for MkDocs and can be enabled via
|
||||||
enabled via `mkdocs.yml`:
|
`mkdocs.yml`:
|
||||||
|
|
||||||
``` yaml
|
``` yaml
|
||||||
extra:
|
extra:
|
||||||
@ -28,22 +28,21 @@ extra:
|
|||||||
provider: mike
|
provider: mike
|
||||||
```
|
```
|
||||||
|
|
||||||
This will render a version selector in the header next to the title of your
|
This renders a version selector in the header:
|
||||||
project:
|
|
||||||
|
|
||||||
<figure markdown="1">
|
<figure markdown>
|
||||||
|
|
||||||
[![Version selection][3]][3]
|
[![Version selector preview]][Version selector preview]
|
||||||
|
|
||||||
<figcaption markdown="1">
|
<figcaption markdown>
|
||||||
|
|
||||||
A demo is worth a thousand words — check it out at
|
Check out the versioning example to see it in action –
|
||||||
[squidfunk.github.io/mkdocs-material-example-versioning][4]
|
[squidfunk.github.io/mkdocs-material-example-versioning][version example]
|
||||||
|
|
||||||
</figcaption>
|
</figcaption>
|
||||||
</figure>
|
</figure>
|
||||||
|
|
||||||
!!! quote "[Why use mike?][5]"
|
!!! quote "[Why use mike?]"
|
||||||
|
|
||||||
mike is built around the idea that once you've generated your docs for a
|
mike is built around the idea that once you've generated your docs for a
|
||||||
particular version, you should never need to touch that version again. This
|
particular version, you should never need to touch that version again. This
|
||||||
@ -56,24 +55,20 @@ A demo is worth a thousand words — check it out at
|
|||||||
to particularly notable versions. This makes it easy to make permalinks to
|
to particularly notable versions. This makes it easy to make permalinks to
|
||||||
whatever version of the documentation you want to direct people to.
|
whatever version of the documentation you want to direct people to.
|
||||||
|
|
||||||
_Note that you don't need to run_ `mike install-extras` _as noted in the
|
[version support]: https://github.com/squidfunk/mkdocs-material/releases/tag/5.2.0
|
||||||
[official documentation][6], as [mike][1] is now natively integrated with
|
[Version selector preview]: ../assets/screenshots/versioning.png
|
||||||
Material for MkDocs._
|
[version example]: https://squidfunk.github.io/mkdocs-material-example-versioning/
|
||||||
|
[Why use mike?]: https://github.com/jimporter/mike#why-use-mike
|
||||||
[2]: https://github.com/squidfunk/mkdocs-material/blob/master/src/partials/header.html
|
|
||||||
[3]: ../assets/screenshots/versioning.png
|
|
||||||
[4]: https://squidfunk.github.io/mkdocs-material-example-versioning/
|
|
||||||
[5]: https://github.com/jimporter/mike#why-use-mike
|
|
||||||
[6]: https://github.com/jimporter/mike#usage
|
|
||||||
|
|
||||||
### Version warning
|
### Version warning
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][7] ·
|
[:octicons-heart-fill-24:{ .mdx-heart } Insiders][Insiders]{ .mdx-insiders } ·
|
||||||
[:octicons-heart-fill-24:{ .mdx-heart } Insiders only][7]{ .mdx-insiders }
|
[:octicons-tag-24: insiders-2.5.0][Insiders] ·
|
||||||
|
:octicons-file-symlink-file-24: Customization
|
||||||
|
|
||||||
If you're using versioning, you might want to display a warning when the user
|
If you're using versioning, you might want to display a warning when the user
|
||||||
visits any other version than the latest version. Using [theme extension][8],
|
visits any other version than the latest version. Using [theme extension],
|
||||||
you can [define the `outdated` block][9]:
|
you can [override the `outdated` block][overriding blocks]:
|
||||||
|
|
||||||
``` html
|
``` html
|
||||||
{% extends "base.html" %}
|
{% extends "base.html" %}
|
||||||
@ -86,19 +81,19 @@ you can [define the `outdated` block][9]:
|
|||||||
{% endblock %}
|
{% endblock %}
|
||||||
```
|
```
|
||||||
|
|
||||||
1. Given this value for the `href` attribute, the link will always redirect to
|
1. Given this value for the `href` attribute, the link will always redirect to
|
||||||
the root of your site, which will then redirect to the latest version. This
|
the root of your site, which will then redirect to the latest version. This
|
||||||
ensures that older versions of your site do not depend on a specific alias,
|
ensures that older versions of your site do not depend on a specific alias,
|
||||||
e.g. `latest`, to allow for changing the alias later on without breaking
|
e.g. `latest`, to allow for changing the alias later on without breaking
|
||||||
earlier versions.
|
earlier versions.
|
||||||
|
|
||||||
This will render a version warning above the header:
|
This will render a version warning above the header:
|
||||||
|
|
||||||
[![Version warning][10]][10]
|
[![Version warning preview]][Version warning preview]
|
||||||
|
|
||||||
By default, the default version is identified by the `latest` alias. If you
|
The default version is identified by the `latest` alias. If you wish to set
|
||||||
wish to set another alias as the latest version, e.g. `stable`, add the
|
another alias as the latest version, e.g. `stable`, add the following lines
|
||||||
following to `mkdocs.yml`:
|
to `mkdocs.yml`:
|
||||||
|
|
||||||
``` yaml
|
``` yaml
|
||||||
extra:
|
extra:
|
||||||
@ -106,18 +101,18 @@ extra:
|
|||||||
default: stable
|
default: stable
|
||||||
```
|
```
|
||||||
|
|
||||||
Make sure that this matches the [default version][11].
|
Make sure that this matches the [default version].
|
||||||
|
|
||||||
[7]: ../insiders/index.md
|
[Insiders]: ../insiders/index.md
|
||||||
[8]: ../customization.md#extending-the-theme
|
[theme extension]: ../customization.md#extending-the-theme
|
||||||
[9]: ../customization.md#overriding-blocks-recommended
|
[overriding blocks]: ../customization.md#overriding-blocks
|
||||||
[10]: ../assets/screenshots/version-warning.png
|
[Version warning preview]: ../assets/screenshots/version-warning.png
|
||||||
[11]: #setting-a-default-version
|
[default version]: #setting-a-default-version
|
||||||
|
|
||||||
### Stay on page
|
### Stay on page
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][7] ·
|
[:octicons-heart-fill-24:{ .mdx-heart } Insiders][Insiders]{ .mdx-insiders } ·
|
||||||
[:octicons-heart-fill-24:{ .mdx-heart } Insiders only][7]{ .mdx-insiders }
|
[:octicons-tag-24: insiders-2.6.0][Insiders]
|
||||||
|
|
||||||
Insiders improves the user experience when switching between versions: if
|
Insiders improves the user experience when switching between versions: if
|
||||||
version A and B contain a page with the same path name, the user will stay on
|
version A and B contain a page with the same path name, the user will stay on
|
||||||
@ -139,21 +134,11 @@ the current page:
|
|||||||
docs.example.com/0.1/bar/ -> docs.example.com/0.2/
|
docs.example.com/0.1/bar/ -> docs.example.com/0.2/
|
||||||
```
|
```
|
||||||
|
|
||||||
<figure markdown="1">
|
|
||||||
<figcaption markdown="1">
|
|
||||||
|
|
||||||
A demo is worth a thousand words — check it out at
|
|
||||||
[squidfunk.github.io/mkdocs-material-example-versioning][4]
|
|
||||||
|
|
||||||
</figcaption>
|
|
||||||
</figure>
|
|
||||||
|
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
While this section outlines the basic workflow for publishing new versions,
|
While this section outlines the basic workflow for publishing new versions,
|
||||||
it's best to check out the [official documentation][6] to make yourself familar
|
it's best to check out [mike's documentation][mike] to make yourself familar
|
||||||
with [mike][1].
|
with its mechanics.
|
||||||
|
|
||||||
### Publishing a new version
|
### Publishing a new version
|
||||||
|
|
||||||
@ -173,15 +158,15 @@ e.g.:
|
|||||||
|
|
||||||
### Setting a default version
|
### Setting a default version
|
||||||
|
|
||||||
When starting with [mike][1], a good idea is to set an alias as a default
|
When starting with [mike], a good idea is to set an alias as a default version,
|
||||||
version, e.g. `latest`, and when publishing a new version, always update the
|
e.g. `latest`, and when publishing a new version, always update the alias to
|
||||||
alias to point to the latest version:
|
point to the latest version:
|
||||||
|
|
||||||
```
|
```
|
||||||
mike set-default --push latest
|
mike set-default --push latest
|
||||||
```
|
```
|
||||||
|
|
||||||
When publishing a new version, [mike][1] will create a redirect in the root of
|
When publishing a new version, [mike] will create a redirect in the root of
|
||||||
your project documentation to the version associated with the alias:
|
your project documentation to the version associated with the alias:
|
||||||
|
|
||||||
_docs.example.com_ :octicons-arrow-right-24: _docs.example.com/0.1_
|
_docs.example.com_ :octicons-arrow-right-24: _docs.example.com/0.1_
|
||||||
|
@ -1,117 +0,0 @@
|
|||||||
---
|
|
||||||
template: overrides/main.html
|
|
||||||
---
|
|
||||||
|
|
||||||
# Troubleshooting
|
|
||||||
|
|
||||||
## Theme not recognized
|
|
||||||
|
|
||||||
Operating systems:
|
|
||||||
:fontawesome-brands-apple:
|
|
||||||
:fontawesome-brands-windows:
|
|
||||||
:fontawesome-brands-linux:
|
|
||||||
|
|
||||||
!!! error "Error: Unrecognized theme"
|
|
||||||
|
|
||||||
``` sh
|
|
||||||
mkdocs serve
|
|
||||||
# => INFO - Building documentation...
|
|
||||||
# => ERROR - Config value: 'theme'. Error: Unrecognised theme 'material'.
|
|
||||||
# => ...
|
|
||||||
# => ConfigurationError: Aborted with 1 Configuration Errors!
|
|
||||||
```
|
|
||||||
|
|
||||||
If you run into this error, the most common reason is that you installed MkDocs
|
|
||||||
through some package manager (e.g. `brew` or `apt-get`) and Material for MkDocs
|
|
||||||
through `pip`, so both packages end up in different locations. MkDocs only
|
|
||||||
checks its install location for themes.
|
|
||||||
|
|
||||||
## Inadequate permissions
|
|
||||||
|
|
||||||
Operating systems: :fontawesome-brands-apple:
|
|
||||||
|
|
||||||
!!! error "Error: Permission denied"
|
|
||||||
|
|
||||||
``` sh
|
|
||||||
pip install mkdocs-material
|
|
||||||
# => Could not install packages due to an EnvironmentError: [Errno 13] Permission denied: '...'
|
|
||||||
# => Consider using the --user option or check the permissions.
|
|
||||||
```
|
|
||||||
|
|
||||||
When you're running the pre-installed version of Python on macOS, `pip` tries
|
|
||||||
to install packages in a folder for which your user might not have the adequate
|
|
||||||
permissions. There are three possible solutions for this, the recommended one
|
|
||||||
of which is to use virtual environments:
|
|
||||||
|
|
||||||
=== "Virtual environments"
|
|
||||||
|
|
||||||
If you're installing Material for MkDocs with `pip`, the easiest way to make
|
|
||||||
sure that you end up with the correct versions and without any
|
|
||||||
incompatibility problems between packages it to use a [virtual
|
|
||||||
environment][1]. First, ensure that you have a Python version of 3 or
|
|
||||||
higher installed:
|
|
||||||
|
|
||||||
```
|
|
||||||
python --version
|
|
||||||
```
|
|
||||||
|
|
||||||
If you're good to go, create and activate a virtual environment with:
|
|
||||||
|
|
||||||
```
|
|
||||||
python -m venv venv
|
|
||||||
source ./venv/bin/activate
|
|
||||||
```
|
|
||||||
|
|
||||||
Note that the second `venv` is the name of the folder where to create the
|
|
||||||
virtual environment – you may choose it as you like. Your terminal should
|
|
||||||
now print `(venv)` before the prompt and the `python` executable should be
|
|
||||||
located inside the folder you just created.
|
|
||||||
|
|
||||||
Next, [install Material for MkDocs][2] with `pip`, which will download and
|
|
||||||
install all packages in the `venv` folder you just created, including MkDocs
|
|
||||||
and its dependencies:
|
|
||||||
|
|
||||||
```
|
|
||||||
pip install mkdocs-material
|
|
||||||
```
|
|
||||||
|
|
||||||
Verify that MkDocs and Material for MkDocs were both installed correctly:
|
|
||||||
|
|
||||||
```
|
|
||||||
mkdocs --version
|
|
||||||
mkdocs serve --help
|
|
||||||
```
|
|
||||||
|
|
||||||
MkDocs should list `material` as an option under the `--theme` flag. When
|
|
||||||
you're finished working with MkDocs, you can exit the virtual environment
|
|
||||||
with:
|
|
||||||
|
|
||||||
```
|
|
||||||
deactivate
|
|
||||||
```
|
|
||||||
|
|
||||||
=== "User space"
|
|
||||||
|
|
||||||
Provide the `--user` flag to the install command and `pip` will install the
|
|
||||||
package in a user-site location. While this is not a global installation,
|
|
||||||
it's still not isolated and may lead to problems when you use different
|
|
||||||
versions of Material for MkDocs in other projects:
|
|
||||||
|
|
||||||
```
|
|
||||||
pip install --user mkdocs-material
|
|
||||||
```
|
|
||||||
|
|
||||||
=== "Upgrade Python"
|
|
||||||
|
|
||||||
Upgrade your Python installation by installing Python with [Homebrew][3].
|
|
||||||
This should eliminate a lot of problems you will run into with `pip`. Yet,
|
|
||||||
it's still not an isolated installation which may also lead to the same
|
|
||||||
problems as installing in user space:
|
|
||||||
|
|
||||||
```
|
|
||||||
brew upgrade python
|
|
||||||
```
|
|
||||||
|
|
||||||
[1]: https://docs.python.org/3/tutorial/venv.html
|
|
||||||
[2]: getting-started.md#with-pip-recommended
|
|
||||||
[3]: https://brew.sh/
|
|
@ -2,7 +2,7 @@
|
|||||||
template: overrides/main.html
|
template: overrides/main.html
|
||||||
---
|
---
|
||||||
|
|
||||||
# Upgrading
|
# How to upgrade
|
||||||
|
|
||||||
Upgrade to the latest version with:
|
Upgrade to the latest version with:
|
||||||
|
|
||||||
@ -10,7 +10,7 @@ Upgrade to the latest version with:
|
|||||||
pip install --upgrade mkdocs-material
|
pip install --upgrade mkdocs-material
|
||||||
```
|
```
|
||||||
|
|
||||||
Inspect the currently installed version with:
|
Show the currently installed version with:
|
||||||
|
|
||||||
```
|
```
|
||||||
pip show mkdocs-material
|
pip show mkdocs-material
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
2
material/assets/stylesheets/main.2ec5b002.min.css
vendored
Normal file
2
material/assets/stylesheets/main.2ec5b002.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1
material/assets/stylesheets/main.2ec5b002.min.css.map
Normal file
1
material/assets/stylesheets/main.2ec5b002.min.css.map
Normal file
File diff suppressed because one or more lines are too long
@ -39,7 +39,7 @@
|
|||||||
{% endif %}
|
{% endif %}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
{% block styles %}
|
{% block styles %}
|
||||||
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.24c991ad.min.css' | url }}">
|
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.2ec5b002.min.css' | url }}">
|
||||||
{% if config.theme.palette %}
|
{% if config.theme.palette %}
|
||||||
{% set palette = config.theme.palette %}
|
{% set palette = config.theme.palette %}
|
||||||
<link rel="stylesheet" href="{{ 'assets/stylesheets/palette.3f5d1f46.min.css' | url }}">
|
<link rel="stylesheet" href="{{ 'assets/stylesheets/palette.3f5d1f46.min.css' | url }}">
|
||||||
|
2
material/overrides/assets/stylesheets/main.5136944a.min.css
vendored
Normal file
2
material/overrides/assets/stylesheets/main.5136944a.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -3,7 +3,7 @@
|
|||||||
-#}
|
-#}
|
||||||
{% extends "base.html" %}
|
{% extends "base.html" %}
|
||||||
{% block extrahead %}
|
{% block extrahead %}
|
||||||
<link rel="stylesheet" href="{{ 'overrides/assets/stylesheets/main.9307850e.min.css' | url }}">
|
<link rel="stylesheet" href="{{ 'overrides/assets/stylesheets/main.5136944a.min.css' | url }}">
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
{% block announce %}
|
{% block announce %}
|
||||||
<a href="https://twitter.com/squidfunk">
|
<a href="https://twitter.com/squidfunk">
|
||||||
|
29
mkdocs.yml
29
mkdocs.yml
@ -51,7 +51,7 @@ theme:
|
|||||||
language: en
|
language: en
|
||||||
features:
|
features:
|
||||||
- content.code.annotate
|
- content.code.annotate
|
||||||
- content.tabs.link
|
# - content.tabs.link
|
||||||
# - header.autohide
|
# - header.autohide
|
||||||
# - navigation.expand
|
# - navigation.expand
|
||||||
- navigation.indexes
|
- navigation.indexes
|
||||||
@ -91,18 +91,7 @@ plugins:
|
|||||||
- redirects:
|
- redirects:
|
||||||
redirect_maps:
|
redirect_maps:
|
||||||
changelog/insiders.md: insiders/changelog.md
|
changelog/insiders.md: insiders/changelog.md
|
||||||
extensions/admonition.md: reference/admonitions.md
|
upgrading.md: upgrade.md
|
||||||
extensions/codehilite.md: reference/code-blocks.md
|
|
||||||
extensions/footnotes.md: reference/footnotes.md
|
|
||||||
extensions/metadata.md: reference/meta-tags.md
|
|
||||||
extensions/permalinks.md: setup/setting-up-navigation.md #permalink
|
|
||||||
extensions/pymdown.md: reference/admonitions.md
|
|
||||||
plugins/revision-date.md: setup/adding-a-git-repository.md #revision-date
|
|
||||||
plugins/search.md: setup/setting-up-site-search.md
|
|
||||||
releases/4.md: upgrading.md #upgrading-from-4x-to-5x
|
|
||||||
releases/5.md: upgrading.md #upgrading-from-3x-to-4x
|
|
||||||
releases/changelog.md: changelog.md
|
|
||||||
setup/adding-social-links.md: setup/setting-up-the-footer.md
|
|
||||||
sponsorship.md: insiders/index.md
|
sponsorship.md: insiders/index.md
|
||||||
- minify:
|
- minify:
|
||||||
minify_html: true
|
minify_html: true
|
||||||
@ -174,13 +163,10 @@ nav:
|
|||||||
- Creating your site: creating-your-site.md
|
- Creating your site: creating-your-site.md
|
||||||
- Publishing your site: publishing-your-site.md
|
- Publishing your site: publishing-your-site.md
|
||||||
- Customization: customization.md
|
- Customization: customization.md
|
||||||
- Troubleshooting: troubleshooting.md
|
|
||||||
- Data privacy: data-privacy.md
|
|
||||||
- License: license.md
|
- License: license.md
|
||||||
- Releases:
|
- Changelog:
|
||||||
- Changelog: changelog.md
|
- changelog/index.md
|
||||||
- Upgrade guide: upgrading.md
|
- How to upgrade: upgrade.md
|
||||||
- Deprecations: deprecations.md
|
|
||||||
- Setup:
|
- Setup:
|
||||||
- Changing the colors: setup/changing-the-colors.md
|
- Changing the colors: setup/changing-the-colors.md
|
||||||
- Changing the fonts: setup/changing-the-fonts.md
|
- Changing the fonts: setup/changing-the-fonts.md
|
||||||
@ -196,6 +182,10 @@ nav:
|
|||||||
- Setting up the footer: setup/setting-up-the-footer.md
|
- Setting up the footer: setup/setting-up-the-footer.md
|
||||||
- Adding a git repository: setup/adding-a-git-repository.md
|
- Adding a git repository: setup/adding-a-git-repository.md
|
||||||
- Adding a comment system: setup/adding-a-comment-system.md
|
- Adding a comment system: setup/adding-a-comment-system.md
|
||||||
|
- Extensions:
|
||||||
|
- setup/extensions/index.md
|
||||||
|
- Python Markdown: setup/extensions/python-markdown.md
|
||||||
|
- Python Markdown Extensions: setup/extensions/python-markdown-extensions.md
|
||||||
- Reference:
|
- Reference:
|
||||||
- Abbreviations: reference/abbreviations.md
|
- Abbreviations: reference/abbreviations.md
|
||||||
- Admonitions: reference/admonitions.md
|
- Admonitions: reference/admonitions.md
|
||||||
@ -211,7 +201,6 @@ nav:
|
|||||||
- Lists: reference/lists.md
|
- Lists: reference/lists.md
|
||||||
- MathJax: reference/mathjax.md
|
- MathJax: reference/mathjax.md
|
||||||
- Meta tags: reference/meta-tags.md
|
- Meta tags: reference/meta-tags.md
|
||||||
- Variables: reference/variables.md
|
|
||||||
- Insiders:
|
- Insiders:
|
||||||
- insiders/index.md
|
- insiders/index.md
|
||||||
- Getting started:
|
- Getting started:
|
||||||
|
@ -150,12 +150,6 @@ $admonitions: (
|
|||||||
left: initial;
|
left: initial;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Adjust spacing on last tabbed block container child - if the tabbed
|
|
||||||
// block container is the sole child, it looks better to omit the margin
|
|
||||||
+ .tabbed-set:last-child {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -50,7 +50,6 @@
|
|||||||
// Adjust for right-to-left languages
|
// Adjust for right-to-left languages
|
||||||
[dir="rtl"] & {
|
[dir="rtl"] & {
|
||||||
margin-right: px2rem(24px);
|
margin-right: px2rem(24px);
|
||||||
margin-left: px2rem(16px);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -60,7 +59,6 @@
|
|||||||
|
|
||||||
// Adjust for right-to-left languages
|
// Adjust for right-to-left languages
|
||||||
[dir="rtl"] & {
|
[dir="rtl"] & {
|
||||||
margin-right: px2rem(16px);
|
|
||||||
margin-left: px2rem(24px);
|
margin-left: px2rem(24px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -78,7 +78,7 @@
|
|||||||
{% endif %}
|
{% endif %}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
<!-- Theme-related stylesheets -->
|
<!-- Theme-related style sheets -->
|
||||||
{% block styles %}
|
{% block styles %}
|
||||||
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.css' | url }}" />
|
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.css' | url }}" />
|
||||||
|
|
||||||
@ -136,7 +136,7 @@
|
|||||||
/>
|
/>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
<!-- Custom stylesheets -->
|
<!-- Custom style sheets -->
|
||||||
{% for path in config["extra_css"] %}
|
{% for path in config["extra_css"] %}
|
||||||
<link rel="stylesheet" href="{{ path | url }}" />
|
<link rel="stylesheet" href="{{ path | url }}" />
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
@ -104,6 +104,18 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Deprecation
|
||||||
|
.mdx-deprecated {
|
||||||
|
opacity: 0.5;
|
||||||
|
transition: opacity 250ms;
|
||||||
|
|
||||||
|
// Deprecation on focus/hover
|
||||||
|
&:focus-within,
|
||||||
|
&:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Two-column layout
|
// Two-column layout
|
||||||
.mdx-columns {
|
.mdx-columns {
|
||||||
|
|
||||||
|
@ -25,7 +25,7 @@
|
|||||||
<!-- Custom front matter -->
|
<!-- Custom front matter -->
|
||||||
{% block extrahead %}
|
{% block extrahead %}
|
||||||
|
|
||||||
<!-- Extra stylesheets (can't be set in mkdocs.yml due to content hash) -->
|
<!-- Extra style sheets (can't be set in mkdocs.yml due to content hash) -->
|
||||||
<link
|
<link
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
href="{{ 'overrides/assets/stylesheets/main.css' | url }}"
|
href="{{ 'overrides/assets/stylesheets/main.css' | url }}"
|
||||||
|
Loading…
Reference in New Issue
Block a user