mirror of
https://github.com/squidfunk/mkdocs-material.git
synced 2024-06-14 11:52:32 +03:00
Reworked extension documentation
This commit is contained in:
parent
c4b884545d
commit
11901049bc
@ -1,6 +1,6 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 89 89">
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 89 89" style="fill:#FFFFFF">
|
||||||
<path d="M3.136,17.387l0,42.932l42.932,21.467l-42.932,-64.399Z" style="fill: white;"/>
|
<path d="M3.136,17.387l0,42.932l42.932,21.467l-42.932,-64.399Z" />
|
||||||
<path d="M21.91,8l42.933,64.398l-18.775,9.388l-42.932,-64.399l18.774,-9.387Z" style="fill: white; fill-opacity: 0.5;" />
|
<path d="M21.91,8l42.933,64.398l-18.775,9.388l-42.932,-64.399l18.774,-9.387Z" style="fill-opacity:0.5" />
|
||||||
<path d="M67.535,17.387l-27.262,18.156l21.878,32.818l5.384,2.691l0,-53.665Z" style="fill: white;" />
|
<path d="M67.535,17.387l-27.262,18.156l21.878,32.818l5.384,2.691l0,-53.665Z" />
|
||||||
<path d="M67.535,17.387l0,53.666l18.774,-9.388l0,-53.665l-18.774,9.387Z" style="fill: white; fill-opacity:0.25;" />
|
<path d="M67.535,17.387l0,53.666l18.774,-9.388l0,-53.665l-18.774,9.387Z" style="fill-opacity:0.25" />
|
||||||
</svg>
|
</svg>
|
||||||
|
Before Width: | Height: | Size: 501 B After Width: | Height: | Size: 452 B |
@ -1,23 +0,0 @@
|
|||||||
# Author's notes
|
|
||||||
|
|
||||||
## Hi, I'm Martin ([@squidfunk][1])
|
|
||||||
|
|
||||||
I'm a freelance polyglot software engineer and entrepreneur from Cologne,
|
|
||||||
Germany with more than 13 years of experience in full-stack web development and
|
|
||||||
system programming. I'm currently working full time on an exciting new venture,
|
|
||||||
an __analytical browser engine__ called [Ginseng][2].
|
|
||||||
|
|
||||||
[1]: https://github.com/squidfunk
|
|
||||||
[2]: https://ginseng.ai
|
|
||||||
|
|
||||||
## Why another theme?
|
|
||||||
|
|
||||||
Some time ago I wanted to release a project to the open, but it was in need of
|
|
||||||
user documentation. I checked out the available tools and stuck with MkDocs,
|
|
||||||
because it was so simple and easy to use. However, none of the available
|
|
||||||
themes convinced me.
|
|
||||||
|
|
||||||
I wanted to build something that was usable on all screen sizes from the ground
|
|
||||||
up, something beautiful and practical at the same time. Google's Material Design
|
|
||||||
appeared to be the perfect fit and this something became Material, a Material
|
|
||||||
Design theme for MkDocs.
|
|
@ -1,352 +0,0 @@
|
|||||||
# Material 5.x
|
|
||||||
|
|
||||||
## Migration
|
|
||||||
|
|
||||||
### Templates and partials
|
|
||||||
|
|
||||||
If you customized the theme by [overriding partials][1] or [template blocks][2],
|
|
||||||
make sure that you review and adapt the respective HTML structure, as there are
|
|
||||||
some critical changes that need to made to ensure the theme works as expected.
|
|
||||||
|
|
||||||
[1]: http://localhost:8000/customization/#overriding-partials
|
|
||||||
[2]: http://localhost:8000/customization/#overriding-template-blocks
|
|
||||||
|
|
||||||
#### `src/base.html`
|
|
||||||
|
|
||||||
The `meta` tag localization approach is superseded by a JSON-based localization
|
|
||||||
technique which can now be found at the bottom of the template.
|
|
||||||
|
|
||||||
``` diff
|
|
||||||
- <!-- Localization -->
|
|
||||||
- {% for key in [
|
|
||||||
- "clipboard.copy",
|
|
||||||
- "clipboard.copied",
|
|
||||||
- "search.language",
|
|
||||||
- "search.pipeline.stopwords",
|
|
||||||
- "search.pipeline.trimmer",
|
|
||||||
- "search.result.none",
|
|
||||||
- "search.result.one",
|
|
||||||
- "search.result.other",
|
|
||||||
- "search.tokenizer"
|
|
||||||
- ] %}
|
|
||||||
- <meta name="lang:{{ key }}" content="{{ lang.t(key) }}" />
|
|
||||||
- {% endfor %}
|
|
||||||
```
|
|
||||||
|
|
||||||
The `application.css` stylesheet is now called `app.min.css` to signal that the
|
|
||||||
source is optimized and minified, which may be important for legal purposes.
|
|
||||||
|
|
||||||
``` diff
|
|
||||||
<!-- Theme-related stylesheets -->
|
|
||||||
<link
|
|
||||||
rel="stylesheet" type="text/css"
|
|
||||||
- href="{{ 'assets/stylesheets/application.css' | url }}"
|
|
||||||
+ href="{{ 'assets/stylesheets/app.min.css' | url }}"
|
|
||||||
/>
|
|
||||||
```
|
|
||||||
|
|
||||||
The `application-palette.css` stylesheet has been removed in favor of the new
|
|
||||||
color customization approach which is based on CSS variables.
|
|
||||||
|
|
||||||
``` diff
|
|
||||||
- <!-- Extra color palette -->
|
|
||||||
- {% if palette.primary or palette.accent %}
|
|
||||||
- <link rel="stylesheet" type="text/css"
|
|
||||||
- href="{{ 'assets/stylesheets/application-palette.css' | url }}" />
|
|
||||||
- <link
|
|
||||||
- rel="stylesheet"
|
|
||||||
- type="text/css"
|
|
||||||
- href="{{ 'assets/stylesheets/app-palette.min.css' | url }}"
|
|
||||||
- />
|
|
||||||
- {% endif %}
|
|
||||||
```
|
|
||||||
|
|
||||||
The `modernizr.js` custom build was completely removed.
|
|
||||||
|
|
||||||
``` diff
|
|
||||||
<!-- JavaScript libraries -->
|
|
||||||
- {% block libs %}
|
|
||||||
- <script src="{{ 'assets/javascripts/modernizr.js' | url }}"></script>
|
|
||||||
- {% endblock %}
|
|
||||||
+ {% block libs %}{% endblock %}
|
|
||||||
```
|
|
||||||
|
|
||||||
The hidden inline SVG container has been removed, as the repository icons are
|
|
||||||
now provided through the FontAwesome iconset.
|
|
||||||
|
|
||||||
``` diff
|
|
||||||
- <!-- Hidden container for inline SVGs -->
|
|
||||||
- <svg class="md-svg">
|
|
||||||
- <defs>
|
|
||||||
-
|
|
||||||
- <!--
|
|
||||||
- Check whether the repository is hosted on one of the supported code
|
|
||||||
- hosting platforms (GitHub, GitLab or Bitbucket) to show icon.
|
|
||||||
- -->
|
|
||||||
- {% set platform = config.extra.repo_icon or config.repo_url %}
|
|
||||||
- {% if "github" in platform %}
|
|
||||||
- {% include "assets/images/icons/github.svg" %}
|
|
||||||
- {% elif "gitlab" in platform %}
|
|
||||||
- {% include "assets/images/icons/gitlab.svg" %}
|
|
||||||
- {% elif "bitbucket" in platform %}
|
|
||||||
- {% include "assets/images/icons/bitbucket.svg" %}
|
|
||||||
- {% endif %}
|
|
||||||
- </defs>
|
|
||||||
- </svg>
|
|
||||||
-
|
|
||||||
```
|
|
||||||
|
|
||||||
An announcement bar was added just above the header which is shown if the
|
|
||||||
`announcement` block is defined through template extension.
|
|
||||||
|
|
||||||
``` diff
|
|
||||||
+ <!-- Announcement bar -->
|
|
||||||
+ {% if self.announcement() %}
|
|
||||||
+ <aside class="md-announcement" data-md-component="announcement">
|
|
||||||
+ <div class="md-announcement__inner md-grid md-typeset">
|
|
||||||
+ {% block announcement %}{% endblock %}
|
|
||||||
+ </div>
|
|
||||||
+ </aside>
|
|
||||||
+ {% endif %}
|
|
||||||
+
|
|
||||||
<!-- Application header -->
|
|
||||||
{% block header %}
|
|
||||||
{% include "partials/header.html" %}
|
|
||||||
{% endblock %}
|
|
||||||
```
|
|
||||||
|
|
||||||
The container and main area now state their corresponding component names.
|
|
||||||
|
|
||||||
``` diff
|
|
||||||
<!-- Container, necessary for web-application context -->
|
|
||||||
- <div class="md-container">
|
|
||||||
+ <div class="md-container" data-md-component="container">
|
|
||||||
|
|
||||||
...
|
|
||||||
|
|
||||||
- <!-- Main container -->
|
|
||||||
- <main class="md-main" role="main">
|
|
||||||
- <div class="md-main__inner md-grid" data-md-component="container">
|
|
||||||
+ <!-- Main area -->
|
|
||||||
+ <main class="md-main" data-md-component="main">
|
|
||||||
+ <div class="md-main__inner md-grid">
|
|
||||||
|
|
||||||
<!-- Navigation -->
|
|
||||||
{% block site_nav %}
|
|
||||||
```
|
|
||||||
|
|
||||||
The `lunr-language`-related JavaScript like stemmers and segmenters are now
|
|
||||||
loaded explicitly by the search worker. The main application is now called
|
|
||||||
`bundle.min.js`.
|
|
||||||
|
|
||||||
``` diff
|
|
||||||
<!-- Theme-related JavaScript -->
|
|
||||||
{% block scripts %}
|
|
||||||
+ <script src="{{ 'assets/javascripts/bundle.min.js' | url }}"></script>
|
|
||||||
- <script src="{{ 'assets/javascripts/application.js' | url }}"></script>
|
|
||||||
-
|
|
||||||
- <!-- Load additional languages for search -->
|
|
||||||
- {% if lang.t("search.language") != "en" %}
|
|
||||||
- {% set languages = lang.t("search.language").split(",") %}
|
|
||||||
- {% if languages | length and languages[0] != "" %}
|
|
||||||
- {% set path = "assets/javascripts/lunr/" %}
|
|
||||||
- <script src="{{ (path ~ 'lunr.stemmer.support.js') | url }}"></script>
|
|
||||||
- {% for language in languages | map("trim") %}
|
|
||||||
- {% if language != "en" %}
|
|
||||||
- {% if language == "ja" %}
|
|
||||||
- <script src="{{ (path ~ 'tinyseg.js') | url }}"></script>
|
|
||||||
- {% endif %}
|
|
||||||
- {% if language in ($md-lunr-languages$) %}
|
|
||||||
- <script src="{{ (path ~ 'lunr.' ~ language ~ '.js') | url }}">
|
|
||||||
- </script>
|
|
||||||
- {% endif %}
|
|
||||||
- {% endif %}
|
|
||||||
- {% endfor %}
|
|
||||||
- {% if languages | length > 1 %}
|
|
||||||
- <script src="{{ (path ~ 'lunr.multi.js') | url }}"></script>
|
|
||||||
- {% endif %}
|
|
||||||
- {% endif %}
|
|
||||||
- {% endif %}
|
|
||||||
|
|
||||||
+ <!-- Translations -->
|
|
||||||
+ <script id="__lang" type="application/json">
|
|
||||||
+ {%- set translations = {} -%}
|
|
||||||
+ {%- for key in [
|
|
||||||
+ "clipboard.copy",
|
|
||||||
+ "clipboard.copied",
|
|
||||||
+ "search.language",
|
|
||||||
+ "search.pipeline.stopwords",
|
|
||||||
+ "search.pipeline.trimmer",
|
|
||||||
+ "search.result.placeholder",
|
|
||||||
+ "search.result.none",
|
|
||||||
+ "search.result.one",
|
|
||||||
+ "search.result.other",
|
|
||||||
+ "search.tokenizer"
|
|
||||||
+ ] -%}
|
|
||||||
+ {%- set _ = translations.update({ key: lang.t(key) }) -%}
|
|
||||||
+ {%- endfor -%}
|
|
||||||
+ {{ translations | tojson }}
|
|
||||||
+ </script>
|
|
||||||
|
|
||||||
<!-- Initialize application -->
|
|
||||||
<script>
|
|
||||||
- app.initialize({
|
|
||||||
- version: "{{ mkdocs_version }}",
|
|
||||||
- url: {
|
|
||||||
- base: "{{ base_url }}"
|
|
||||||
+ app = initialize({
|
|
||||||
+ base: "{{ base_url }}",
|
|
||||||
+ worker: {
|
|
||||||
+ search: "{{ 'assets/javascripts/worker/search.js' | url }}",
|
|
||||||
+ packer: "{{ 'assets/javascripts/worker/packer.js' | url }}"
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
```
|
|
||||||
|
|
||||||
#### `src/partials/header.html`
|
|
||||||
|
|
||||||
The header `data-md-component` attribute values have been renamed and prefixed
|
|
||||||
with `header-` in order to better reflect that they belong to the header.
|
|
||||||
|
|
||||||
``` diff
|
|
||||||
<!-- Header title -->
|
|
||||||
<div class="md-flex__cell md-flex__cell--stretch">
|
|
||||||
<div
|
|
||||||
class="md-flex__ellipsis md-header-nav__title"
|
|
||||||
- data-md-component="title"
|
|
||||||
+ data-md-component="header-title"
|
|
||||||
>
|
|
||||||
{% if config.site_name == page.title %}
|
|
||||||
{{ config.site_name }}
|
|
||||||
{% else %}
|
|
||||||
```
|
|
||||||
|
|
||||||
#### `src/partials/language.html`
|
|
||||||
|
|
||||||
The options exposed through `config.extra.search` are now available through the
|
|
||||||
default search plugin integration and have been removed from the template.
|
|
||||||
|
|
||||||
``` diff
|
|
||||||
<!-- Re-export translations -->
|
|
||||||
{% macro t(key) %}{{ {
|
|
||||||
- "direction": config.theme.direction,
|
|
||||||
- "search.language": (
|
|
||||||
- config.extra.search | default({})
|
|
||||||
- ).language,
|
|
||||||
- "search.tokenizer": (
|
|
||||||
- config.extra.search | default({})
|
|
||||||
- ).tokenizer | default("", true),
|
|
||||||
+ "direction": config.theme.direction
|
|
||||||
}[key] or lang.t(key) or fallback.t(key) }}{% endmacro %}
|
|
||||||
```
|
|
||||||
|
|
||||||
#### `src/partials/search.html`
|
|
||||||
|
|
||||||
The search `data-md-component` attribute values have been renamed and prefixed
|
|
||||||
with `search-` in order to better reflect that they belong to the search.
|
|
||||||
|
|
||||||
``` diff
|
|
||||||
autocorrect="off"
|
|
||||||
autocomplete="off"
|
|
||||||
spellcheck="false"
|
|
||||||
- data-md-component="query"
|
|
||||||
+ data-md-component="search-query"
|
|
||||||
data-md-state="active"
|
|
||||||
/>
|
|
||||||
<label class="md-icon md-search__icon" for="__search"></label>
|
|
||||||
<button
|
|
||||||
type="reset"
|
|
||||||
class="md-icon md-search__icon"
|
|
||||||
- data-md-component="reset"
|
|
||||||
+ data-md-component="search-reset"
|
|
||||||
tabindex="-1"
|
|
||||||
>
|
|
||||||
<!-- close -->
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
<div class="md-search__output">
|
|
||||||
<div class="md-search__scrollwrap" data-md-scrollfix>
|
|
||||||
- <div class="md-search-result" data-md-component="result">
|
|
||||||
+ <div class="md-search-result" data-md-component="search-result">
|
|
||||||
<div class="md-search-result__meta">
|
|
||||||
{{ lang.t("search.result.placeholder") }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
```
|
|
||||||
|
|
||||||
#### `src/partials/social.html`
|
|
||||||
|
|
||||||
Social icons are implemented by inlining FontAwesome's original SVGs. Thus, the
|
|
||||||
icon font was removed and the `type` member was renamed to `icon` as part of the
|
|
||||||
`config.extra.social` configuration option in `mkdocs.yml`.
|
|
||||||
|
|
||||||
``` diff
|
|
||||||
<!-- Social links in footer -->
|
|
||||||
{% if config.extra.social %}
|
|
||||||
<div class="md-footer-social">
|
|
||||||
- <link
|
|
||||||
- rel="stylesheet" type="text/css"
|
|
||||||
- href="{{ 'assets/fonts/font-awesome.css' | url }}"
|
|
||||||
- />
|
|
||||||
{% for social in config.extra.social %}
|
|
||||||
- <a
|
|
||||||
- href="{{ social.link }}"
|
|
||||||
- class="md-footer-social__link fa fa-{{ social.type }}"
|
|
||||||
- ></a>
|
|
||||||
<a
|
|
||||||
+ href="{{ social.link }}"
|
|
||||||
+ target="_blank" rel="noopener"
|
|
||||||
+ class="md-footer-social__link"
|
|
||||||
+ >
|
|
||||||
+ {% include "assets/images/icons/fontawesome/" ~ social.icon ~ ".svg" %}
|
|
||||||
+ </a>
|
|
||||||
{% endfor %}
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
```
|
|
||||||
|
|
||||||
#### `src/partials/source.html`
|
|
||||||
|
|
||||||
The buildtime platform detection was removed and is now carried out during
|
|
||||||
runtime initialization. The repository icon now supports the entire FontAwesome
|
|
||||||
iconset by setting `config.extra.repo_icon` to a valid FontAwesome icon.
|
|
||||||
|
|
||||||
``` diff
|
|
||||||
-<!--
|
|
||||||
- Check whether the repository is hosted on one of the supported code hosting
|
|
||||||
- platforms (GitHub, GitLab or Bitbucket) to show icon.
|
|
||||||
--->
|
|
||||||
-{% set platform = config.extra.repo_icon or config.repo_url %}
|
|
||||||
-{% if "github" in platform %}
|
|
||||||
- {% set repo_type = "github" %}
|
|
||||||
-{% elif "gitlab" in platform %}
|
|
||||||
- {% set repo_type = "gitlab" %}
|
|
||||||
-{% elif "bitbucket" in platform %}
|
|
||||||
- {% set repo_type = "bitbucket" %}
|
|
||||||
-{% else %}
|
|
||||||
- {% set repo_type = "" %}
|
|
||||||
-{% endif %}
|
|
||||||
-
|
|
||||||
<!-- Repository containing source -->
|
|
||||||
<a
|
|
||||||
href="{{ config.repo_url }}"
|
|
||||||
title="{{ lang.t('source.link.title') }}"
|
|
||||||
class="md-source"
|
|
||||||
- data-md-source="{{ repo_type }}"
|
|
||||||
>
|
|
||||||
- {% if repo_type %}
|
|
||||||
- <div class="md-source__icon">
|
|
||||||
- <svg viewBox="0 0 24 24" width="24" height="24">
|
|
||||||
- <use xlink:href="#__{{ repo_type }}" width="24" height="24"></use>
|
|
||||||
- </svg>
|
|
||||||
- </div>
|
|
||||||
- {% endif %}
|
|
||||||
+ <div class="md-source__icon">
|
|
||||||
+ {% set repo_icon = config.extra.repo_icon | default("brands/git-alt") %}
|
|
||||||
+ {% include "assets/images/icons/fontawesome/" ~ repo_icon ~ ".svg" %}
|
|
||||||
+ </div>
|
|
||||||
<div class="md-source__repository">
|
|
||||||
{{ config.repo_name }}
|
|
||||||
</div>
|
|
||||||
```
|
|
@ -1,14 +1,14 @@
|
|||||||
# Admonition
|
# Admonition
|
||||||
|
|
||||||
[Admonition][1] is an extension included in the standard Markdown library that
|
[Admonition][1] is an extension included in the standard Markdown library that
|
||||||
makes it possible to add block-styled side content to your documentation, for
|
makes it possible to add block-styled side content to your documentation, e.g.
|
||||||
example summaries, notes, hints or warnings.
|
summaries, notes, hints or warnings.
|
||||||
|
|
||||||
[1]: https://python-markdown.github.io/extensions/admonition/
|
[1]: https://python-markdown.github.io/extensions/admonition/
|
||||||
|
|
||||||
## Installation
|
## Configuration
|
||||||
|
|
||||||
Add the following lines to your `mkdocs.yml`:
|
Add the following lines to `mkdocs.yml`:
|
||||||
|
|
||||||
``` yaml
|
``` yaml
|
||||||
markdown_extensions:
|
markdown_extensions:
|
||||||
@ -17,10 +17,9 @@ markdown_extensions:
|
|||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
Admonition blocks follow a simple syntax: every block is started with `!!!`,
|
Admonitions follow a simple syntax: every block is started with `!!!`, followed
|
||||||
followed by a single keyword which is used as the [type qualifier][2] of the
|
by a single keyword which is used as the [type qualifier][2] of the block. The
|
||||||
block. The content of the block then follows on the next line, indented by
|
content of the block then follows on the next line, indented by four spaces.
|
||||||
four spaces.
|
|
||||||
|
|
||||||
Example:
|
Example:
|
||||||
|
|
||||||
@ -43,8 +42,8 @@ Result:
|
|||||||
|
|
||||||
### Changing the title
|
### Changing the title
|
||||||
|
|
||||||
By default, the block title will equal the type qualifier in titlecase. However,
|
By default, the Admonition title will equal the type qualifier in titlecase.
|
||||||
it can easily be changed by adding a quoted string after the type qualifier.
|
However, it can be changed by adding a quoted string after the type qualifier.
|
||||||
|
|
||||||
Example:
|
Example:
|
||||||
|
|
||||||
@ -65,7 +64,7 @@ Result:
|
|||||||
|
|
||||||
### Removing the title
|
### Removing the title
|
||||||
|
|
||||||
Similar to setting a [custom title][3], the icon and title can be omitted by
|
Similar to [changing the title][3], the icon and title can be omitted by
|
||||||
providing an empty string after the type qualifier:
|
providing an empty string after the type qualifier:
|
||||||
|
|
||||||
Example:
|
Example:
|
||||||
@ -87,15 +86,15 @@ Result:
|
|||||||
|
|
||||||
[3]: #changing-the-title
|
[3]: #changing-the-title
|
||||||
|
|
||||||
### Embedded code blocks
|
### Embedded content
|
||||||
|
|
||||||
Blocks can contain all kinds of text content, including headlines, lists,
|
Admonitions can contain all kinds of text content, including headlines, lists,
|
||||||
paragraphs and other blocks – except code blocks, because the parser from the
|
paragraphs and other blocks – except code blocks, because the parser from the
|
||||||
standard Markdown library does not account for those.
|
standard Markdown library does not account for those.
|
||||||
|
|
||||||
However, the [PyMdown Extensions][4] package adds an extension called
|
The [PyMdown Extensions][4] package adds an extension called [SuperFences][5],
|
||||||
[SuperFences][5], which makes it possible to nest code blocks within other
|
which makes it possible to nest code blocks within other blocks, respectively
|
||||||
blocks, respectively Admonition blocks.
|
Admonition blocks.
|
||||||
|
|
||||||
[4]: https://facelessuser.github.io/pymdown-extensions
|
[4]: https://facelessuser.github.io/pymdown-extensions
|
||||||
[5]: https://facelessuser.github.io/pymdown-extensions/extensions/superfences/
|
[5]: https://facelessuser.github.io/pymdown-extensions/extensions/superfences/
|
||||||
@ -159,9 +158,9 @@ open by default.
|
|||||||
## Types
|
## Types
|
||||||
|
|
||||||
Admonition supports user-defined type qualifiers which may influence the style
|
Admonition supports user-defined type qualifiers which may influence the style
|
||||||
of the inserted block. Following is a list of type qualifiers provided by the
|
of the inserted block. Following is a list of type qualifiers provided by
|
||||||
Material theme, whereas the default type, and thus fallback for unknown type
|
Material for MkDocs, whereas the default type, and thus fallback for unknown
|
||||||
qualifiers, is `note`.
|
type qualifiers, is `note`.
|
||||||
|
|
||||||
### Note
|
### Note
|
||||||
|
|
||||||
|
@ -1,39 +1,23 @@
|
|||||||
# CodeHilite
|
# CodeHilite
|
||||||
|
|
||||||
[CodeHilite][1] is an extension that adds syntax highlighting to code blocks
|
[CodeHilite][1] is an extension that adds syntax highlighting to code blocks
|
||||||
and is included in the standard Markdown library. The highlighting process is
|
and is included in the standard Markdown library. It uses [Pygments][2] during
|
||||||
executed during compilation of the Markdown file.
|
the compilation of the Markdown file to provide syntax highlighting for over
|
||||||
|
[300 languages][3] and has no JavaScript runtime dependency.
|
||||||
!!! failure "Syntax highlighting not working?"
|
|
||||||
|
|
||||||
Please ensure that [Pygments][2] is installed. See the next section for
|
|
||||||
further directions on how to set up Pygments or use the official
|
|
||||||
[Docker image][3] with all dependencies pre-installed.
|
|
||||||
|
|
||||||
[1]: https://python-markdown.github.io/extensions/code_hilite/
|
[1]: https://python-markdown.github.io/extensions/code_hilite/
|
||||||
[2]: https://pygments.org
|
[2]: https://pygments.org
|
||||||
[3]: https://hub.docker.com/r/squidfunk/mkdocs-material/
|
[3]: http://pygments.org/languages
|
||||||
|
|
||||||
## Installation
|
## Configuration
|
||||||
|
|
||||||
CodeHilite parses code blocks and wraps them in `pre` tags. If [Pygments][2]
|
Add the following lines to `mkdocs.yml`:
|
||||||
is installed, which is a generic syntax highlighter with support for over
|
|
||||||
[300 languages][4], CodeHilite will also highlight the code block. Pygments can
|
|
||||||
be installed with the following command:
|
|
||||||
|
|
||||||
``` sh
|
|
||||||
pip install pygments
|
|
||||||
```
|
|
||||||
|
|
||||||
To enable CodeHilite, add the following lines to your `mkdocs.yml`:
|
|
||||||
|
|
||||||
``` yaml
|
``` yaml
|
||||||
markdown_extensions:
|
markdown_extensions:
|
||||||
- codehilite
|
- codehilite
|
||||||
```
|
```
|
||||||
|
|
||||||
[4]: http://pygments.org/languages
|
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
### Specifying the language
|
### Specifying the language
|
||||||
@ -46,7 +30,7 @@ different ways.
|
|||||||
|
|
||||||
In Markdown, code blocks can be opened and closed by writing three backticks on
|
In Markdown, code blocks can be opened and closed by writing three backticks on
|
||||||
separate lines. To add code highlighting to those blocks, the easiest way is
|
separate lines. To add code highlighting to those blocks, the easiest way is
|
||||||
to specify the language directly after the opening block.
|
to specify the language identifier directly after the opening block.
|
||||||
|
|
||||||
Example:
|
Example:
|
||||||
|
|
||||||
@ -103,7 +87,8 @@ Result:
|
|||||||
|
|
||||||
### Adding line numbers
|
### Adding line numbers
|
||||||
|
|
||||||
Line numbers can be added by enabling the `linenums` flag in your `mkdocs.yml`:
|
Line numbers can be added to a code block by enabling the `linenums` flag in
|
||||||
|
`mkdocs.yml` or adding `linenums=1` right after the language identifier:
|
||||||
|
|
||||||
``` yaml
|
``` yaml
|
||||||
markdown_extensions:
|
markdown_extensions:
|
||||||
@ -114,7 +99,7 @@ markdown_extensions:
|
|||||||
Example:
|
Example:
|
||||||
|
|
||||||
```` markdown
|
```` markdown
|
||||||
``` python
|
``` python linenums="1"
|
||||||
""" Bubble sort """
|
""" Bubble sort """
|
||||||
def bubble_sort(items):
|
def bubble_sort(items):
|
||||||
for i in range(len(items)):
|
for i in range(len(items)):
|
||||||
@ -126,17 +111,18 @@ def bubble_sort(items):
|
|||||||
|
|
||||||
Result:
|
Result:
|
||||||
|
|
||||||
#!python
|
``` python linenums="1"
|
||||||
""" Bubble sort """
|
""" Bubble sort """
|
||||||
def bubble_sort(items):
|
def bubble_sort(items):
|
||||||
for i in range(len(items)):
|
for i in range(len(items)):
|
||||||
for j in range(len(items) - 1 - i):
|
for j in range(len(items) - 1 - i):
|
||||||
if items[j] > items[j + 1]:
|
if items[j] > items[j + 1]:
|
||||||
items[j], items[j + 1] = items[j + 1], items[j]
|
items[j], items[j + 1] = items[j + 1], items[j]
|
||||||
|
```
|
||||||
|
|
||||||
### Grouping code blocks
|
### Grouping code blocks
|
||||||
|
|
||||||
The [Tabbed][5] extension which is part of the [PyMdown Extensions][6]
|
The [Tabbed][4] extension which is part of the [PyMdown Extensions][5]
|
||||||
package adds support for grouping Markdown blocks with tabs. This is especially
|
package adds support for grouping Markdown blocks with tabs. This is especially
|
||||||
useful for documenting projects with multiple language bindings.
|
useful for documenting projects with multiple language bindings.
|
||||||
|
|
||||||
@ -156,6 +142,7 @@ Example:
|
|||||||
|
|
||||||
int main(void) {
|
int main(void) {
|
||||||
printf("Hello world!\n");
|
printf("Hello world!\n");
|
||||||
|
return 0;
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -163,7 +150,7 @@ Example:
|
|||||||
``` c++
|
``` c++
|
||||||
#include <iostream>
|
#include <iostream>
|
||||||
|
|
||||||
int main() {
|
int main(void) {
|
||||||
std::cout << "Hello world!" << std::endl;
|
std::cout << "Hello world!" << std::endl;
|
||||||
return 0;
|
return 0;
|
||||||
}
|
}
|
||||||
@ -196,6 +183,7 @@ Result:
|
|||||||
|
|
||||||
int main(void) {
|
int main(void) {
|
||||||
printf("Hello world!\n");
|
printf("Hello world!\n");
|
||||||
|
return 0;
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -203,7 +191,7 @@ Result:
|
|||||||
``` c++
|
``` c++
|
||||||
#include <iostream>
|
#include <iostream>
|
||||||
|
|
||||||
int main() {
|
int main(void) {
|
||||||
std::cout << "Hello world!" << std::endl;
|
std::cout << "Hello world!" << std::endl;
|
||||||
return 0;
|
return 0;
|
||||||
}
|
}
|
||||||
@ -220,8 +208,8 @@ Result:
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
[5]: https://facelessuser.github.io/pymdown-extensions/extensions/tabbed/
|
[4]: https://facelessuser.github.io/pymdown-extensions/extensions/tabbed/
|
||||||
[6]: https://facelessuser.github.io/pymdown-extensions
|
[5]: https://facelessuser.github.io/pymdown-extensions
|
||||||
|
|
||||||
### Highlighting specific lines
|
### Highlighting specific lines
|
||||||
|
|
||||||
|
@ -1,13 +1,14 @@
|
|||||||
# Footnotes
|
# Footnotes
|
||||||
|
|
||||||
[Footnotes][1] is another extension included in the standard Markdown library.
|
[Footnotes][1] is another extension included in the standard Markdown library.
|
||||||
As the name says, it adds the ability to add footnotes to your documentation.
|
As the name says, it adds the ability to add inline footnotes to your
|
||||||
|
documentation.
|
||||||
|
|
||||||
[1]: https://python-markdown.github.io/extensions/footnotes/
|
[1]: https://python-markdown.github.io/extensions/footnotes/
|
||||||
|
|
||||||
## Installation
|
## Configuration
|
||||||
|
|
||||||
Add the following lines to your `mkdocs.yml`:
|
Add the following lines to `mkdocs.yml`:
|
||||||
|
|
||||||
``` yaml
|
``` yaml
|
||||||
markdown_extensions:
|
markdown_extensions:
|
||||||
|
@ -1,6 +1,8 @@
|
|||||||
hero: Metadata enables hero teaser texts
|
---
|
||||||
|
hero: Set heroes with metadata
|
||||||
path: tree/master/docs/extensions
|
path: tree/master/docs/extensions
|
||||||
source: metadata.md
|
source: metadata.md
|
||||||
|
---
|
||||||
|
|
||||||
# Metadata
|
# Metadata
|
||||||
|
|
||||||
@ -9,9 +11,9 @@ which gives more control over the theme in a page-specific context.
|
|||||||
|
|
||||||
[1]: https://python-markdown.github.io/extensions/meta_data/
|
[1]: https://python-markdown.github.io/extensions/meta_data/
|
||||||
|
|
||||||
## Installation
|
## Configuration
|
||||||
|
|
||||||
Add the following lines to your `mkdocs.yml`:
|
Add the following lines to `mkdocs.yml`:
|
||||||
|
|
||||||
``` yaml
|
``` yaml
|
||||||
markdown_extensions:
|
markdown_extensions:
|
||||||
@ -28,10 +30,12 @@ actual page content and made available to the theme.
|
|||||||
Example:
|
Example:
|
||||||
|
|
||||||
``` markdown
|
``` markdown
|
||||||
|
---
|
||||||
title: Lorem ipsum dolor sit amet
|
title: Lorem ipsum dolor sit amet
|
||||||
description: Nullam urna elit, malesuada eget finibus ut, ac tortor.
|
description: Nullam urna elit, malesuada eget finibus ut, ac tortor.
|
||||||
path: path/to/file
|
path: path/to/file
|
||||||
source: file.js
|
source: file.js
|
||||||
|
---
|
||||||
|
|
||||||
# Headline
|
# Headline
|
||||||
|
|
||||||
@ -40,13 +44,13 @@ source: file.js
|
|||||||
|
|
||||||
See the next section which covers the metadata that is supported by Material.
|
See the next section which covers the metadata that is supported by Material.
|
||||||
|
|
||||||
### Setting a hero text
|
### Setting a hero
|
||||||
|
|
||||||
Material exposes a simple text-only page-local hero via Metadata, as you can
|
Material exposes a simple text-only page-local hero via Metadata, as you can
|
||||||
see on the current page when you scroll to the top. It's as simple as:
|
see on the current page when you scroll to the top. It's as simple as:
|
||||||
|
|
||||||
``` markdown
|
``` markdown
|
||||||
hero: Metadata enables hero teaser texts
|
hero: Set heroes with metadata
|
||||||
```
|
```
|
||||||
|
|
||||||
### Linking sources
|
### Linking sources
|
||||||
@ -59,8 +63,9 @@ defined inside the project's `mkdocs.yml`, the file can be linked using the
|
|||||||
source: file.js
|
source: file.js
|
||||||
```
|
```
|
||||||
|
|
||||||
The filename is appended to the `repo_url` set in your `mkdocs.yml`, but can
|
The filename is appended to the `repo_url` set in `mkdocs.yml`, but can be
|
||||||
be prefixed with a `path` to ensure correct path resolving:
|
prefixed with a `path` to ensure correct path resolving. The name of the source
|
||||||
|
file is shown in the tooltip.
|
||||||
|
|
||||||
Example:
|
Example:
|
||||||
|
|
||||||
@ -88,7 +93,7 @@ accessing that document's URL will automatically redirect to `/new/url`.
|
|||||||
|
|
||||||
#### Page title
|
#### Page title
|
||||||
|
|
||||||
The page title can be overridden on a per-document level:
|
The page title can be overridden on a per-document basis:
|
||||||
|
|
||||||
``` markdown
|
``` markdown
|
||||||
title: Lorem ipsum dolor sit amet
|
title: Lorem ipsum dolor sit amet
|
||||||
@ -101,7 +106,7 @@ title.
|
|||||||
|
|
||||||
#### Page description
|
#### Page description
|
||||||
|
|
||||||
The page description can also be overridden on a per-document level:
|
The page description can also be overridden on a per-document basis:
|
||||||
|
|
||||||
``` yaml
|
``` yaml
|
||||||
description: Nullam urna elit, malesuada eget finibus ut, ac tortor.
|
description: Nullam urna elit, malesuada eget finibus ut, ac tortor.
|
||||||
@ -112,14 +117,14 @@ document `head` for the current page to the provided value.
|
|||||||
|
|
||||||
#### Disqus
|
#### Disqus
|
||||||
|
|
||||||
As described in the [getting started guide][3], the Disqus comments section can
|
As described in the [getting started guide][3], Disqus can be enabled on a
|
||||||
be enabled on a per-document level:
|
per-document basis:
|
||||||
|
|
||||||
``` markdown
|
``` markdown
|
||||||
disqus: your-shortname
|
disqus: your-shortname
|
||||||
```
|
```
|
||||||
|
|
||||||
Disqus can be disabled for a specific page by setting it to an empty value:
|
Disqus can also be disabled for a specific page by setting it to an empty value:
|
||||||
|
|
||||||
``` markdown
|
``` markdown
|
||||||
disqus:
|
disqus:
|
||||||
|
@ -2,14 +2,14 @@
|
|||||||
|
|
||||||
Permalinks are a feature of the [Table of Contents][1] extension, which is part
|
Permalinks are a feature of the [Table of Contents][1] extension, which is part
|
||||||
of the standard Markdown library. The extension inserts an anchor at the end of
|
of the standard Markdown library. The extension inserts an anchor at the end of
|
||||||
each headline, which makes it possible to directly link to a subpart of the
|
each headline, which makes it possible to directly link to a specific section
|
||||||
document.
|
of the document.
|
||||||
|
|
||||||
[1]: https://python-markdown.github.io/extensions/toc/
|
[1]: https://python-markdown.github.io/extensions/toc/
|
||||||
|
|
||||||
## Installation
|
## Configuration
|
||||||
|
|
||||||
To enable permalinks, add the following to your `mkdocs.yml`:
|
Add the following lines to `mkdocs.yml`:
|
||||||
|
|
||||||
``` yaml
|
``` yaml
|
||||||
markdown_extensions:
|
markdown_extensions:
|
||||||
@ -18,8 +18,8 @@ markdown_extensions:
|
|||||||
```
|
```
|
||||||
|
|
||||||
This will add a link containing the paragraph symbol `¶` at the end of each
|
This will add a link containing the paragraph symbol `¶` at the end of each
|
||||||
headline (exactly like on the page you're currently viewing), which the
|
headline (exactly like on the page you're currently viewing), which Material
|
||||||
Material theme will make appear on hover. In order to change the text of the
|
for MkDocs will make appear on hover. In order to change the text of the
|
||||||
permalink, a string can be passed, e.g.:
|
permalink, a string can be passed, e.g.:
|
||||||
|
|
||||||
``` markdown
|
``` markdown
|
||||||
|
@ -1,22 +1,15 @@
|
|||||||
# PyMdown Extensions
|
# PyMdown Extensions
|
||||||
|
|
||||||
[PyMdown Extensions][1] is a collection of Markdown extensions that add some
|
[PyMdown Extensions][1] is a collection of Markdown extensions that add some
|
||||||
great features to the standard Markdown library. For this reason, the
|
great missing features to the standard Markdown library. A compatible version
|
||||||
**installation of this package is highly recommended** as it's well-integrated
|
is always included with the theme.
|
||||||
with the Material theme.
|
|
||||||
|
|
||||||
[1]: https://facelessuser.github.io/pymdown-extensions/
|
[1]: https://facelessuser.github.io/pymdown-extensions/
|
||||||
|
|
||||||
## Installation
|
## Configuration
|
||||||
|
|
||||||
The PyMdown Extensions package can be installed with the following command:
|
|
||||||
|
|
||||||
``` sh
|
|
||||||
pip install pymdown-extensions
|
|
||||||
```
|
|
||||||
|
|
||||||
The following list of extensions that are part of the PyMdown Extensions
|
The following list of extensions that are part of the PyMdown Extensions
|
||||||
package are recommended to be used together with the Material theme:
|
package are recommended to be used together with Material for MkDocs:
|
||||||
|
|
||||||
``` yaml
|
``` yaml
|
||||||
markdown_extensions:
|
markdown_extensions:
|
||||||
@ -27,6 +20,7 @@ markdown_extensions:
|
|||||||
- pymdownx.critic
|
- pymdownx.critic
|
||||||
- pymdownx.details
|
- pymdownx.details
|
||||||
- pymdownx.emoji:
|
- pymdownx.emoji:
|
||||||
|
emoji_index: !!python/name:pymdownx.emoji.twemoji
|
||||||
emoji_generator: !!python/name:pymdownx.emoji.to_svg
|
emoji_generator: !!python/name:pymdownx.emoji.to_svg
|
||||||
- pymdownx.inlinehilite
|
- pymdownx.inlinehilite
|
||||||
- pymdownx.magiclink
|
- pymdownx.magiclink
|
||||||
@ -45,14 +39,13 @@ markdown_extensions:
|
|||||||
|
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-MML-AM_CHTML"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-MML-AM_CHTML"></script>
|
||||||
|
|
||||||
[Arithmatex][2] integrates Material with [MathJax][3] which parses
|
[Arithmatex][2] integrates Material for MkDocs with [MathJax][3] which parses
|
||||||
block-style and inline equations written in TeX markup and outputs them in
|
block-style and inline equations written in TeX markup and outputs them in
|
||||||
mathematical notation. See [this thread][4] for a short introduction and quick
|
mathematical notation. See [this thread][4] for a short introduction and quick
|
||||||
reference on how to write equations in TeX syntax.
|
reference on how to write equations in TeX syntax.
|
||||||
|
|
||||||
Besides activating the extension in the `mkdocs.yml`, the MathJax JavaScript
|
Besides activating the extension in the `mkdocs.yml`, the MathJax JavaScript
|
||||||
runtime needs to be included. This must be done with
|
runtime needs to be included. This can be done with [additional JavaScript][5]:
|
||||||
[additional JavaScript][5]:
|
|
||||||
|
|
||||||
``` yaml
|
``` yaml
|
||||||
extra_javascript:
|
extra_javascript:
|
||||||
@ -60,8 +53,8 @@ extra_javascript:
|
|||||||
```
|
```
|
||||||
|
|
||||||
If you want to override the default MathJax configuration, you can do this by
|
If you want to override the default MathJax configuration, you can do this by
|
||||||
adding another JavaScript file **before** the MathJax runtime in
|
adding another JavaScript file **before** the MathJax runtime which contains
|
||||||
`extra_javascript` which contains your MathJax configuration, e.g.:
|
the MathJax configuration, e.g.:
|
||||||
|
|
||||||
``` js
|
``` js
|
||||||
window.MathJax = {
|
window.MathJax = {
|
||||||
@ -86,7 +79,7 @@ window.MathJax = {
|
|||||||
};
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
In your `mkdocs.yml`, include it with:
|
Then, add the following lines to `mkdocs.yml`:
|
||||||
|
|
||||||
``` yaml
|
``` yaml
|
||||||
extra_javascript:
|
extra_javascript:
|
||||||
@ -119,7 +112,7 @@ $$
|
|||||||
|
|
||||||
#### Inline
|
#### Inline
|
||||||
|
|
||||||
Inline equations need to be enclosed in `:::tex $...$`:
|
Inline equations must be enclosed in `:::tex $...$`:
|
||||||
|
|
||||||
Example:
|
Example:
|
||||||
|
|
||||||
@ -170,7 +163,7 @@ tags on separate lines and adding new lines between the tags and the content.
|
|||||||
|
|
||||||
### Details
|
### Details
|
||||||
|
|
||||||
[Details][11] adds collapsible [Admonition-style blocks][12] which can contain
|
[Details][11] adds [collapsible Admonition blocks][12] which can contain
|
||||||
arbitrary content using the HTML5 `details` and `summary` tags. Additionally,
|
arbitrary content using the HTML5 `details` and `summary` tags. Additionally,
|
||||||
all Admonition qualifiers can be used, e.g. `note`, `question`, `warning` etc.:
|
all Admonition qualifiers can be used, e.g. `note`, `question`, `warning` etc.:
|
||||||
|
|
||||||
@ -179,12 +172,11 @@ all Admonition qualifiers can be used, e.g. `note`, `question`, `warning` etc.:
|
|||||||
Yes.
|
Yes.
|
||||||
|
|
||||||
[11]: https://facelessuser.github.io/pymdown-extensions/extensions/details/
|
[11]: https://facelessuser.github.io/pymdown-extensions/extensions/details/
|
||||||
[12]: admonition.md
|
[12]: ../admonition/#collapsible-blocks
|
||||||
|
|
||||||
### Emoji
|
### Emoji :tada:
|
||||||
|
|
||||||
[Emoji][13] adds the ability to insert a :shit:-load of emojis that we use in
|
[Emoji][13] adds the ability to insert, well, emojis! :smile:
|
||||||
our daily lives.
|
|
||||||
|
|
||||||
By default, [Emoji][13] uses JoyPixles' emoji under the former name EmojiOne.
|
By default, [Emoji][13] uses JoyPixles' emoji under the former name EmojiOne.
|
||||||
Recent versions of the extension lock support to an older version (2.2.7) due
|
Recent versions of the extension lock support to an older version (2.2.7) due
|
||||||
@ -193,24 +185,24 @@ restricts support to Unicode 9. To get the latest support for the current
|
|||||||
Unicode version, you can use Twemoji instead which has a much more permissable
|
Unicode version, you can use Twemoji instead which has a much more permissable
|
||||||
license. Simply override the default emoji index being used:
|
license. Simply override the default emoji index being used:
|
||||||
|
|
||||||
```yml
|
``` yaml
|
||||||
markdown_extensions:
|
markdown_extensions:
|
||||||
- pymdownx.emoji:
|
- pymdownx.emoji:
|
||||||
emoji_index: !!python/name:pymdownx.emoji.twemoji
|
emoji_index: !!python/name:pymdownx.emoji.twemoji
|
||||||
emoji_generator: !!python/name:pymdownx.emoji.to_svg
|
emoji_generator: !!python/name:pymdownx.emoji.to_svg
|
||||||
```
|
```
|
||||||
|
|
||||||
To view all the available short names and emoji available, see [Emoji's documentation][18]
|
To view all the available short names and emoji available, see
|
||||||
on your chosen index which includes links to the files containing the short names
|
[Emoji's documentation][18] on your chosen index which includes links to the
|
||||||
and emoji associated with each supported index. Happy scrolling :tada:.
|
files containing the short names and emoji associated with each supported
|
||||||
|
index.
|
||||||
|
|
||||||
!!! warning "Legal disclaimer"
|
!!! warning "Legal disclaimer"
|
||||||
|
|
||||||
Material has no affiliation with [JoyPixles][15] or [Twemoji][14], both
|
Material has no affiliation with [JoyPixles][15] or [Twemoji][14], both
|
||||||
of which use releases that are under [CC BY 4.0][16]. When including
|
of which are licensed under [CC BY 4.0][16]. When including images or CSS
|
||||||
images or CSS from either provider, please read the the respective
|
from either provider, please read their licenses to ensure proper
|
||||||
licenses: [EmojiOne][17] or [Twemoji][14] to ensure proper usage and
|
attribution: [EmojiOne][17] or [Twemoji][14].
|
||||||
attribution.
|
|
||||||
|
|
||||||
[13]: https://facelessuser.github.io/pymdown-extensions/extensions/emoji/
|
[13]: https://facelessuser.github.io/pymdown-extensions/extensions/emoji/
|
||||||
[14]: https://twemoji.twitter.com/
|
[14]: https://twemoji.twitter.com/
|
||||||
@ -223,7 +215,7 @@ and emoji associated with each supported index. Happy scrolling :tada:.
|
|||||||
|
|
||||||
[InlineHilite][19] adds support for inline code highlighting. It's useful for
|
[InlineHilite][19] adds support for inline code highlighting. It's useful for
|
||||||
short snippets included within body copy, e.g. `#!js var test = 0;` and can be
|
short snippets included within body copy, e.g. `#!js var test = 0;` and can be
|
||||||
achieved by prefixing inline code with a shebang and language identifier,
|
activated by prefixing inline code with a shebang and language identifier,
|
||||||
e.g. `#!js`.
|
e.g. `#!js`.
|
||||||
|
|
||||||
[19]: https://facelessuser.github.io/pymdown-extensions/extensions/inlinehilite/
|
[19]: https://facelessuser.github.io/pymdown-extensions/extensions/inlinehilite/
|
||||||
@ -270,29 +262,29 @@ SuperFences does also allow [grouping code blocks with tabs][25].
|
|||||||
|
|
||||||
``` markdown
|
``` markdown
|
||||||
=== "Fruit List"
|
=== "Fruit List"
|
||||||
- Apple
|
- :apple: Apple
|
||||||
- Banana
|
- :banana: Banana
|
||||||
- Orange
|
- :kiwi: Kiwi
|
||||||
|
|
||||||
=== "Fruit Table"
|
=== "Fruit Table"
|
||||||
Fruit | Color
|
Fruit | Color
|
||||||
------ | -----
|
--------------- | -----
|
||||||
Apple | Red
|
:apple: Apple | Red
|
||||||
Banana | Yellow
|
:banana: Banana | Yellow
|
||||||
Oragne | Orange
|
:kiwi: Kiwi | Green
|
||||||
```
|
```
|
||||||
|
|
||||||
=== "Fruit List"
|
=== "Fruit List"
|
||||||
- Apple
|
- :apple: Apple
|
||||||
- Banana
|
- :banana: Banana
|
||||||
- Orange
|
- :kiwi: Kiwi
|
||||||
|
|
||||||
=== "Fruit Table"
|
=== "Fruit Table"
|
||||||
Fruit | Color
|
Fruit | Color
|
||||||
------ | -----
|
--------------- | -----
|
||||||
Apple | Red
|
:apple: Apple | Red
|
||||||
Banana | Yellow
|
:banana: Banana | Yellow
|
||||||
Oragne | Orange
|
:kiwi: Kiwi | Green
|
||||||
|
|
||||||
[26]: https://facelessuser.github.io/pymdown-extensions/extensions/superfences/
|
[26]: https://facelessuser.github.io/pymdown-extensions/extensions/superfences/
|
||||||
|
|
||||||
|
@ -580,7 +580,7 @@ extra:
|
|||||||
|
|
||||||
A [Web App Manifest][23] is a simple JSON file that tells the browser about your
|
A [Web App Manifest][23] is a simple JSON file that tells the browser about your
|
||||||
web application and how it should behave when installed on the user's mobile
|
web application and how it should behave when installed on the user's mobile
|
||||||
device or desktop. You can specify such a manifest in your `mkdocs.yml`:
|
device or desktop. You can specify such a manifest in `mkdocs.yml`:
|
||||||
|
|
||||||
``` yaml
|
``` yaml
|
||||||
extra:
|
extra:
|
||||||
@ -607,7 +607,7 @@ google_analytics:
|
|||||||
|
|
||||||
Material for MkDocs is integrated with [Disqus][24], so if you want to add a
|
Material for MkDocs is integrated with [Disqus][24], so if you want to add a
|
||||||
comments section to your documentation set the shortname of your Disqus project
|
comments section to your documentation set the shortname of your Disqus project
|
||||||
in your `mkdocs.yml`:
|
in `mkdocs.yml`:
|
||||||
|
|
||||||
``` yaml
|
``` yaml
|
||||||
extra:
|
extra:
|
||||||
@ -630,8 +630,8 @@ Disqus can also be enabled or disabled for specific pages using [Metadata][25].
|
|||||||
## Extensions
|
## Extensions
|
||||||
|
|
||||||
[Markdown][3] comes with several very useful extensions, the following of which
|
[Markdown][3] comes with several very useful extensions, the following of which
|
||||||
are not enabled by default but highly recommended, so they should be switched
|
are not enabled by default but highly recommended, so enabling them should
|
||||||
on:
|
definitely be a good idea:
|
||||||
|
|
||||||
``` yaml
|
``` yaml
|
||||||
markdown_extensions:
|
markdown_extensions:
|
||||||
@ -642,8 +642,8 @@ markdown_extensions:
|
|||||||
permalink: true
|
permalink: true
|
||||||
```
|
```
|
||||||
|
|
||||||
For more information, see the following list of extensions supported by Material
|
See the following list of extensions supported by Material for MkDocs including
|
||||||
for MkDocs including more information regarding installation and usage:
|
some more information on configuration and usage:
|
||||||
|
|
||||||
* [Admonition][26]
|
* [Admonition][26]
|
||||||
* [Codehilite][27]
|
* [Codehilite][27]
|
||||||
@ -666,14 +666,14 @@ steps that sit between the theme and your documentation. For more information,
|
|||||||
see the following list of plugins tested and supported by Material for MkDocs
|
see the following list of plugins tested and supported by Material for MkDocs
|
||||||
including more information regarding installation and usage:
|
including more information regarding installation and usage:
|
||||||
|
|
||||||
* [Minify HTML][32]
|
* [Search][32] (enabled by default)
|
||||||
* [Revision date][33]
|
* [Minification][33]
|
||||||
* [Search][34]
|
* [Revision date][34]
|
||||||
|
|
||||||
For further reference, the MkDocs wiki contains a list of all
|
For further reference, the MkDocs wiki contains a list of all
|
||||||
[available plugins][35].
|
[available plugins][35].
|
||||||
|
|
||||||
[32]: plugins/minify-html.md
|
[32]: plugins/search.md
|
||||||
[33]: plugins/revision-date.md
|
[33]: plugins/minification.md
|
||||||
[34]: plugins/search.md
|
[34]: plugins/revision-date.md
|
||||||
[35]: https://github.com/mkdocs/mkdocs/wiki/MkDocs-Plugins
|
[35]: https://github.com/mkdocs/mkdocs/wiki/MkDocs-Plugins
|
||||||
|
32
docs/plugins/minification.md
Normal file
32
docs/plugins/minification.md
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
# Minification
|
||||||
|
|
||||||
|
The [mkdocs-minify-plugin][1] will minify all `*.html` files generated by
|
||||||
|
`mkdocs build` in a post-processing step, stripping all unnecessary characters
|
||||||
|
to reduce the payload served to the client.
|
||||||
|
|
||||||
|
[1]: https://github.com/byrnereese/mkdocs-minify-plugin
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
|
||||||
|
Install the plugin using `pip`:
|
||||||
|
|
||||||
|
``` sh
|
||||||
|
pip install mkdocs-minify-plugin
|
||||||
|
```
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
Add the following lines to `mkdocs.yml`:
|
||||||
|
|
||||||
|
``` yaml
|
||||||
|
plugins:
|
||||||
|
- search
|
||||||
|
- minify:
|
||||||
|
minify_html: true
|
||||||
|
```
|
||||||
|
|
||||||
|
!!! warning "Remember to re-add the `search` plugin"
|
||||||
|
|
||||||
|
If you have no `plugins` entry in your config file yet, you'll likely also
|
||||||
|
want to add back the `search` plugin. MkDocs enables it by default if there
|
||||||
|
is no `plugins` entry set and it will not be included if omitted.
|
@ -1,32 +0,0 @@
|
|||||||
# Minify HTML
|
|
||||||
|
|
||||||
[mkdocs-minify-plugin][1] is an extension that minifies HTML by stripping all whitespace from the generated documentation.
|
|
||||||
|
|
||||||
[1]: https://github.com/byrnereese/mkdocs-minify-plugin
|
|
||||||
|
|
||||||
## Installation
|
|
||||||
|
|
||||||
Install the plugin using `pip` with the following command:
|
|
||||||
|
|
||||||
``` sh
|
|
||||||
pip install mkdocs-minify-plugin
|
|
||||||
```
|
|
||||||
|
|
||||||
Next, add the following lines to your `mkdocs.yml`:
|
|
||||||
|
|
||||||
``` yaml
|
|
||||||
plugins:
|
|
||||||
- search
|
|
||||||
- minify:
|
|
||||||
minify_html: true
|
|
||||||
```
|
|
||||||
|
|
||||||
!!! warning "Remember to re-add the `search` plugin"
|
|
||||||
|
|
||||||
If you have no `plugins` entry in your config file yet, you'll likely also
|
|
||||||
want to add the `search` plugin. MkDocs enables it by default if there is
|
|
||||||
no `plugins` entry set.
|
|
||||||
|
|
||||||
## Usage
|
|
||||||
|
|
||||||
The output is automatically minified by the plugin.
|
|
246
docs/specimen.md
246
docs/specimen.md
@ -1,246 +0,0 @@
|
|||||||
# Specimen
|
|
||||||
|
|
||||||
## Body copy
|
|
||||||
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras arcu libero,
|
|
||||||
mollis sed massa vel, *ornare viverra ex*. Mauris a ullamcorper lacus. Nullam
|
|
||||||
urna elit, malesuada eget finibus ut, ullamcorper ac tortor. Vestibulum sodales
|
|
||||||
pulvinar nisl, pharetra aliquet est. Quisque volutpat erat ac nisi accumsan
|
|
||||||
tempor.
|
|
||||||
|
|
||||||
**Sed suscipit**, orci non pretium pretium, quam mi gravida metus, vel
|
|
||||||
venenatis justo est condimentum diam. Maecenas non ornare justo. Nam a ipsum
|
|
||||||
eros. [Nulla aliquam](#) orci sit amet nisl posuere malesuada. Proin aliquet
|
|
||||||
nulla velit, quis ultricies orci feugiat et. `Ut tincidunt sollicitudin`
|
|
||||||
tincidunt. Aenean ullamcorper sit amet nulla at interdum.
|
|
||||||
|
|
||||||
## Headings
|
|
||||||
|
|
||||||
### The 3rd level
|
|
||||||
|
|
||||||
#### The 4th level
|
|
||||||
|
|
||||||
##### The 5th level
|
|
||||||
|
|
||||||
###### The 6th level
|
|
||||||
|
|
||||||
## Headings <small>with secondary text</small>
|
|
||||||
|
|
||||||
### The 3rd level <small>with secondary text</small>
|
|
||||||
|
|
||||||
#### The 4th level <small>with secondary text</small>
|
|
||||||
|
|
||||||
##### The 5th level <small>with secondary text</small>
|
|
||||||
|
|
||||||
###### The 6th level <small>with secondary text</small>
|
|
||||||
|
|
||||||
## Blockquotes
|
|
||||||
|
|
||||||
> Morbi eget dapibus felis. 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. *Class aptent* taciti sociosqu ad
|
|
||||||
litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie
|
|
||||||
imperdiet consectetur.
|
|
||||||
|
|
||||||
### Blockquote nesting
|
|
||||||
|
|
||||||
> **Sed aliquet**, neque at rutrum mollis, neque nisi tincidunt nibh, vitae
|
|
||||||
faucibus lacus nunc at lacus. Nunc scelerisque, quam id cursus sodales, lorem
|
|
||||||
[libero fermentum](#) urna, ut efficitur elit ligula et nunc.
|
|
||||||
|
|
||||||
> > Mauris dictum mi lacus, sit amet pellentesque urna vehicula fringilla.
|
|
||||||
Ut sit amet placerat ante. Proin sed elementum nulla. Nunc vitae sem odio.
|
|
||||||
Suspendisse ac eros arcu. Vivamus orci erat, volutpat a tempor et, rutrum.
|
|
||||||
eu odio.
|
|
||||||
|
|
||||||
> > > `Suspendisse rutrum facilisis risus`, eu posuere neque commodo a.
|
|
||||||
Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed nec leo
|
|
||||||
bibendum, sodales mauris ut, tincidunt massa.
|
|
||||||
|
|
||||||
### Other content blocks
|
|
||||||
|
|
||||||
> Vestibulum vitae orci quis ante viverra ultricies ut eget turpis. Sed eu
|
|
||||||
lectus dapibus, eleifend nulla varius, lobortis turpis. In ac hendrerit nisl,
|
|
||||||
sit amet laoreet nibh.
|
|
||||||
``` js hl_lines="8"
|
|
||||||
var _extends = function(target) {
|
|
||||||
for (var i = 1; i < arguments.length; i++) {
|
|
||||||
var source = arguments[i];
|
|
||||||
for (var key in source) {
|
|
||||||
target[key] = source[key];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return target;
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
> > Praesent at `:::js return target`, sodales nibh vel, tempor felis. Fusce
|
|
||||||
vel lacinia lacus. Suspendisse rhoncus nunc non nisi iaculis ultrices.
|
|
||||||
Donec consectetur mauris non neque imperdiet, eget volutpat libero.
|
|
||||||
|
|
||||||
## Lists
|
|
||||||
|
|
||||||
### Unordered lists
|
|
||||||
|
|
||||||
* Sed sagittis eleifend rutrum. Donec vitae suscipit est. Nullam tempus tellus
|
|
||||||
non sem sollicitudin, quis rutrum leo facilisis. Nulla tempor lobortis orci,
|
|
||||||
at elementum urna sodales vitae. In in vehicula nulla, quis ornare libero.
|
|
||||||
|
|
||||||
* Duis mollis est eget nibh volutpat, fermentum aliquet dui mollis.
|
|
||||||
* Nam vulputate tincidunt fringilla.
|
|
||||||
* Nullam dignissim ultrices urna non auctor.
|
|
||||||
|
|
||||||
* Aliquam metus eros, pretium sed nulla venenatis, faucibus auctor ex. Proin ut
|
|
||||||
eros sed sapien ullamcorper consequat. Nunc ligula ante, fringilla at aliquam
|
|
||||||
ac, aliquet sed mauris.
|
|
||||||
|
|
||||||
* 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.
|
|
||||||
|
|
||||||
### Ordered lists
|
|
||||||
|
|
||||||
1. Integer vehicula feugiat magna, a mollis tellus. Nam mollis ex ante, quis
|
|
||||||
elementum eros tempor rutrum. Aenean efficitur lobortis lacinia. Nulla
|
|
||||||
consectetur feugiat sodales.
|
|
||||||
|
|
||||||
2. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
|
|
||||||
ridiculus mus. Aliquam ornare feugiat quam et egestas. Nunc id erat et quam
|
|
||||||
pellentesque lacinia eu vel odio.
|
|
||||||
|
|
||||||
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.
|
|
||||||
|
|
||||||
1. Mauris dictum mi lacus
|
|
||||||
2. Ut sit amet placerat ante
|
|
||||||
3. Suspendisse ac eros arcu
|
|
||||||
|
|
||||||
2. Morbi eget dapibus felis. Vivamus venenatis porttitor tortor sit amet
|
|
||||||
rutrum. Pellentesque aliquet quam enim, eu volutpat urna rutrum a. Sed
|
|
||||||
aliquet, neque at rutrum mollis, neque nisi tincidunt nibh.
|
|
||||||
|
|
||||||
3. Pellentesque eget `:::js var _extends` ornare tellus, ut gravida mi.
|
|
||||||
``` js hl_lines="1"
|
|
||||||
var _extends = function(target) {
|
|
||||||
for (var i = 1; i < arguments.length; i++) {
|
|
||||||
var source = arguments[i];
|
|
||||||
for (var key in source) {
|
|
||||||
target[key] = source[key];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return target;
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
3. 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.
|
|
||||||
|
|
||||||
### Definition lists
|
|
||||||
|
|
||||||
Lorem ipsum dolor sit amet
|
|
||||||
|
|
||||||
: Sed sagittis eleifend rutrum. Donec vitae suscipit est. Nullam tempus
|
|
||||||
tellus non sem sollicitudin, quis rutrum leo facilisis. Nulla tempor
|
|
||||||
lobortis orci, at elementum urna sodales vitae. In in vehicula nulla.
|
|
||||||
|
|
||||||
Duis mollis est eget nibh volutpat, fermentum aliquet dui mollis.
|
|
||||||
Nam vulputate tincidunt fringilla.
|
|
||||||
Nullam dignissim ultrices urna non auctor.
|
|
||||||
|
|
||||||
Cras arcu libero
|
|
||||||
|
|
||||||
: Aliquam metus eros, pretium sed nulla venenatis, faucibus auctor ex. Proin
|
|
||||||
ut eros sed sapien ullamcorper consequat. Nunc ligula ante, fringilla at
|
|
||||||
aliquam ac, aliquet sed mauris.
|
|
||||||
|
|
||||||
## Code blocks
|
|
||||||
|
|
||||||
### Inline
|
|
||||||
|
|
||||||
Morbi eget `dapibus felis`. Vivamus *`venenatis porttitor`* tortor sit amet
|
|
||||||
rutrum. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
|
|
||||||
per inceptos himenaeos. [`Pellentesque aliquet quam enim`](#), eu volutpat urna
|
|
||||||
rutrum a.
|
|
||||||
|
|
||||||
Nam vehicula nunc `:::js return target` mauris, a ultricies libero efficitur
|
|
||||||
sed. Sed molestie imperdiet consectetur. Vivamus a pharetra leo. Pellentesque
|
|
||||||
eget ornare tellus, ut gravida mi. Fusce vel lacinia lacus.
|
|
||||||
|
|
||||||
### Listing
|
|
||||||
|
|
||||||
#!js hl_lines="8"
|
|
||||||
var _extends = function(target) {
|
|
||||||
for (var i = 1; i < arguments.length; i++) {
|
|
||||||
var source = arguments[i];
|
|
||||||
for (var key in source) {
|
|
||||||
target[key] = source[key];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return target;
|
|
||||||
};
|
|
||||||
|
|
||||||
## Horizontal rules
|
|
||||||
|
|
||||||
Aenean in finibus diam. Duis mollis est eget nibh volutpat, fermentum aliquet
|
|
||||||
dui mollis. Nam vulputate tincidunt fringilla. Nullam dignissim ultrices urna
|
|
||||||
non auctor.
|
|
||||||
|
|
||||||
***
|
|
||||||
|
|
||||||
Integer vehicula feugiat magna, a mollis tellus. Nam mollis ex ante, quis
|
|
||||||
elementum eros tempor rutrum. Aenean efficitur lobortis lacinia. Nulla
|
|
||||||
consectetur feugiat sodales.
|
|
||||||
|
|
||||||
## Data tables
|
|
||||||
|
|
||||||
| Sollicitudo / Pellentesi | consectetur | adipiscing | elit | arcu | sed |
|
|
||||||
| ------------------------ | ----------- | ---------- | ------- | ---- | --- |
|
|
||||||
| Vivamus a pharetra | yes | yes | yes | yes | yes |
|
|
||||||
| Ornare viverra ex | yes | yes | yes | yes | yes |
|
|
||||||
| Mauris a ullamcorper | yes | yes | partial | yes | yes |
|
|
||||||
| Nullam urna elit | yes | yes | yes | yes | yes |
|
|
||||||
| Malesuada eget finibus | yes | yes | yes | yes | yes |
|
|
||||||
| Ullamcorper | yes | yes | yes | yes | yes |
|
|
||||||
| Vestibulum sodales | yes | - | yes | - | yes |
|
|
||||||
| Pulvinar nisl | yes | yes | yes | - | - |
|
|
||||||
| Pharetra aliquet est | yes | yes | yes | yes | yes |
|
|
||||||
| Sed suscipit | yes | yes | yes | yes | yes |
|
|
||||||
| Orci non pretium | yes | partial | - | - | - |
|
|
||||||
|
|
||||||
Sed sagittis eleifend rutrum. Donec vitae suscipit est. Nullam tempus tellus
|
|
||||||
non sem sollicitudin, quis rutrum leo facilisis. Nulla tempor lobortis orci,
|
|
||||||
at elementum urna sodales vitae. In in vehicula nulla, quis ornare libero.
|
|
||||||
|
|
||||||
| Left | Center | Right |
|
|
||||||
| :--------- | :------: | ------: |
|
|
||||||
| Lorem | *dolor* | `amet` |
|
|
||||||
| [ipsum](#) | **sit** | |
|
|
||||||
|
|
||||||
Vestibulum vitae orci quis ante viverra ultricies ut eget turpis. Sed eu
|
|
||||||
lectus dapibus, eleifend nulla varius, lobortis turpis. In ac hendrerit nisl,
|
|
||||||
sit amet laoreet nibh.
|
|
||||||
|
|
||||||
<table>
|
|
||||||
<colgroup>
|
|
||||||
<col width="30%">
|
|
||||||
<col width="70%">
|
|
||||||
</colgroup>
|
|
||||||
<thead>
|
|
||||||
<tr class="header">
|
|
||||||
<th>Table</th>
|
|
||||||
<th>with colgroups (Pandoc)</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td>Lorem</td>
|
|
||||||
<td>ipsum dolor sit amet.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Sed sagittis</td>
|
|
||||||
<td>eleifend rutrum. Donec vitae suscipit est.</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
14
mkdocs.yml
14
mkdocs.yml
@ -117,7 +117,7 @@ markdown_extensions:
|
|||||||
|
|
||||||
# Page tree
|
# Page tree
|
||||||
nav:
|
nav:
|
||||||
- Material: index.md
|
- Home: index.md
|
||||||
- Getting started: getting-started.md
|
- Getting started: getting-started.md
|
||||||
- Extensions:
|
- Extensions:
|
||||||
- Admonition: extensions/admonition.md
|
- Admonition: extensions/admonition.md
|
||||||
@ -127,14 +127,14 @@ nav:
|
|||||||
- Permalinks: extensions/permalinks.md
|
- Permalinks: extensions/permalinks.md
|
||||||
- PyMdown: extensions/pymdown.md
|
- PyMdown: extensions/pymdown.md
|
||||||
- Plugins:
|
- Plugins:
|
||||||
- Minify HTML: plugins/minify-html.md
|
|
||||||
- Revision date: plugins/revision-date.md
|
|
||||||
- Search: plugins/search.md
|
- Search: plugins/search.md
|
||||||
- Specimen: specimen.md
|
- Minification: plugins/minification.md
|
||||||
|
- Revision date: plugins/revision-date.md
|
||||||
|
- Releases:
|
||||||
|
- Changelog: releases/changelog.md
|
||||||
|
- Migration guide: releases/migration.md
|
||||||
- Customization: customization.md
|
- Customization: customization.md
|
||||||
- Compliance with GDPR: compliance.md
|
- Data privacy: data-privacy.md
|
||||||
- Release notes: release-notes.md
|
|
||||||
- Author's notes: authors-notes.md
|
|
||||||
- Contributing: contributing.md
|
- Contributing: contributing.md
|
||||||
- License: license.md
|
- License: license.md
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user