Added lists reference and repository guide

This commit is contained in:
squidfunk 2020-07-21 13:33:44 +02:00
parent be485a25e5
commit 0f6357994a
16 changed files with 444 additions and 155 deletions

View File

@ -4,31 +4,96 @@ template: overrides/main.html
# Adding a git repository
- link edit button
- link related source file (via metadata)
If your documentation is related to source code, Material for MkDocs provides
the ability to display information to the project's repository as part of the
static site, including statistics like stars and forks. Furthermore, certain
documents can be linked to specific source files.
## Configuration
To include a link to the repository of your project within your documentation,
set the following variables via your project's `mkdocs.yml`:
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
repository, e.g.:
``` yaml
repo_name: squidfunk/mkdocs-material
repo_url: https://github.com/squidfunk/mkdocs-material
```
The name of 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.
Additionally, for GitHub and GitLab, the number of stars and forks is shown.
Note that the repository icon can be explicitly set through `theme.icon.repo`.
Additionally, for GitHub and GitLab, the number of stars and forks is
automatically requested and rendered for _public repositories_.
!!! question "Why is there an edit button at the top of every article?"
[1]: https://www.mkdocs.org/user-guide/configuration/#repo_url
If the `repo_url` is set to a GitHub or BitBucket repository, and the
`repo_name` is set to *GitHub* or *BitBucket* (implied by default), an
edit button will appear at the top of every article. This is the automatic
behavior that MkDocs implements. See the [MkDocs documentation][20] on more
guidance regarding the `edit_uri` attribute, which defines whether the edit
button is shown or not.
### Repository name
[20]: https://www.mkdocs.org/user-guide/configuration/#edit_uri
[:octicons-file-code-24: Source][2] · :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
_repository name_ automatically. If you wish to customize the name, set
[`repo_name`][3] in `mkdocs.yml`:
``` yaml
repo_name: squidfunk/mkdocs-material
```
[2]: https://github.com/squidfunk/mkdocs-material/blob/master/src/partials/source.html
[3]: https://www.mkdocs.org/user-guide/configuration/#repo_url
### Repository icon
[:octicons-file-code-24: Source][1] · :octicons-milestone-24: Default:
`fontawesome/brands/git-alt`
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
`mkdocs.yml`:
``` yaml
theme:
icon:
repo: fontawesome/brands/git-alt
```
Some popular repository icons:
- :fontawesome-brands-git: `:fontawesome-brands-git:`
- :fontawesome-brands-git-square: `:fontawesome-brands-git-square:`
- :fontawesome-brands-github: `:fontawesome-brands-github:`
- :fontawesome-brands-github-alt: `:fontawesome-brands-github-alt:`
- :fontawesome-brands-github-square: `:fontawesome-brands-github-square:`
- :fontawesome-brands-gitlab: `:fontawesome-brands-gitlab:`
- :fontawesome-brands-gitkraken: `:fontawesome-brands-gitkraken:`
- :fontawesome-brands-bitbucket: `:fontawesome-brands-bitbucket:`
- :fontawesome-solid-trash: `:fontawesome-solid-trash:`
[4]: https://github.com/squidfunk/mkdocs-material/tree/master/material/.icons
### Edit button
[:octicons-file-code-24: Source][5] · :octicons-milestone-24: Default:
_automatically set_
If the repository URL points to a [GitHub][6], [GitLab][7] or [Bitbucket][8]
repository, an _edit button_ is displayed at the top of each document. This
behavior can be changed by setting [`edit_uri`][9] in `mkdocs.yml`:
=== "Customize edit path"
``` yaml
edit_uri: edit/master/docs/
```
=== "Hide edit button"
``` yaml
edit_uri: ""
```
[5]: https://github.com/squidfunk/mkdocs-material/blob/master/src/base.html#L299-L308
[6]: https://github.com/
[7]: https://about.gitlab.com/
[8]: https://bitbucket.org/
[9]: https://www.mkdocs.org/user-guide/configuration/#edit_uri

View File

@ -7,7 +7,7 @@ template: overrides/main.html
As any good Material Design implementation, Material for MkDocs supports
Google's original [color palette][1], which can be easily configured through
`mkdocs.yml`. Furthermore, colors can be customized with a few lines of CSS to
fit your brand identity by using [CSS variables][2].
fit your brand's identity by using [CSS variables][2].
[1]: http://www.materialui.co/colors
[2]: #customization
@ -251,5 +251,5 @@ colors or neutral colors:
[6]: https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/stylesheets/base/_colors.scss
[7]: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
[8]: ../customization.md#additional-stylesheets
[9]: ../writing/code-blocks.md
[10]: ../writing/admonitions.md
[9]: ../reference/code-blocks.md
[10]: ../reference/admonitions.md

