Integrated with mkdocs-material-extensions

This commit is contained in:
squidfunk 2020-04-12 19:58:22 +02:00
parent 7da5010d69
commit f90644dac5
10 changed files with 114 additions and 67 deletions

View File

@ -24,8 +24,8 @@ markdown_extensions:
- pymdownx.critic
- pymdownx.details
- pymdownx.emoji:
emoji_index: !!python/name:pymdownx.emoji.twemoji
emoji_generator: !!python/name:pymdownx.emoji.to_svg
emoji_index: !!python/name:materialx.emoji.twemoji
emoji_generator: !!python/name:materialx.emoji.to_svg
- pymdownx.inlinehilite
- pymdownx.magiclink
- pymdownx.mark
@ -208,61 +208,94 @@ index.
from either provider, please read their licenses to ensure proper
attribution: [EmojiOne][17] or [Twemoji][14].
### Icons :hatching_chick:
In addition, you can embed the Material Design icons, Fontawesome icons and
GitHub's Octicons directly from Markdown by using [Material for MkDocs's custom
emoji index][19]. It extends the Twemoji index with new short names that access
any of the included icons. To use the custom index, you need to use
`materialx.emoji` instead of `pymdownx.emoji`:
``` yaml
markdown_extensions:
- pymdownx.emoji:
emoji_index: !!python/name:materialx.emoji.material
emoji_generator: !!python/name:materialx.emoji.to_svg
```
Example:
``` markdown
* :material-account-circle: we can use Material Design icons
* :fontawesome-regular-laugh-wink: we can also use FontAwesome icons
* :octicons-octoface: that's not all, we can also use GitHub's Octicons
```
Result:
* :material-account-circle: we can use [Material Design icons][20]
* :fontawesome-regular-laugh-wink: we can also use [FontAwesome icons][21]
* :octicons-octoface: that's not all, we can also use [GitHub's Octicons][22]
[13]: https://facelessuser.github.io/pymdown-extensions/extensions/emoji/
[14]: https://twemoji.twitter.com/
[15]: https://www.joypixels.com/
[16]: https://creativecommons.org/licenses/by/4.0/legalcode
[17]: https://github.com/joypixels/emojione#emojione-version-2
[18]: https://facelessuser.github.io/pymdown-extensions/extensions/emoji/#default-emoji-indexes
[19]: https://github.com/facelessuser/mkdocs-material-extensions
[20]: https://material.io/resources/icons/
[21]: https://fontawesome.com/icons?d=gallery&m=free
[22]: https://octicons.github.com/
### InlineHilite
[InlineHilite][19] adds support for inline code highlighting. It's useful for
[InlineHilite][23] 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
activated by prefixing inline code with a shebang and language identifier,
e.g. `#!js`.
[19]: https://facelessuser.github.io/pymdown-extensions/extensions/inlinehilite/
[23]: https://facelessuser.github.io/pymdown-extensions/extensions/inlinehilite/
### MagicLink
[MagicLink][20] detects links in Markdown and auto-generates the necessary
[MagicLink][24] detects links in Markdown and auto-generates the necessary
markup, so no special syntax is required. It auto-links `http[s]://` and
`ftp://` links, as well as references to email addresses.
[20]: https://facelessuser.github.io/pymdown-extensions/extensions/magiclink/
[24]: https://facelessuser.github.io/pymdown-extensions/extensions/magiclink/
### Mark
[Mark][21] adds the ability to ==highlight text== like it was marked with a
[Mark][25] adds the ability to ==highlight text== like it was marked with a
==text marker==. The portion of text that should be highlighted must be
enclosed in two equal signs `==...==`.
[21]: https://facelessuser.github.io/pymdown-extensions/extensions/mark/
[25]: https://facelessuser.github.io/pymdown-extensions/extensions/mark/
### SmartSymbols
[SmartSymbols][22] converts markup for special characters into their
[SmartSymbols][26] 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, ...).
[22]: https://facelessuser.github.io/pymdown-extensions/extensions/smartsymbols/
[26]: https://facelessuser.github.io/pymdown-extensions/extensions/smartsymbols/
### SuperFences
[SuperFences][23] provides the ability to nest code blocks under blockquotes,
lists and other block elements, which the [Fenced Code Blocks][24] extension
[SuperFences][27] provides the ability to nest code blocks under blockquotes,
lists and other block elements, which the [Fenced Code Blocks][28] extension
from the standard Markdown library doesn't parse correctly.
SuperFences does also allow [grouping code blocks with tabs][25].
SuperFences does also allow [grouping code blocks with tabs][29].
[23]: https://facelessuser.github.io/pymdown-extensions/extensions/superfences/
[24]: https://python-markdown.github.io/extensions/fenced_code_blocks/
[25]: codehilite.md#grouping-code-blocks
[27]: https://facelessuser.github.io/pymdown-extensions/extensions/superfences/
[28]: https://python-markdown.github.io/extensions/fenced_code_blocks/
[29]: codehilite.md#grouping-code-blocks
### Tabbed
[Tabbed][26] adds support for creating tabbed groups of Markdown content.
[Tabbed][30] adds support for creating tabbed groups of Markdown content.
Example:
@ -294,11 +327,11 @@ Result:
:banana: Banana | Yellow
:kiwi: Kiwi | Green
[26]: https://facelessuser.github.io/pymdown-extensions/extensions/superfences/
[30]: https://facelessuser.github.io/pymdown-extensions/extensions/superfences/
### Tasklist
[Tasklist][27] adds support for styled checkbox lists. This is useful for
[Tasklist][31] 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.
@ -331,12 +364,12 @@ Result:
* [ ] Aenean pretium efficitur erat, donec pharetra, ligula non scelerisque
* [ ] Nulla vel eros venenatis, imperdiet enim id, faucibus nisi
[27]: https://facelessuser.github.io/pymdown-extensions/extensions/tasklist/
[31]: https://facelessuser.github.io/pymdown-extensions/extensions/tasklist/
### Tilde
[Tilde][28] provides an easy way to ~~strike through~~ cross out text.
[Tilde][32] provides an easy way to ~~strike through~~ cross out text.
The portion of text that should be erased must be enclosed in two tildes
`~~...~~` and the extension will take care of the rest.
[28]: https://facelessuser.github.io/pymdown-extensions/extensions/tilde/
[32]: https://facelessuser.github.io/pymdown-extensions/extensions/tilde/

