1
0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2024-12-18 10:25:58 +01:00
mkdocs-material/docs/extensions/pymdown.md

285 lines
9.1 KiB
Markdown
Raw Normal View History

# 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.
[1]: http://facelessuser.github.io/pymdown-extensions/
## Installation
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
package are recommended to be used together with the Material theme:
``` yaml
markdown_extensions:
2017-01-09 21:41:30 +01:00
- pymdownx.arithmatex
- pymdownx.betterem(smart_enable=all)
- pymdownx.caret
- pymdownx.critic
2017-01-09 22:25:15 +01:00
- pymdownx.emoji:
emoji_generator: !!python/name:pymdownx.emoji.to_svg
- pymdownx.inlinehilite
- pymdownx.magiclink
- pymdownx.mark
- pymdownx.smartsymbols
- pymdownx.superfences
- pymdownx.tasklist(custom_checkbox=true)
- pymdownx.tilde
```
2017-01-02 23:11:32 +01:00
## Usage
### GitHub Flavored Markdown
Most of the extensions included in the PyMdown Extensions package try to bring
the Markdown experience closer to GitHub Flavored Markdown (GFM).
The PyMdown Extensions package adds a shorthand to enable all of the included
extensions that provide the GFM experience. However, usage of the shorthand is
discouraged, because some extensions are not supported, as the Material theme
2017-01-12 20:15:30 +01:00
uses some incompatible extensions included in the standard Markdown library.
#### BetterEm
[BetterEm][2] improves the handling of emphasis markup (**bold** and *italic*)
within Markdown by providing a more sophisticated parser for better detecting
start and end tokens. Read the documentation for [usage notes][3].
[2]: https://facelessuser.github.io/pymdown-extensions/extensions/betterem/
[3]: https://facelessuser.github.io/pymdown-extensions/usage_notes/
2017-01-09 22:25:15 +01:00
#### Emoji
2017-01-09 22:25:15 +01:00
[Emoji][4] adds the ability to insert a :shit:-load of emojis that we use in
2017-01-09 22:34:04 +01:00
our daily lives. See the [EmojiOne demo][5] for a list of all available
emojis. Happy scrolling :tada:
2017-01-09 22:34:04 +01:00
!!! warning "Legal disclaimer"
Material has no affiliation with [EmojiOne][6] which is released under
[CC BY 4.0][7]. When including EmojiOne images or CSS, please read the
[EmojiOne license][8] to ensure proper usage and attribution.
2017-01-09 22:25:15 +01:00
[4]: https://facelessuser.github.io/pymdown-extensions/extensions/emoji/
2017-01-09 22:34:04 +01:00
[5]: http://emojione.com/demo/
[6]: http://emojione.com
[7]: https://creativecommons.org/licenses/by/4.0/legalcode
[8]: http://emojione.com/licensing/
#### MagicLink
2017-01-09 22:34:04 +01:00
[MagicLink][9] detects links in Markdown and auto-generates the necessary
2017-01-09 22:25:15 +01:00
markup, so no special syntax is required. It auto-links `http[s]://` and
`ftp://` links, as well as references to email addresses:
2017-01-09 22:34:04 +01:00
[9]: https://facelessuser.github.io/pymdown-extensions/extensions/magiclink/
#### SuperFences
2017-01-09 22:34:04 +01:00
[SuperFences][10] provides the ability to nest code blocks under blockquotes,
lists and other block elements, which the [Fenced Code Blocks][11] extension
from the standard Markdown library doesn't parse correctly.
2017-01-09 22:34:04 +01:00
[10]: https://facelessuser.github.io/pymdown-extensions/extensions/superfences/
[11]: https://pythonhosted.org/Markdown/extensions/fenced_code_blocks.html
#### Tasklist
2017-01-09 22:34:04 +01:00
[Tasklist][12] adds support for styled checkbox lists. This is useful for
keeping track of tasks and showing what has been done and has yet to be done.
Checkbox lists are like regular lists, but prefixed with `[ ]` for empty or
`[x]` for filled checkboxes.
Example:
``` markdown
* [x] Lorem ipsum dolor sit amet, consectetur adipiscing elit
* [x] Nulla lobortis egestas semper
* [x] Curabitur elit nibh, euismod et ullamcorper at, iaculis feugiat est
* [ ] Vestibulum convallis sit amet nisi a tincidunt
* [x] In hac habitasse platea dictumst
* [x] In scelerisque nibh non dolor mollis congue sed et metus
* [x] Sed egestas felis quis elit dapibus, ac aliquet turpis mattis
* [ ] Praesent sed risus massa
* [ ] Aenean pretium efficitur erat, donec pharetra, ligula non scelerisque
* [ ] Nulla vel eros venenatis, imperdiet enim id, faucibus nisi
```
Result:
* [x] Lorem ipsum dolor sit amet, consectetur adipiscing elit
* [x] Nulla lobortis egestas semper
* [x] Curabitur elit nibh, euismod et ullamcorper at, iaculis feugiat est
* [ ] Vestibulum convallis sit amet nisi a tincidunt
* [x] In hac habitasse platea dictumst
* [x] In scelerisque nibh non dolor mollis congue sed et metus
* [x] Sed egestas felis quis elit dapibus, ac aliquet turpis mattis
* [ ] Praesent sed risus massa
* [ ] Aenean pretium efficitur erat, donec pharetra, ligula non scelerisque
* [ ] Nulla vel eros venenatis, imperdiet enim id, faucibus nisi
2017-01-09 22:34:04 +01:00
[12]: https://facelessuser.github.io/pymdown-extensions/extensions/tasklist/
#### Tilde
2017-01-09 22:34:04 +01:00
[Tilde][13] provides an easy way to ~~strike through~~ cross out text.
The portion of text that should be erased must be enclosed in two tildes
2017-01-12 20:15:30 +01:00
`~~...~~` and the extension will take care of the rest.
2017-01-09 22:34:04 +01:00
[13]: https://facelessuser.github.io/pymdown-extensions/extensions/tilde/
### More syntactic sugar
#### Caret
2017-01-09 22:34:04 +01:00
[Caret][14] is the sister extension of [Tilde][15] and makes it possible to
highlight ^^inserted text^^. The portion of text that should be marked as added
must be enclosed in two carets `^^...^^`.
2017-01-09 22:34:04 +01:00
[14]: https://facelessuser.github.io/pymdown-extensions/extensions/caret/
[15]: #tilde
#### Mark
2017-01-09 22:34:04 +01:00
[Mark][16] adds the ability to ==highlight text== like it was marked with a
==yellow text marker==. The portion of text that should be highlighted must be
enclosed in two equal signs `==...==`.
2017-01-09 22:34:04 +01:00
[16]: https://facelessuser.github.io/pymdown-extensions/extensions/mark/
#### SmartSymbols
2017-01-09 22:34:04 +01:00
[SmartSymbols][17] converts markup for special characters into their
corresponding symbols, e.g. arrows (<--, -->, <-->), trademark and copyright
symbols ((c), (tm), (r)) and fractions (1/2, 1/4, ...).
2017-01-09 22:34:04 +01:00
[17]: https://facelessuser.github.io/pymdown-extensions/extensions/smartsymbols/
#### Critic
2017-01-09 22:34:04 +01:00
[Critic][18] implements [Critic Markup][19], a Markdown extension that enables
the tracking of changes (additions, deletions and comments) on documents.
During compilation of the Markdown document, changes can be rendered (default),
accepted or rejected.
Text can be {--deleted--} and replacement text {++added++}. This can also be
2017-01-12 20:15:30 +01:00
combined into {~~one~>a single~~} operation. {==Highlighting==} is also
possible {>>and comments can be added inline<<}.
{==
2017-01-12 20:15:30 +01:00
Formatting can also be applied to blocks, by putting the opening and closing
tags on separate lines and adding new lines between the tags and the content.
==}
2017-01-09 22:34:04 +01:00
[18]: https://facelessuser.github.io/pymdown-extensions/extensions/critic/
[19]: http://criticmarkup.com/
2017-01-09 21:41:30 +01:00
### Arithmatex <small>MathJax</small>
2017-01-09 21:41:30 +01:00
<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML"></script>
2017-01-09 22:34:04 +01:00
[Arithmatex][20] integrates Material with [MathJax][21] which parses
block-style and inline equations written in TeX markup and outputs them in
2017-01-09 22:34:04 +01:00
mathematical notation. See [this thread][22] for a short introduction and quick
reference on how to write equations in TeX syntax.
2017-01-09 21:41:30 +01:00
Besides activating the extension in the `mkdocs.yml`, the MathJax JavaScript
2017-01-12 20:15:30 +01:00
runtime needs to be included. This must be done with
2017-01-09 22:34:04 +01:00
[additional JavaScript][23]:
2017-01-09 21:41:30 +01:00
``` yaml
extra_javascript:
2017-01-09 21:41:30 +01:00
- 'https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML'
```
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.:
2017-01-09 21:41:30 +01:00
``` js
2017-01-09 21:58:29 +01:00
window.MathJax = {
tex2jax: {
inlineMath: [ ["\\(","\\)"] ],
displayMath: [ ["\\[","\\]"] ]
},
TeX: {
TagSide: "right",
TagIndent: ".8em",
MultLineWidth: "85%",
equationNumbers: {
autoNumber: "AMS",
},
unicode: {
fonts: "STIXGeneral,'Arial Unicode MS'"
}
},
displayAlign: "left",
showProcessingMessages: false,
messageStyle: "none"
};
2017-01-09 21:41:30 +01:00
```
In your `mkdocs.yml`, include it with:
``` yaml
extra_javascript:
2017-01-12 20:15:30 +01:00
- 'javascripts/extra.js'
- 'https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML'
```
2017-01-09 22:34:04 +01:00
[20]: https://facelessuser.github.io/pymdown-extensions/extensions/arithmatex/
[21]: https://www.mathjax.org/
[22]: http://meta.math.stackexchange.com/questions/5020/
[23]: ../customization.md#additional-javascript
2017-01-09 21:41:30 +01:00
#### Blocks
Blocks are enclosed in `:::tex $$...$$` which are placed on separate lines.
Example:
``` tex
$$
\frac{n!}{k!(n-k)!} = \binom{n}{k}
$$
```
Result:
$$
\frac{n!}{k!(n-k)!} = \binom{n}{k}
$$
2017-01-09 21:41:30 +01:00
#### Inline
Inline equations need to be enclosed in `:::tex $...$`:
Example:
``` tex
Lorem ipsum dolor sit amet: $p(x|y) = \frac{p(y|x)p(x)}{p(y)}$
```
Result:
Lorem ipsum dolor sit amet: $p(x|y) = \frac{p(y|x)p(x)}{p(y)}$
2017-01-09 21:41:30 +01:00
### InlineHilite
2017-01-09 22:34:04 +01:00
[InlineHilite][24] 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
achived by prefixing inline code with a shebang and language identifier,
e.g. `#!js`.
2017-01-09 22:34:04 +01:00
[24]: https://facelessuser.github.io/pymdown-extensions/extensions/inlinehilite/