View File

@ -14,7 +14,7 @@ search can be configured to use a language-specific stemmer (if available).
[:octicons-file-code-24: Source][1] · :octicons-milestone-24: Default: `en`
You can set the language from `mkdocs.yml` with:
You can set the _site language_ from `mkdocs.yml` with:
``` yaml
theme:
@ -24,49 +24,49 @@ theme:
The following languages are supported:
<ul class="tx-columns">
<li><code>af</code> / Afrikaans</li>
<li><code>ar</code> / Arabic</li>
<li><code>bn</code> / Bengali (Bangla)</li>
<li><code>ca</code> / Catalan</li>
<li><code>cs</code> / Czech</li>
<li><code>da</code> / Danish</li>
<li><code>de</code> / German</li>
<li><code>en</code> / English</li>
<li><code>es</code> / Spanish</li>
<li><code>et</code> / Estonian</li>
<li><code>fa</code> / Persian (Farsi)</li>
<li><code>fi</code> / Finnish</li>
<li><code>fr</code> / French</li>
<li><code>gl</code> / Galician</li>
<li><code>gr</code> / Greek</li>
<li><code>he</code> / Hebrew</li>
<li><code>hi</code> / Hindi</li>
<li><code>hr</code> / Croatian</li>
<li><code>hu</code> / Hungarian</li>
<li><code>id</code> / Indonesian</li>
<li><code>it</code> / Italian</li>
<li><code>ja</code> / Japanese</li>
<li><code>kr</code> / Korean</li>
<li><code>my</code> / Burmese</li>
<li><code>nl</code> / Dutch</li>
<li><code>nn</code> / Norwegian (Nynorsk)</li>
<li><code>no</code> / Norwegian</li>
<li><code>pl</code> / Polish</li>
<li><code>pt</code> / Portuguese</li>
<li><code>ro</code> / Romanian</li>
<li><code>ru</code> / Russian</li>
<li><code>sh</code> / Serbo-Croatian</li>
<li><code>si</code> / Slovenian</li>
<li><code>sk</code> / Slovak</li>
<li><code>sr</code> / Serbian</li>
<li><code>sv</code> / Swedish</li>
<li><code>th</code> / Thai</li>
<li><code>tr</code> / Turkish</li>
<li><code>uk</code> / Ukrainian</li>
<li><code>vi</code> / Vietnamese</li>
<li><code>zh</code> / Chinese (Simplified)</li>
<li><code>zh-Hant</code> / Chinese (Traditional)</li>
<li><code>zh-TW</code> / Chinese (Taiwanese)</li>
<li><code>af</code> Afrikaans</li>
<li><code>ar</code> Arabic</li>
<li><code>bn</code> Bengali (Bangla)</li>
<li><code>ca</code> Catalan</li>
<li><code>cs</code> Czech</li>
<li><code>da</code> Danish</li>
<li><code>de</code> German</li>
<li><code>en</code> English</li>
<li><code>es</code> Spanish</li>
<li><code>et</code> Estonian</li>
<li><code>fa</code> Persian (Farsi)</li>
<li><code>fi</code> Finnish</li>
<li><code>fr</code> French</li>
<li><code>gl</code> Galician</li>
<li><code>gr</code> Greek</li>
<li><code>he</code> Hebrew</li>
<li><code>hi</code> Hindi</li>
<li><code>hr</code> Croatian</li>
<li><code>hu</code> Hungarian</li>
<li><code>id</code> Indonesian</li>
<li><code>it</code> Italian</li>
<li><code>ja</code> Japanese</li>
<li><code>kr</code> Korean</li>
<li><code>my</code> Burmese</li>
<li><code>nl</code> Dutch</li>
<li><code>nn</code> Norwegian (Nynorsk)</li>
<li><code>no</code> Norwegian</li>
<li><code>pl</code> Polish</li>
<li><code>pt</code> Portuguese</li>
<li><code>ro</code> Romanian</li>
<li><code>ru</code> Russian</li>
<li><code>sh</code> Serbo-Croatian</li>
<li><code>si</code> Slovenian</li>
<li><code>sk</code> Slovak</li>
<li><code>sr</code> Serbian</li>
<li><code>sv</code> Swedish</li>
<li><code>th</code> Thai</li>
<li><code>tr</code> Turkish</li>
<li><code>uk</code> Ukrainian</li>
<li><code>vi</code> Vietnamese</li>
<li><code>zh</code> Chinese (Simplified)</li>
<li><code>zh-Hant</code> Chinese (Traditional)</li>
<li><code>zh-TW</code> Chinese (Taiwanese)</li>
<li>
<a href="https://bit.ly/38F5RCa">
Add language
@ -97,7 +97,7 @@ more information.
:octicons-milestone-24: Default: _automatically set_
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 inferred from the
selected language, but can also be set with:
``` yaml

