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:
squidfunk
parent
c4b884545d
commit
11901049bc
@ -1,6 +1,6 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 89 89">
|
||||
<path d="M3.136,17.387l0,42.932l42.932,21.467l-42.932,-64.399Z" style="fill: white;"/>
|
||||
<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="M67.535,17.387l-27.262,18.156l21.878,32.818l5.384,2.691l0,-53.665Z" style="fill: white;" />
|
||||
<path d="M67.535,17.387l0,53.666l18.774,-9.388l0,-53.665l-18.774,9.387Z" style="fill: white; fill-opacity:0.25;" />
|
||||
<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" />
|
||||
<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" />
|
||||
<path d="M67.535,17.387l0,53.666l18.774,-9.388l0,-53.665l-18.774,9.387Z" style="fill-opacity:0.25" />
|
||||
</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][1] is an extension included in the standard Markdown library that
|
||||
makes it possible to add block-styled side content to your documentation, for
|
||||
example summaries, notes, hints or warnings.
|
||||
makes it possible to add block-styled side content to your documentation, e.g.
|
||||
summaries, notes, hints or warnings.
|
||||
|
||||
[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
|
||||
markdown_extensions:
|
||||
@ -17,10 +17,9 @@ markdown_extensions:
|
||||
|
||||
## Usage
|
||||
|
||||
Admonition blocks follow a simple syntax: every block is started with `!!!`,
|
||||
followed by a single keyword which is used as the [type qualifier][2] of the
|
||||
block. The content of the block then follows on the next line, indented by
|
||||
four spaces.
|
||||
Admonitions follow a simple syntax: every block is started with `!!!`, followed
|
||||
by a single keyword which is used as the [type qualifier][2] of the block. The
|
||||
content of the block then follows on the next line, indented by four spaces.
|
||||
|
||||
Example:
|
||||
|
||||
@ -43,8 +42,8 @@ Result:
|
||||
|
||||
### Changing the title
|
||||
|
||||
By default, the block title will equal the type qualifier in titlecase. However,
|
||||
it can easily be changed by adding a quoted string after the type qualifier.
|
||||
By default, the Admonition title will equal the type qualifier in titlecase.
|
||||
However, it can be changed by adding a quoted string after the type qualifier.
|
||||
|
||||
Example:
|
||||
|
||||
@ -65,7 +64,7 @@ Result:
|
||||
|
||||
### 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:
|
||||
|
||||
Example:
|
||||
@ -87,15 +86,15 @@ Result:
|
||||
|
||||
[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
|
||||
standard Markdown library does not account for those.
|
||||
|
||||
However, the [PyMdown Extensions][4] package adds an extension called
|
||||
[SuperFences][5], which makes it possible to nest code blocks within other
|
||||
blocks, respectively Admonition blocks.
|
||||
The [PyMdown Extensions][4] package adds an extension called [SuperFences][5],
|
||||
which makes it possible to nest code blocks within other blocks, respectively
|
||||
Admonition blocks.
|
||||
|
||||
[4]: https://facelessuser.github.io/pymdown-extensions
|
||||
[5]: https://facelessuser.github.io/pymdown-extensions/extensions/superfences/
|
||||
@ -159,9 +158,9 @@ open by default.
|
||||
## Types
|
||||
|
||||
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
|
||||
Material theme, whereas the default type, and thus fallback for unknown type
|
||||
qualifiers, is `note`.
|
||||
of the inserted block. Following is a list of type qualifiers provided by
|
||||
Material for MkDocs, whereas the default type, and thus fallback for unknown
|
||||
type qualifiers, is `note`.
|
||||
|
||||
### Note
|
||||
|
||||
|
||||
@ -1,39 +1,23 @@
|
||||
# CodeHilite
|
||||
|
||||
[CodeHilite][1] is an extension that adds syntax highlighting to code blocks
|
||||
and is included in the standard Markdown library. The highlighting process is
|
||||
executed during compilation of the Markdown file.
|
||||
|
||||
!!! 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.
|
||||
and is included in the standard Markdown library. It uses [Pygments][2] during
|
||||
the compilation of the Markdown file to provide syntax highlighting for over
|
||||
[300 languages][3] and has no JavaScript runtime dependency.
|
||||
|
||||
[1]: https://python-markdown.github.io/extensions/code_hilite/
|
||||
[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]
|
||||
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`:
|
||||
Add the following lines to `mkdocs.yml`:
|
||||
|
||||
``` yaml
|
||||
markdown_extensions:
|
||||
- codehilite
|
||||
```
|
||||
|
||||
[4]: http://pygments.org/languages
|
||||
|
||||
## Usage
|
||||
|
||||
### Specifying the language
|
||||
@ -46,7 +30,7 @@ different ways.
|
||||
|
||||
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
|
||||
to specify the language directly after the opening block.
|
||||
to specify the language identifier directly after the opening block.
|
||||
|
||||
Example:
|
||||
|
||||
@ -103,7 +87,8 @@ Result:
|
||||
|
||||
### 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
|
||||
markdown_extensions:
|
||||
@ -114,7 +99,7 @@ markdown_extensions:
|
||||
Example:
|
||||
|
||||
```` markdown
|
||||
``` python
|
||||
``` python linenums="1"
|
||||
""" Bubble sort """
|
||||
def bubble_sort(items):
|
||||
for i in range(len(items)):
|
||||
@ -126,17 +111,18 @@ def bubble_sort(items):
|
||||
|
||||
Result:
|
||||
|
||||
#!python
|
||||
``` python linenums="1"
|
||||
""" Bubble sort """
|
||||
def bubble_sort(items):
|
||||
for i in range(len(items)):
|
||||
for j in range(len(items) - 1 - i):
|
||||
if items[j] > items[j + 1]:
|
||||
items[j], items[j + 1] = items[j + 1], items[j]
|
||||
```
|
||||
|
||||
### 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
|
||||
useful for documenting projects with multiple language bindings.
|
||||
|
||||
@ -156,6 +142,7 @@ Example:
|
||||
|
||||
int main(void) {
|
||||
printf("Hello world!\n");
|
||||
return 0;
|
||||
}
|
||||
```
|
||||
|
||||
@ -163,7 +150,7 @@ Example:
|
||||
``` c++
|
||||
#include <iostream>
|
||||
|
||||
int main() {
|
||||
int main(void) {
|
||||
std::cout << "Hello world!" << std::endl;
|
||||
return 0;
|
||||
}
|
||||
@ -196,6 +183,7 @@ Result:
|
||||
|
||||
int main(void) {
|
||||
printf("Hello world!\n");
|
||||
return 0;
|
||||
}
|
||||
```
|
||||
|
||||
@ -203,7 +191,7 @@ Result:
|
||||
``` c++
|
||||
#include <iostream>
|
||||
|
||||
int main() {
|
||||
int main(void) {
|
||||
std::cout << "Hello world!" << std::endl;
|
||||
return 0;
|
||||
}
|
||||
@ -220,8 +208,8 @@ Result:
|
||||
}
|
||||
```
|
||||
|
||||
[5]: https://facelessuser.github.io/pymdown-extensions/extensions/tabbed/
|
||||
[6]: https://facelessuser.github.io/pymdown-extensions
|
||||
[4]: https://facelessuser.github.io/pymdown-extensions/extensions/tabbed/
|
||||
[5]: https://facelessuser.github.io/pymdown-extensions
|
||||
|
||||
### Highlighting specific lines
|
||||
|
||||
|
||||
@ -1,13 +1,14 @@
|
||||
# Footnotes
|
||||
|
||||
[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/
|
||||
|
||||
## Installation
|
||||
## Configuration
|
||||
|
||||
Add the following lines to your `mkdocs.yml`:
|
||||
Add the following lines to `mkdocs.yml`:
|
||||
|
||||
``` yaml
|
||||
markdown_extensions:
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
hero: Metadata enables hero teaser texts
|
||||
---
|
||||
hero: Set heroes with metadata
|
||||
path: tree/master/docs/extensions
|
||||
source: metadata.md
|
||||
---
|
||||
|
||||
# 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/
|
||||
|
||||
## Installation
|
||||
## Configuration
|
||||
|
||||
Add the following lines to your `mkdocs.yml`:
|
||||
Add the following lines to `mkdocs.yml`:
|
||||
|
||||
``` yaml
|
||||
markdown_extensions:
|
||||
@ -28,10 +30,12 @@ actual page content and made available to the theme.
|
||||
Example:
|
||||
|
||||
``` markdown
|
||||
---
|
||||
title: Lorem ipsum dolor sit amet
|
||||
description: Nullam urna elit, malesuada eget finibus ut, ac tortor.
|
||||
path: path/to/file
|
||||
source: file.js
|
||||
---
|
||||
|
||||
# Headline
|
||||
|
||||
@ -40,13 +44,13 @@ source: file.js
|
||||
|
||||
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
|
||||
see on the current page when you scroll to the top. It's as simple as:
|
||||
|
||||
``` markdown
|
||||
hero: Metadata enables hero teaser texts
|
||||
hero: Set heroes with metadata
|
||||
```
|
||||
|
||||
### Linking sources
|
||||
@ -59,8 +63,9 @@ defined inside the project's `mkdocs.yml`, the file can be linked using the
|
||||
source: file.js
|
||||
```
|
||||
|
||||
The filename is appended to the `repo_url` set in your `mkdocs.yml`, but can
|
||||
be prefixed with a `path` to ensure correct path resolving:
|
||||
The filename is appended to the `repo_url` set in `mkdocs.yml`, but can be
|
||||
prefixed with a `path` to ensure correct path resolving. The name of the source
|
||||
file is shown in the tooltip.
|
||||
|
||||
Example:
|
||||
|
||||
@ -88,7 +93,7 @@ accessing that document's URL will automatically redirect to `/new/url`.
|
||||
|
||||
#### 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
|
||||
title: Lorem ipsum dolor sit amet
|
||||
@ -101,7 +106,7 @@ title.
|
||||
|
||||
#### 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
|
||||
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
|
||||
|
||||
As described in the [getting started guide][3], the Disqus comments section can
|
||||
be enabled on a per-document level:
|
||||
As described in the [getting started guide][3], Disqus can be enabled on a
|
||||
per-document basis:
|
||||
|
||||
``` markdown
|
||||
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
|
||||
disqus:
|
||||
|
||||
@ -2,14 +2,14 @@
|
||||
|
||||
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
|
||||
each headline, which makes it possible to directly link to a subpart of the
|
||||
document.
|
||||
each headline, which makes it possible to directly link to a specific section
|
||||
of the document.
|
||||
|
||||
[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
|
||||
markdown_extensions:
|
||||
@ -18,8 +18,8 @@ markdown_extensions:
|
||||
```
|
||||
|
||||
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
|
||||
Material theme will make appear on hover. In order to change the text of the
|
||||
headline (exactly like on the page you're currently viewing), which Material
|
||||
for MkDocs will make appear on hover. In order to change the text of the
|
||||
permalink, a string can be passed, e.g.:
|
||||
|
||||
``` markdown
|
||||
|
||||
@ -1,22 +1,15 @@
|
||||
# PyMdown Extensions
|
||||
|
||||
[PyMdown Extensions][1] is a collection of Markdown extensions that add some
|
||||
great features to the standard Markdown library. For this reason, the
|
||||
**installation of this package is highly recommended** as it's well-integrated
|
||||
with the Material theme.
|
||||
great missing features to the standard Markdown library. A compatible version
|
||||
is always included with the theme.
|
||||
|
||||
[1]: https://facelessuser.github.io/pymdown-extensions/
|
||||
|
||||
## Installation
|
||||
|
||||
The PyMdown Extensions package can be installed with the following command:
|
||||
|
||||
``` sh
|
||||
pip install pymdown-extensions
|
||||
```
|
||||
## Configuration
|
||||
|
||||
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
|
||||
markdown_extensions:
|
||||
@ -27,6 +20,7 @@ markdown_extensions:
|
||||
- pymdownx.critic
|
||||
- pymdownx.details
|
||||
- pymdownx.emoji:
|
||||
emoji_index: !!python/name:pymdownx.emoji.twemoji
|
||||
emoji_generator: !!python/name:pymdownx.emoji.to_svg
|
||||
- pymdownx.inlinehilite
|
||||
- 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>
|
||||
|
||||
[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
|
||||
mathematical notation. See [this thread][4] for a short introduction and quick
|
||||
reference on how to write equations in TeX syntax.
|
||||
|
||||
Besides activating the extension in the `mkdocs.yml`, the MathJax JavaScript
|
||||
runtime needs to be included. This must be done with
|
||||
[additional JavaScript][5]:
|
||||
runtime needs to be included. This can be done with [additional JavaScript][5]:
|
||||
|
||||
``` yaml
|
||||
extra_javascript:
|
||||
@ -60,8 +53,8 @@ extra_javascript:
|
||||
```
|
||||
|
||||
If you want to override the default MathJax configuration, you can do this by
|
||||
adding another JavaScript file **before** the MathJax runtime in
|
||||
`extra_javascript` which contains your MathJax configuration, e.g.:
|
||||
adding another JavaScript file **before** the MathJax runtime which contains
|
||||
the MathJax configuration, e.g.:
|
||||
|
||||
``` js
|
||||
window.MathJax = {
|
||||
@ -86,7 +79,7 @@ window.MathJax = {
|
||||
};
|
||||
```
|
||||
|
||||
In your `mkdocs.yml`, include it with:
|
||||
Then, add the following lines to `mkdocs.yml`:
|
||||
|
||||
``` yaml
|
||||
extra_javascript:
|
||||
@ -119,7 +112,7 @@ $$
|
||||
|
||||
#### Inline
|
||||
|
||||
Inline equations need to be enclosed in `:::tex $...$`:
|
||||
Inline equations must be enclosed in `:::tex $...$`:
|
||||
|
||||
Example:
|
||||
|
||||
@ -170,7 +163,7 @@ tags on separate lines and adding new lines between the tags and the content.
|
||||
|
||||
### 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,
|
||||
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.
|
||||
|
||||
[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
|
||||
our daily lives.
|
||||
[Emoji][13] adds the ability to insert, well, emojis! :smile:
|
||||
|
||||
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
|
||||
@ -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
|
||||
license. Simply override the default emoji index being used:
|
||||
|
||||
```yml
|
||||
``` yaml
|
||||
markdown_extensions:
|
||||
- pymdownx.emoji:
|
||||
emoji_index: !!python/name:pymdownx.emoji.twemoji
|
||||
emoji_generator: !!python/name:pymdownx.emoji.to_svg
|
||||
```
|
||||
|
||||
To view all the available short names and emoji available, see [Emoji's documentation][18]
|
||||
on your chosen index which includes links to the files containing the short names
|
||||
and emoji associated with each supported index. Happy scrolling :tada:.
|
||||
To view all the available short names and emoji available, see
|
||||
[Emoji's documentation][18] on your chosen index which includes links to the
|
||||
files containing the short names and emoji associated with each supported
|
||||
index.
|
||||
|
||||
!!! warning "Legal disclaimer"
|
||||
|
||||
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
|
||||
images or CSS from either provider, please read the the respective
|
||||
licenses: [EmojiOne][17] or [Twemoji][14] to ensure proper usage and
|
||||
attribution.
|
||||
of which are licensed under [CC BY 4.0][16]. When including images or CSS
|
||||
from either provider, please read their licenses to ensure proper
|
||||
attribution: [EmojiOne][17] or [Twemoji][14].
|
||||
|
||||
[13]: https://facelessuser.github.io/pymdown-extensions/extensions/emoji/
|
||||
[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
|
||||
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`.
|
||||
|
||||
[19]: https://facelessuser.github.io/pymdown-extensions/extensions/inlinehilite/
|
||||
@ -270,29 +262,29 @@ SuperFences does also allow [grouping code blocks with tabs][25].
|
||||
|
||||
``` markdown
|
||||
=== "Fruit List"
|
||||
- Apple
|
||||
- Banana
|
||||
- Orange
|
||||
- :apple: Apple
|
||||
- :banana: Banana
|
||||
- :kiwi: Kiwi
|
||||
|
||||
=== "Fruit Table"
|
||||
Fruit | Color
|
||||
------ | -----
|
||||
Apple | Red
|
||||
Banana | Yellow
|
||||
Oragne | Orange
|
||||
--------------- | -----
|
||||
:apple: Apple | Red
|
||||
:banana: Banana | Yellow
|
||||
:kiwi: Kiwi | Green
|
||||
```
|
||||
|
||||
=== "Fruit List"
|
||||
- Apple
|
||||
- Banana
|
||||
- Orange
|
||||
- :apple: Apple
|
||||
- :banana: Banana
|
||||
- :kiwi: Kiwi
|
||||
|
||||
=== "Fruit Table"
|
||||
Fruit | Color
|
||||
------ | -----
|
||||
Apple | Red
|
||||
Banana | Yellow
|
||||
Oragne | Orange
|
||||
--------------- | -----
|
||||
:apple: Apple | Red
|
||||
:banana: Banana | Yellow
|
||||
:kiwi: Kiwi | Green
|
||||
|
||||
[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
|
||||
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
|
||||
extra:
|
||||
@ -607,7 +607,7 @@ google_analytics:
|
||||
|
||||
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
|
||||
in your `mkdocs.yml`:
|
||||
in `mkdocs.yml`:
|
||||
|
||||
``` yaml
|
||||
extra:
|
||||
@ -630,8 +630,8 @@ Disqus can also be enabled or disabled for specific pages using [Metadata][25].
|
||||
## Extensions
|
||||
|
||||
[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
|
||||
on:
|
||||
are not enabled by default but highly recommended, so enabling them should
|
||||
definitely be a good idea:
|
||||
|
||||
``` yaml
|
||||
markdown_extensions:
|
||||
@ -642,8 +642,8 @@ markdown_extensions:
|
||||
permalink: true
|
||||
```
|
||||
|
||||
For more information, see the following list of extensions supported by Material
|
||||
for MkDocs including more information regarding installation and usage:
|
||||
See the following list of extensions supported by Material for MkDocs including
|
||||
some more information on configuration and usage:
|
||||
|
||||
* [Admonition][26]
|
||||
* [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
|
||||
including more information regarding installation and usage:
|
||||
|
||||
* [Minify HTML][32]
|
||||
* [Revision date][33]
|
||||
* [Search][34]
|
||||
* [Search][32] (enabled by default)
|
||||
* [Minification][33]
|
||||
* [Revision date][34]
|
||||
|
||||
For further reference, the MkDocs wiki contains a list of all
|
||||
[available plugins][35].
|
||||
|
||||
[32]: plugins/minify-html.md
|
||||
[33]: plugins/revision-date.md
|
||||
[34]: plugins/search.md
|
||||
[32]: plugins/search.md
|
||||
[33]: plugins/minification.md
|
||||
[34]: plugins/revision-date.md
|
||||
[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
|
||||
nav:
|
||||
- Material: index.md
|
||||
- Home: index.md
|
||||
- Getting started: getting-started.md
|
||||
- Extensions:
|
||||
- Admonition: extensions/admonition.md
|
||||
@ -127,14 +127,14 @@ nav:
|
||||
- Permalinks: extensions/permalinks.md
|
||||
- PyMdown: extensions/pymdown.md
|
||||
- Plugins:
|
||||
- Minify HTML: plugins/minify-html.md
|
||||
- Revision date: plugins/revision-date.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
|
||||
- Compliance with GDPR: compliance.md
|
||||
- Release notes: release-notes.md
|
||||
- Author's notes: authors-notes.md
|
||||
- Data privacy: data-privacy.md
|
||||
- Contributing: contributing.md
|
||||
- License: license.md
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user