View File

@ -532,12 +532,16 @@ made. Icon sets which are bundled with Material for MkDocs:
* [Material Design icons][16]: 3.8k icons
* [FontAwesome icons][17]: 1.5k icons
* [GitHub octicons][18]: 200 icons
* [GitHub's Octicons][18]: 200 icons
__You can also use icons [directly from :fontawesome-brands-markdown:
Markdown][19]!__
[15]: #adding-social-links
[16]: https://material.io/resources/icons/
[17]: https://fontawesome.com/icons?d=gallery&m=free
[18]: https://octicons.github.com/
[19]: extensions/pymdown.md#icons
### Logo
@ -589,16 +593,16 @@ Note that the repository icon can be explicitly set through `theme.icon.repo`.
If the `repo_url` is set to a GitHub or BitBucket repository, and the
`repo_name` is set to *GitHub* or *BitBucket* (implied by default), an
edit button will appear at the top of every article. This is the automatic
behavior that MkDocs implements. See the [MkDocs documentation][19] on more
behavior that MkDocs implements. See the [MkDocs documentation][20] on more
guidance regarding the `edit_uri` attribute, which defines whether the edit
button is shown or not.
[19]: https://www.mkdocs.org/user-guide/configuration/#edit_uri
[20]: https://www.mkdocs.org/user-guide/configuration/#edit_uri
### Adding social links
Social accounts can be linked in the footer of the documentation using the
[icons][20] which are bundled with the theme. Note that each `icon` must point
[icons][21] which are bundled with the theme. Note that each `icon` must point
to a valid path (without the trailing `.svg`) relative to the `.icons` folder
which comes with the theme:
@ -613,11 +617,11 @@ extra:
link: https://linkedin.com/in/squidfunk
```
[20]: #icons
[21]: #icons
### Adding a Web App Manifest
A [Web App Manifest][21] is a simple JSON file that tells the browser about your
A [Web App Manifest][22] 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 `mkdocs.yml`:
@ -626,7 +630,7 @@ extra:
manifest: manifest.webmanifest
```
[21]: https://developers.google.com/web/fundamentals/web-app-manifest/
[22]: https://developers.google.com/web/fundamentals/web-app-manifest/
## Integrations
@ -654,7 +658,7 @@ search tracking:
### Disqus
Material for MkDocs is integrated with [Disqus][22], so if you want to add a
Material for MkDocs is integrated with [Disqus][23], so if you want to add a
comments section to your documentation set the *shortname* of your Disqus
project in `mkdocs.yml`:
@ -671,10 +675,10 @@ necessary JavaScript is automatically included.
Note that `site_url` must be set in `mkdocs.yml` for the Disqus integration
to load properly.
Disqus can also be enabled or disabled for specific pages using [Metadata][23].
Disqus can also be enabled or disabled for specific pages using [Metadata][24].
[22]: https://disqus.com
[23]: extensions/metadata.md#disqus
[23]: https://disqus.com
[24]: extensions/metadata.md#disqus
## Extensions
@ -694,19 +698,19 @@ markdown_extensions:
See the following list of extensions supported by Material for MkDocs including
some more information on configuration and usage:
* [Admonition][24]
* [Codehilite][25]
* [Footnotes][26]
* [Metadata][27]
* [Permalinks][28]
* [PyMdown Extensions][29]
* [Admonition][25]
* [Codehilite][26]
* [Footnotes][27]
* [Metadata][28]
* [Permalinks][29]
* [PyMdown Extensions][30]
[24]: extensions/admonition.md
[25]: extensions/codehilite.md
[26]: extensions/footnotes.md
[27]: extensions/metadata.md
[28]: extensions/permalinks.md
[29]: extensions/pymdown.md
[25]: extensions/admonition.md
[26]: extensions/codehilite.md
[27]: extensions/footnotes.md
[28]: extensions/metadata.md
[29]: extensions/permalinks.md
[30]: extensions/pymdown.md
## Plugins
@ -715,16 +719,16 @@ 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:
* [Search][30] (enabled by default)
* [Minification][31]
* [Revision date][32]
* [Awesome pages][33]
* [Search][31] (enabled by default)
* [Minification][32]
* [Revision date][33]
* [Awesome pages][34]
For further reference, the MkDocs wiki contains a list of all
[available plugins][34].
[available plugins][35].
[30]: plugins/search.md
[31]: plugins/minification.md
[32]: plugins/revision-date.md
[33]: plugins/awesome-pages.md
[34]: https://github.com/mkdocs/mkdocs/wiki/MkDocs-Plugins
[31]: plugins/search.md
[32]: plugins/minification.md
[33]: plugins/revision-date.md
[34]: plugins/awesome-pages.md
[35]: https://github.com/mkdocs/mkdocs/wiki/MkDocs-Plugins

View File

@ -5,8 +5,8 @@
"assets/javascripts/vendor.js.map": "assets/javascripts/vendor.606193c2.min.js.map",
"assets/javascripts/worker/search.js": "assets/javascripts/worker/search.7f7c8775.min.js",
"assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.7f7c8775.min.js.map",
"assets/stylesheets/main.css": "assets/stylesheets/main.c1a4d03f.min.css",
"assets/stylesheets/main.css.map": "assets/stylesheets/main.c1a4d03f.min.css.map",
"assets/stylesheets/main.css": "assets/stylesheets/main.d35c4a9f.min.css",
"assets/stylesheets/main.css.map": "assets/stylesheets/main.d35c4a9f.min.css.map",
"assets/stylesheets/palette.css": "assets/stylesheets/palette.fdbf4049.min.css",
"assets/stylesheets/palette.css.map": "assets/stylesheets/palette.fdbf4049.min.css.map"
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

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

View File

@ -103,8 +103,8 @@ markdown_extensions:
- pymdownx.critic
- pymdownx.details
- pymdownx.emoji:
emoji_index: !!python/name:pymdownx.emoji.twemoji
emoji_generator: !!python/name:pymdownx.emoji.to_svg
emoji_index: !!python/name:materialx.emoji.twemoji
emoji_generator: !!python/name:materialx.emoji.to_svg
# - pymdownx.highlight:
# linenums_style: pymdownx-inline
- pymdownx.inlinehilite

View File

@ -23,3 +23,4 @@ mkdocs>=1.1
Pygments>=2.4
markdown>=3.2
pymdown-extensions>=7.0
mkdocs-material-extensions>=1.0b1

View File

@ -27,15 +27,24 @@
// Scoped in typesetted content to match specificity of regular content
.md-typeset {
// Correct alignment of emojis
.emojione,
.twemoji,
.gemoji {
// Emojis
img.emojione,
img.twemoji,
img.gemoji {
width: px2em(18px);
vertical-align: -15%;
}
// Inlined SVG icons via mkdocs-material-extensions
span.twemoji {
display: inline-block;
height: px2em(18px);
vertical-align: text-top;
// Icon
svg {
width: px2em(18px);
fill: currentColor;
}
}
}