View File

@ -50,8 +50,9 @@ theme:
```
Note that all __top-level pages__ (i.e. all top-level entries that directly
refer to an `*.md` file) defined inside the `nav` entry of `mkdocs.yml` will be
grouped under the first tab which will receive the title of the first page.
refer to an `*.md` file) defined inside the [`nav`][4] entry of `mkdocs.yml`
will be grouped under the first tab which will receive the title of the first
page.
This means that there will effectively be no collapsible subsections for the
first tab, because each subsection is rendered as another tab. If you want more
@ -87,17 +88,18 @@ sections. This is illustrated in the following example:
```
Note that tabs are only shown for larger screens, so make sure that navigation
is plausible on mobile devices. As another example, see the [`mkdocs.yml`][4]
is plausible on mobile devices. As another example, see the [`mkdocs.yml`][5]
used to render these pages.
[3]: https://github.com/squidfunk/mkdocs-material/blob/master/src/partials/tabs.html
[4]: https://github.com/squidfunk/mkdocs-material/blob/master/mkdocs.yml
[3]: https://github.com/squidfunk/mkdocs-material/blob/master/src/partials/tabs.html
[4]: https://www.mkdocs.org/user-guide/configuration/#nav
[5]: https://github.com/squidfunk/mkdocs-material/blob/master/mkdocs.yml
### Table of contents
[:octicons-file-code-24: Source][5] · [:octicons-workflow-24: Extension][6]
[:octicons-file-code-24: Source][6] · [:octicons-workflow-24: Extension][7]
The [Table of contents][7] extension, which is part of the standard Markdown
The [Table of contents][8] extension, which is part of the standard Markdown
library, provides some options that are supported by Material for MkDocs to
customize its appearance:
@ -129,7 +131,7 @@ customize its appearance:
: :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][8]:
like for example those from [Python Markdown Extensions][9]:
=== "Unicode"
@ -174,21 +176,21 @@ _Material for MkDocs doesn't provide official support for the other options of
this extension, so they may be supported but can also yield weird results. Use
them at your own risk._
[5]: https://github.com/squidfunk/mkdocs-material/blob/master/src/partials/toc.html
[6]: https://python-markdown.github.io/extensions/toc/
[7]: https://python-markdown.github.io/extensions/toc/#usage
[8]: https://facelessuser.github.io/pymdown-extensions/extras/slugs/
[6]: https://github.com/squidfunk/mkdocs-material/blob/master/src/partials/toc.html
[7]: https://python-markdown.github.io/extensions/toc/
[8]: https://python-markdown.github.io/extensions/toc/#usage
[9]: https://facelessuser.github.io/pymdown-extensions/extras/slugs/
## Customization
[:octicons-file-code-24: Source][9] ·
[:octicons-file-code-24: Source][10] ·
:octicons-mortar-board-24: Difficulty: moderate
All navigational elements are defined as partials and can be overridden through
[theme extension][10] by [overriding partials][11] or [blocks][12], i.e.
[theme extension][11] by [overriding partials][12] or [blocks][13], i.e.
`site_nav` which contains both sidebars, `tabs` and `footer`.
[9]: https://github.com/squidfunk/mkdocs-material/tree/master/src/partials
[10]: ../customization.md#extending-the-theme
[11]: ../customization.md#overriding-partials
[12]: ../customization.md#overriding-blocks
[10]: https://github.com/squidfunk/mkdocs-material/tree/master/src/partials
[11]: ../customization.md#extending-the-theme
[12]: ../customization.md#overriding-partials
[13]: ../customization.md#overriding-blocks

View File

@ -59,25 +59,25 @@ The following options are supported:
The following languages are supported:
<ul class="tx-columns">
<li><code>ar</code> / Arabic</li>
<li><code>da</code> / Danish</li>
<li><code>du</code> / Dutch</li>
<li><code>en</code> / English</li>
<li><code>fi</code> / Finnish</li>
<li><code>fr</code> / French</li>
<li><code>de</code> / German</li>
<li><code>hu</code> / Hungarian</li>
<li><code>it</code> / Italian</li>
<li><code>ja</code> / Japanese</li>
<li><code>no</code> / Norwegian</li>
<li><code>pt</code> / Portuguese</li>
<li><code>ro</code> / Romanian</li>
<li><code>ru</code> / Russian</li>
<li><code>es</code> / Spanish</li>
<li><code>sv</code> / Swedish</li>
<li><code>th</code> / Thai</li>
<li><code>tr</code> / Turkish</li>
<li><code>vi</code> / Vietnamese</li>
<li><code>ar</code> Arabic</li>
<li><code>da</code> Danish</li>
<li><code>du</code> Dutch</li>
<li><code>en</code> English</li>
<li><code>fi</code> Finnish</li>
<li><code>fr</code> French</li>
<li><code>de</code> German</li>
<li><code>hu</code> Hungarian</li>
<li><code>it</code> Italian</li>
<li><code>ja</code> Japanese</li>
<li><code>no</code> Norwegian</li>
<li><code>pt</code> Portuguese</li>
<li><code>ro</code> Romanian</li>
<li><code>ru</code> Russian</li>
<li><code>es</code> Spanish</li>
<li><code>sv</code> Swedish</li>
<li><code>th</code> Thai</li>
<li><code>tr</code> Turkish</li>
<li><code>vi</code> Vietnamese</li>
</ul>
_Material for MkDocs also tries to support languages which are not part of

View File

@ -4,7 +4,7 @@ template: overrides/main.html
# Admonitions
Admonitions, also know as _call-outs_, are an excellent choice for including
Admonitions, also known as _call-outs_, are an excellent choice for including
side content without significantly interrupting the document flow. Material for
MkDocs provides several different types of admonitions and allows for the
inclusion and nesting of arbitrary content.
@ -32,7 +32,7 @@ markdown_extensions:
[: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 abilty to make admonitions collapsible. It can be enabled from
adds the ability to __make admonitions collapsible__. It can be enabled from
`mkdocs.yml`:
``` yaml
@ -49,8 +49,8 @@ markdown_extensions:
[:octicons-file-code-24: Source][6] · [:octicons-workflow-24: Extension][7]
The [SuperFences][7] extension, which is also part of [Python Markdown
Extensions][5], allows for the arbitrary nesting of content inside blocks, and
is therefore strongly recommended:
Extensions][5], allows for the __nesting of content blocks inside admonitions__,
and is therefore strongly recommended:
``` yaml
markdown_extensions:
@ -87,9 +87,9 @@ _Result_:
### Changing the title
By default, the admonition title will equal the type qualifier in titlecase.
However, it can be changed to a custom string by adding a quoted string after
the type qualifier.
By default, the title will equal the type qualifier in titlecase. However, it
can be changed by adding a quoted string containing valid Markdown (including
links, formatting, ...) after the type qualifier.
_Example_:
@ -110,8 +110,9 @@ _Result_:
### Removing the title
Similar to [changing the title][9], the icon and title can be omitted by adding
an empty string directly after the type qualifier.
Similar to [changing the title][9], the icon and title can be omitted entirely
by adding an empty string directly after the type qualifier. Note that this
will not work for [collapsible blocks][10].
_Example_:
@ -131,13 +132,14 @@ _Result_:
massa, nec semper lorem quam in massa.
[9]: #changing-the-title
[10]: #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 code blocks, the [SuperFences][10] extension adds
the ability to nest arbitrary content inside admonitions.
doesn't account for nested blocks, the [SuperFences][11] extension adds the
ability to nest arbitrary content inside admonitions.
_Example_:
@ -180,11 +182,11 @@ _Result_:
sem ut cursus. Nullam sit amet tincidunt ipsum, sit amet elementum turpis.
Etiam ipsum quam, mattis in purus vitae, lacinia fermentum enim.
[10]: #superfences
[11]: #superfences
### Collapsible blocks
The [Details][11] extension adds support for rendering collapsible admonition
The [Details][12] extension adds support for rendering collapsible admonition
blocks. This is useful for FAQs or content that is of secondary nature. A
details block follows the syntax and semantics of admonition blocks, but must
start with `???`.
@ -206,7 +208,7 @@ _Result_:
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
massa, nec semper lorem quam in massa.
Adding a `+` after `???` will render the block open on page load:
Adding a `+` after `???` will render the block as open on page load:
_Example_:
@ -225,7 +227,7 @@ _Result_:
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
massa, nec semper lorem quam in massa.
[11]: #details
[12]: #details
### Supported types

View File

@ -15,9 +15,10 @@ during runtime using a JavaScript syntax highlighter.
### Highlight
[:octicons-file-code-24: Source][2] · [:octicons-workflow-24: Extension][3]
[:octicons-file-code-24: Source][2] · [:octicons-workflow-24: Extension][3] ·
:octicons-zap-24: Supersedes: [CodeHilite][4]
The [Highlight][3] extension, which is part of [Python Markdown Extensions][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:
@ -26,7 +27,7 @@ configuring syntax highlighting of code blocks:
: :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][5] and [JavaScript][6] if you want to
necessary [additional stylesheets][6] and [JavaScript][7] if you want to
use the latter:
=== "Pygments"
@ -45,12 +46,12 @@ configuring syntax highlighting of code blocks:
use_pygments: false
```
??? example "Syntax highlighting with [Highlight.js][7]"
??? example "Syntax highlighting with Highlight.js"
Highlight.js can be integrated by creating an [additional JavaScript][6]
file initializing the highlighter and including the respective
stylesheet and JavaScript from a [CDN][8] serving Highlight.js in
`mkdocs.yml`:
[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/extra.js"
@ -74,7 +75,7 @@ configuring syntax highlighting of code blocks:
: :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][9] later in this
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
@ -107,20 +108,21 @@ them at your own risk._
[2]: https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/stylesheets/extensions/pymdown/_highlight.scss
[3]: https://facelessuser.github.io/pymdown-extensions/extensions/highlight/
[4]: https://facelessuser.github.io/pymdown-extensions/
[5]: ../customization.md#additional-stylesheets
[6]: ../customization.md#additional-javascript
[7]: https://highlightjs.org/
[8]: https://cdnjs.com/libraries/highlight.js/
[9]: #adding-line-numbers
[4]: https://python-markdown.github.io/extensions/code_hilite/
[5]: https://facelessuser.github.io/pymdown-extensions/
[6]: ../customization.md#additional-stylesheets
[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][10]
[:octicons-file-code-24: Source][2] · [:octicons-workflow-24: Extension][11]
The [InlineHilite][10] extension, which is part of [Python Markdown
Extensions][4] also integrates with Material for MkDocs and adds support for
syntax highlighting of inline code blocks. It's built on top of the
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 from `mkdocs.yml`:
``` yaml
@ -128,10 +130,26 @@ markdown_extensions:
- pymdownx.inlinehilite
```
See the section on [inline code blocks][11] for usage information.
See the section on [inline code blocks][12] for usage information.
[10]: https://facelessuser.github.io/pymdown-extensions/extensions/inlinehilite/
[11]: #inline-code-blocks
[11]: https://facelessuser.github.io/pymdown-extensions/extensions/inlinehilite/
[12]: #inline-code-blocks
### SuperFences
[:octicons-file-code-24: Source][13] · [:octicons-workflow-24: Extension][14]
The [SuperFences][14] 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
```
[13]: https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/stylesheets/base/_typeset.scss
[14]: https://facelessuser.github.io/pymdown-extensions/extensions/superfences/
## Usage
@ -143,7 +161,7 @@ a JavaScript syntax highlighter.
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
after the opening block. See the [list of available lexers][12] to find the
after the opening block. See the [list of available lexers][15] to find the
short name for a given language.
_Example_:
@ -160,7 +178,7 @@ _Result_:
import tensorflow as tf
```
[12]: https://pygments.org/docs/lexers/
[15]: https://pygments.org/docs/lexers/
### Adding line numbers
@ -221,9 +239,9 @@ def bubble_sort(items):
### Inline code blocks
When [InlineHilite][13] is enabled, inline code blocks can be highlighted by
When [InlineHilite][16] is enabled, inline code blocks can be highlighted by
prefixing them with a shebang-like sequence, i.e. `#!`, directly followed by
the [language short name][12].
the [language short name][15].
_Example_:
@ -235,4 +253,4 @@ _Result_:
The `#!python range()` function is used to generate a sequence of numbers.
[13]: #inlinehilite
[16]: #inlinehilite

View File

@ -6,8 +6,7 @@ template: overrides/main.html
Sometimes, it's desirable to group alternative content under different tabs,
e.g. when describing how to access an API from different languages or
environments. Material for MkDocs allows for beautiful and functional tabbed
content, including code blocks or body copy.
environments. Material for MkDocs allows for beautiful and functional tabs, grouping code blocks and other content.
## Configuration

202
docs/reference/lists.md Normal file
View File

@ -0,0 +1,202 @@
---
template: overrides/main.html
---
# Lists
Material for MkDocs supports several flavors of lists that cater to different
use cases, including _unordered lists_ and _ordered lists_, which are supported
through standard Markdown, as well as _definition lists_ and _task lists_, which
are supported through extensions.
## Configuration
### Definition Lists
[:octicons-file-code-24: Source][1] · [:octicons-workflow-24: Extension][2]
The [Definition List][1] extension, which is part of the standard Markdown
library, adds the ability to add definitions lists to a document and can be
enabled from `mkdocs.yml`:
``` yaml
markdown_extensions:
- def_list
```
[1]: https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/stylesheets/base/_typeset.scss
[2]: https://python-markdown.github.io/extensions/definition_lists/
### Tasklist
[:octicons-file-code-24: Source][3] · [:octicons-workflow-24: Extension][4]
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`
: :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`
: :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/extensions/pymdown/_tasklist.scss
[4]: https://facelessuser.github.io/pymdown-extensions/extensions/tasklist/
[5]: https://facelessuser.github.io/pymdown-extensions/
## Usage
### Using unordered lists
An unordered list can be written by prefixing a line with a `-`, `*` or `+`
list marker, all of which can be used interchangeably. Furthermore, all flavors
of lists can be nested inside each other.
_Example_:
``` markdown
* Nulla et rhoncus turpis. Mauris ultricies elementum leo. Duis efficitur
accumsan nibh eu mattis. Vivamus tempus velit eros, porttitor placerat nibh
lacinia sed. Aenean in finibus diam.
* Duis mollis est eget nibh volutpat, fermentum aliquet dui mollis.
* Nam vulputate tincidunt fringilla.
* Nullam dignissim ultrices urna non auctor.
```
_Result_:
* Nulla et rhoncus turpis. Mauris ultricies elementum leo. Duis efficitur
accumsan nibh eu mattis. Vivamus tempus velit eros, porttitor placerat nibh
lacinia sed. Aenean in finibus diam.
* Duis mollis est eget nibh volutpat, fermentum aliquet dui mollis.
* Nam vulputate tincidunt fringilla.
* Nullam dignissim ultrices urna non auctor.
### Using ordered lists
An ordered list 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
be re-numbered when renderer.
_Example_:
``` markdown
1. Vivamus id mi enim. Integer id turpis sapien. Ut condimentum lobortis
sagittis. Aliquam purus tellus, faucibus eget urna at, iaculis venenatis
nulla. Vivamus a pharetra leo.
1. Vivamus venenatis porttitor tortor sit amet rutrum. Pellentesque aliquet
quam enim, eu volutpat urna rutrum a. Nam vehicula nunc mauris, a
ultricies libero efficitur sed.
2. Morbi eget dapibus felis. Vivamus venenatis porttitor tortor sit amet
rutrum. Pellentesque aliquet quam enim, eu volutpat urna rutrum a.
1. Mauris dictum mi lacus
2. Ut sit amet placerat ante
3. Suspendisse ac eros arcu
```
_Result_:
1. Vivamus id mi enim. Integer id turpis sapien. Ut condimentum lobortis
sagittis. Aliquam purus tellus, faucibus eget urna at, iaculis venenatis
nulla. Vivamus a pharetra leo.
1. Vivamus venenatis porttitor tortor sit amet rutrum. Pellentesque aliquet
quam enim, eu volutpat urna rutrum a. Nam vehicula nunc mauris, a
ultricies libero efficitur sed.
2. Morbi eget dapibus felis. Vivamus venenatis porttitor tortor sit amet
rutrum. Pellentesque aliquet quam enim, eu volutpat urna rutrum a.
1. Mauris dictum mi lacus
2. Ut sit amet placerat ante
3. Suspendisse ac eros arcu
### Using definition lists
[Definition lists][6] are a ideal for describing arbitrary key-value pairs, e.g.
the parameters of functions or modules, as used within this documentation to
describe extension or plugin parameters.
_Example_:
``` markdown
`Lorem ipsum dolor sit amet`
: Sed sagittis eleifend rutrum. Donec vitae suscipit est. Nullam tempus
tellus non sem sollicitudin, quis rutrum leo facilisis.
`Cras arcu libero`
: Aliquam metus eros, pretium sed nulla venenatis, faucibus auctor ex. Proin
ut eros sed sapien ullamcorper consequat. Nunc ligula ante.
Duis mollis est eget nibh volutpat, fermentum aliquet dui mollis.
Nam vulputate tincidunt fringilla.
Nullam dignissim ultrices urna non auctor.
```
_Result_:
`Lorem ipsum dolor sit amet`
: Sed sagittis eleifend rutrum. Donec vitae suscipit est. Nullam tempus
tellus non sem sollicitudin, quis rutrum leo facilisis.
`Cras arcu libero`
: Aliquam metus eros, pretium sed nulla venenatis, faucibus auctor ex. Proin
ut eros sed sapien ullamcorper consequat. Nunc ligula ante.
Duis mollis est eget nibh volutpat, fermentum aliquet dui mollis.
Nam vulputate tincidunt fringilla.
Nullam dignissim ultrices urna non auctor.
[6]: #definition-lists
### Using tasklists
When the [Tasklist][7] extension is enabled, unordered list items can be
prefixed with `[ ]` to render an unchecked or `[x]` to render a checked
checkbox.
_Example_:
``` markdown
* [x] Lorem ipsum dolor sit amet, consectetur adipiscing elit
* [ ] Vestibulum convallis sit amet nisi a tincidunt
* [x] In hac habitasse platea dictumst
* [x] In scelerisque nibh non dolor mollis congue sed et metus
* [ ] Praesent sed risus massa
* [ ] Aenean pretium efficitur erat, donec pharetra, ligula non scelerisque
```
_Result_:
* [x] Lorem ipsum dolor sit amet, consectetur adipiscing elit
* [ ] Vestibulum convallis sit amet nisi a tincidunt
* [x] In hac habitasse platea dictumst
* [x] In scelerisque nibh non dolor mollis congue sed et metus
* [ ] Praesent sed risus massa
* [ ] Aenean pretium efficitur erat, donec pharetra, ligula non scelerisque
[7]: #tasklist

View File

@ -5,8 +5,8 @@
"assets/javascripts/vendor.js.map": "assets/javascripts/vendor.877163d5.min.js.map",
"assets/javascripts/worker/search.js": "assets/javascripts/worker/search.a68abb33.min.js",
"assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.a68abb33.min.js.map",
"assets/stylesheets/main.css": "assets/stylesheets/main.1b6dc5da.min.css",
"assets/stylesheets/main.css.map": "assets/stylesheets/main.1b6dc5da.min.css.map",
"assets/stylesheets/main.css": "assets/stylesheets/main.f03f5644.min.css",
"assets/stylesheets/main.css.map": "assets/stylesheets/main.f03f5644.min.css.map",
"assets/stylesheets/overrides.css": "assets/stylesheets/overrides.0ad0ad40.min.css",
"assets/stylesheets/overrides.css.map": "assets/stylesheets/overrides.0ad0ad40.min.css.map",
"assets/stylesheets/palette.css": "assets/stylesheets/palette.87445083.min.css",

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -41,7 +41,7 @@
{% endif %}
{% endblock %}
{% block styles %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.1b6dc5da.min.css' | url }}">
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.f03f5644.min.css' | url }}">
{% if palette.scheme or palette.primary or palette.accent %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/palette.87445083.min.css' | url }}">
{% endif %}

View File

@ -131,11 +131,12 @@ nav:
- Customization: customization.md
#- Troubleshooting: troubleshooting.md
- Data privacy: data-privacy.md
- Writing:
- Admonitions: writing/admonitions.md
- Code blocks: writing/code-blocks.md
- Content tabs: writing/content-tabs.md
- Footnotes: writing/footnotes.md
- Reference:
- Admonitions: reference/admonitions.md
- Code blocks: reference/code-blocks.md
- Content tabs: reference/content-tabs.md
- Footnotes: reference/footnotes.md
- Lists: reference/lists.md
- Guides:
- Changing colors: guides/changing-colors.md
- Changing the fonts: guides/changing-the-fonts.md