mirror of
https://github.com/squidfunk/mkdocs-material.git
synced 2024-06-14 11:52:32 +03:00
Merge pull request #441 from squidfunk/feat/pymdown-details
Implement pymdownx.details functionality
This commit is contained in:
Martin Donath
GitHub
commit
4e748c5a55
@ -95,7 +95,7 @@ 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.
|
||||
blocks, respectively Admonition blocks.
|
||||
|
||||
[4]: https://facelessuser.github.io/pymdown-extensions
|
||||
[5]: https://facelessuser.github.io/pymdown-extensions/extensions/superfences/
|
||||
@ -128,14 +128,40 @@ Example:
|
||||
sem ut cursus. Nullam sit amet tincidunt ipsum, sit amet elementum turpis.
|
||||
Etiam ipsum quam, mattis in purus vitae, lacinia fermentum enim.
|
||||
|
||||
### Collapsible blocks
|
||||
|
||||
The [Details][6] extension which is also part of the [PyMdown Extensions][4]
|
||||
package adds support for rendering collapsible Admonition blocks. This is
|
||||
useful for FAQs or content that is of secondary nature.
|
||||
|
||||
Example:
|
||||
|
||||
``` markdown
|
||||
??? note "Phasellus posuere in sem ut cursus"
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
|
||||
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
|
||||
massa, nec semper lorem quam in massa.
|
||||
```
|
||||
|
||||
Result:
|
||||
|
||||
??? note "Phasellus posuere in sem ut cursus"
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
|
||||
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
|
||||
massa, nec semper lorem quam in massa.
|
||||
|
||||
By adding a `+` sign directly after the start marker, blocks can be rendered
|
||||
open by default.
|
||||
|
||||
[6]: https://facelessuser.github.io/pymdown-extensions/extensions/details/
|
||||
|
||||
## Types
|
||||
|
||||
Admonition supports user-defined type qualifiers which may influence the style
|
||||
of the inserted block. Following is a list of type qualifiers supported by the
|
||||
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][6].
|
||||
|
||||
[6]: #note
|
||||
qualifiers, is `note`.
|
||||
|
||||
### Note
|
||||
|
||||
@ -185,6 +211,30 @@ Qualifiers:
|
||||
* `summary`
|
||||
* `tldr`
|
||||
|
||||
### Info
|
||||
|
||||
Example:
|
||||
|
||||
``` markdown
|
||||
!!! info
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
|
||||
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
|
||||
massa, nec semper lorem quam in massa.
|
||||
```
|
||||
|
||||
Result:
|
||||
|
||||
!!! info
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
|
||||
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
|
||||
massa, nec semper lorem quam in massa.
|
||||
|
||||
Qualifiers:
|
||||
|
||||
* `info`
|
||||
* `todo`
|
||||
|
||||
### Tip
|
||||
|
||||
Example:
|
||||
@ -235,6 +285,31 @@ Qualifiers:
|
||||
* `check`
|
||||
* `done`
|
||||
|
||||
### Question
|
||||
|
||||
Example:
|
||||
|
||||
``` markdown
|
||||
!!! question
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
|
||||
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
|
||||
massa, nec semper lorem quam in massa.
|
||||
```
|
||||
|
||||
Result:
|
||||
|
||||
!!! question
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
|
||||
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
|
||||
massa, nec semper lorem quam in massa.
|
||||
|
||||
Qualifiers:
|
||||
|
||||
* `question`
|
||||
* `help`
|
||||
* `faq`
|
||||
|
||||
### Warning
|
||||
|
||||
Example:
|
||||
|
||||
@ -24,6 +24,7 @@ markdown_extensions:
|
||||
- pymdownx.betterem(smart_enable=all)
|
||||
- pymdownx.caret
|
||||
- pymdownx.critic
|
||||
- pymdownx.details
|
||||
- pymdownx.emoji:
|
||||
emoji_generator: !!python/name:pymdownx.emoji.to_svg
|
||||
- pymdownx.inlinehilite
|
||||
@ -37,165 +38,18 @@ markdown_extensions:
|
||||
|
||||
## 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
|
||||
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/
|
||||
|
||||
#### Emoji
|
||||
|
||||
[Emoji][4] adds the ability to insert a :shit:-load of emojis that we use in
|
||||
our daily lives. See the [EmojiOne demo][5] for a list of all available
|
||||
emojis. Happy scrolling :tada:
|
||||
|
||||
!!! 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.
|
||||
|
||||
[4]: https://facelessuser.github.io/pymdown-extensions/extensions/emoji/
|
||||
[5]: https://emoji.codes/
|
||||
[6]: http://emojione.com
|
||||
[7]: https://creativecommons.org/licenses/by/4.0/legalcode
|
||||
[8]: http://emojione.com/licensing/
|
||||
|
||||
#### MagicLink
|
||||
|
||||
[MagicLink][9] 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.
|
||||
|
||||
[9]: https://facelessuser.github.io/pymdown-extensions/extensions/magiclink/
|
||||
|
||||
#### SuperFences
|
||||
|
||||
[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.
|
||||
|
||||
[10]: https://facelessuser.github.io/pymdown-extensions/extensions/superfences/
|
||||
[11]: https://pythonhosted.org/Markdown/extensions/fenced_code_blocks.html
|
||||
|
||||
#### Tasklist
|
||||
|
||||
[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
|
||||
|
||||
[12]: https://facelessuser.github.io/pymdown-extensions/extensions/tasklist/
|
||||
|
||||
#### Tilde
|
||||
|
||||
[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
|
||||
`~~...~~` and the extension will take care of the rest.
|
||||
|
||||
[13]: https://facelessuser.github.io/pymdown-extensions/extensions/tilde/
|
||||
|
||||
### More syntactic sugar
|
||||
|
||||
#### Caret
|
||||
|
||||
[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 `^^...^^`.
|
||||
|
||||
[14]: https://facelessuser.github.io/pymdown-extensions/extensions/caret/
|
||||
[15]: #tilde
|
||||
|
||||
#### Mark
|
||||
|
||||
[Mark][16] 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 `==...==`.
|
||||
|
||||
[16]: https://facelessuser.github.io/pymdown-extensions/extensions/mark/
|
||||
|
||||
#### SmartSymbols
|
||||
|
||||
[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, ...).
|
||||
|
||||
[17]: https://facelessuser.github.io/pymdown-extensions/extensions/smartsymbols/
|
||||
|
||||
### Critic
|
||||
|
||||
[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
|
||||
combined into {~~one~>a single~~} operation. {==Highlighting==} is also
|
||||
possible {>>and comments can be added inline<<}.
|
||||
|
||||
{==
|
||||
|
||||
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.
|
||||
|
||||
==}
|
||||
|
||||
[18]: https://facelessuser.github.io/pymdown-extensions/extensions/critic/
|
||||
[19]: http://criticmarkup.com/
|
||||
|
||||
### Arithmatex <small>MathJax</small>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-MML-AM_CHTML"></script>
|
||||
|
||||
[Arithmatex][20] integrates Material with [MathJax][21] which parses
|
||||
[Arithmatex][2] integrates Material with [MathJax][3] which parses
|
||||
block-style and inline equations written in TeX markup and outputs them in
|
||||
mathematical notation. See [this thread][22] 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.
|
||||
|
||||
Besides activating the extension in the `mkdocs.yml`, the MathJax JavaScript
|
||||
runtime needs to be included. This must be done with
|
||||
[additional JavaScript][23]:
|
||||
[additional JavaScript][5]:
|
||||
|
||||
``` yaml
|
||||
extra_javascript:
|
||||
@ -237,10 +91,10 @@ extra_javascript:
|
||||
- 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-MML-AM_CHTML'
|
||||
```
|
||||
|
||||
[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
|
||||
[2]: https://facelessuser.github.io/pymdown-extensions/extensions/arithmatex/
|
||||
[3]: https://www.mathjax.org/
|
||||
[4]: http://meta.math.stackexchange.com/questions/5020/
|
||||
[5]: ../customization.md#additional-javascript
|
||||
|
||||
#### Blocks
|
||||
|
||||
@ -274,11 +128,157 @@ Result:
|
||||
|
||||
Lorem ipsum dolor sit amet: $p(x|y) = \frac{p(y|x)p(x)}{p(y)}$
|
||||
|
||||
### BetterEm
|
||||
|
||||
[BetterEm][6] 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][7].
|
||||
|
||||
[6]: https://facelessuser.github.io/pymdown-extensions/extensions/betterem/
|
||||
[7]: https://facelessuser.github.io/pymdown-extensions/usage_notes/
|
||||
|
||||
### Caret
|
||||
|
||||
[Caret][8] makes it possible to highlight ^^inserted text^^. The portion of
|
||||
text that should be marked as added must be enclosed in two carets `^^...^^`.
|
||||
|
||||
[8]: https://facelessuser.github.io/pymdown-extensions/extensions/caret/
|
||||
|
||||
### Critic
|
||||
|
||||
[Critic][9] implements [Critic Markup][10], 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
|
||||
combined into {~~one~>a single~~} operation. {==Highlighting==} is also
|
||||
possible {>>and comments can be added inline<<}.
|
||||
|
||||
{==
|
||||
|
||||
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.
|
||||
|
||||
==}
|
||||
|
||||
[9]: https://facelessuser.github.io/pymdown-extensions/extensions/critic/
|
||||
[10]: http://criticmarkup.com/
|
||||
|
||||
### Details
|
||||
|
||||
[Details][11] adds collapsible [Admonition-style 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.:
|
||||
|
||||
??? question "How many Prolog programmers does it take to change a lightbulb?"
|
||||
|
||||
Yes.
|
||||
|
||||
[11]: https://facelessuser.github.io/pymdown-extensions/extensions/details/
|
||||
[12]: admonition.md
|
||||
|
||||
### Emoji
|
||||
|
||||
[Emoji][13] adds the ability to insert a :shit:-load of emojis that we use in
|
||||
our daily lives. See the [EmojiOne demo][14] for a list of all available
|
||||
emojis. Happy scrolling :tada:
|
||||
|
||||
!!! warning "Legal disclaimer"
|
||||
|
||||
Material has no affiliation with [EmojiOne][15] which is released under
|
||||
[CC BY 4.0][16]. When including EmojiOne images or CSS, please read the
|
||||
[EmojiOne license][17] to ensure proper usage and attribution.
|
||||
|
||||
[13]: https://facelessuser.github.io/pymdown-extensions/extensions/emoji/
|
||||
[14]: https://emoji.codes/
|
||||
[15]: http://emojione.com
|
||||
[16]: https://creativecommons.org/licenses/by/4.0/legalcode
|
||||
[17]: http://emojione.com/licensing/
|
||||
|
||||
### InlineHilite
|
||||
|
||||
[InlineHilite][24] adds support for inline code highlighting. It's useful for
|
||||
[InlineHilite][18] 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`.
|
||||
|
||||
[24]: https://facelessuser.github.io/pymdown-extensions/extensions/inlinehilite/
|
||||
[18]: https://facelessuser.github.io/pymdown-extensions/extensions/inlinehilite/
|
||||
|
||||
### MagicLink
|
||||
|
||||
[MagicLink][19] 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.
|
||||
|
||||
[19]: https://facelessuser.github.io/pymdown-extensions/extensions/magiclink/
|
||||
|
||||
### Mark
|
||||
|
||||
[Mark][20] 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 `==...==`.
|
||||
|
||||
[20]: https://facelessuser.github.io/pymdown-extensions/extensions/mark/
|
||||
|
||||
### SmartSymbols
|
||||
|
||||
[SmartSymbols][21] 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, ...).
|
||||
|
||||
[21]: https://facelessuser.github.io/pymdown-extensions/extensions/smartsymbols/
|
||||
|
||||
### SuperFences
|
||||
|
||||
[SuperFences][22] provides the ability to nest code blocks under blockquotes,
|
||||
lists and other block elements, which the [Fenced Code Blocks][23] extension
|
||||
from the standard Markdown library doesn't parse correctly.
|
||||
|
||||
[22]: https://facelessuser.github.io/pymdown-extensions/extensions/superfences/
|
||||
[23]: https://pythonhosted.org/Markdown/extensions/fenced_code_blocks.html
|
||||
|
||||
### Tasklist
|
||||
|
||||
[Tasklist][24] 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
|
||||
|
||||
[24]: https://facelessuser.github.io/pymdown-extensions/extensions/tasklist/
|
||||
|
||||
### Tilde
|
||||
|
||||
[Tilde][25] 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.
|
||||
|
||||
[25]: https://facelessuser.github.io/pymdown-extensions/extensions/tilde/
|
||||
|
||||
@ -98,7 +98,7 @@ This is especially useful if you want to [extend the theme][7] and
|
||||
If you run into this error, the most common reason is that you installed
|
||||
MkDocs through some package manager (e.g. Homebrew or `apt-get`) and the
|
||||
Material theme through `pip`, so both packages end up in different
|
||||
locations. MkDocs only checks it's install location for themes.
|
||||
locations. MkDocs only checks its install location for themes.
|
||||
|
||||
## Usage
|
||||
|
||||
|
||||
1
material/assets/javascripts/application-3700c4cc12.js
Normal file
1
material/assets/javascripts/application-3700c4cc12.js
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
1
material/assets/javascripts/modernizr-e826f8942a.js
Normal file
1
material/assets/javascripts/modernizr-e826f8942a.js
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
1
material/assets/stylesheets/application-4cc45aa1cf.css
Normal file
1
material/assets/stylesheets/application-4cc45aa1cf.css
Normal file
File diff suppressed because one or more lines are too long
@ -36,10 +36,10 @@
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
{% block libs %}
|
||||
<script src="{{ base_url }}/assets/javascripts/modernizr-1df76c4e58.js"></script>
|
||||
<script src="{{ base_url }}/assets/javascripts/modernizr-e826f8942a.js"></script>
|
||||
{% endblock %}
|
||||
{% block styles %}
|
||||
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-1fcf5138d0.css">
|
||||
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-4cc45aa1cf.css">
|
||||
{% if config.extra.palette %}
|
||||
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-02c2a4388f.palette.css">
|
||||
{% endif %}
|
||||
@ -150,7 +150,7 @@
|
||||
{% endblock %}
|
||||
</div>
|
||||
{% block scripts %}
|
||||
<script src="{{ base_url }}/assets/javascripts/application-6940329b9f.js"></script>
|
||||
<script src="{{ base_url }}/assets/javascripts/application-3700c4cc12.js"></script>
|
||||
{% set languages = lang.t("search.languages").split(",") %}
|
||||
{% if languages | length and languages[0] != "" %}
|
||||
{% set path = base_url + "/assets/javascripts/lunr" %}
|
||||
|
||||
@ -63,6 +63,7 @@ markdown_extensions:
|
||||
- pymdownx.betterem(smart_enable=all)
|
||||
- pymdownx.caret
|
||||
- pymdownx.critic
|
||||
- pymdownx.details
|
||||
- pymdownx.emoji:
|
||||
emoji_generator: !!python/name:pymdownx.emoji.to_svg
|
||||
- pymdownx.inlinehilite
|
||||
|
||||
@ -111,6 +111,21 @@ function initialize(config) { // eslint-disable-line func-style
|
||||
})
|
||||
}
|
||||
|
||||
/* Polyfill details/summary functionality */
|
||||
if (!Modernizr.details) {
|
||||
const blocks = document.querySelectorAll("details > summary")
|
||||
Array.prototype.forEach.call(blocks, summary => {
|
||||
summary.addEventListener("click", ev => {
|
||||
const details = ev.target.parentNode
|
||||
if (details.hasAttribute("open")) {
|
||||
details.removeAttribute("open")
|
||||
} else {
|
||||
details.setAttribute("open", "")
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
/* Force 1px scroll offset to trigger overflow scrolling */
|
||||
if (Modernizr.ios) {
|
||||
const scrollable = document.querySelectorAll("[data-md-scrollfix]")
|
||||
|
||||
@ -59,6 +59,7 @@
|
||||
|
||||
@import "extensions/pymdown/arithmatex";
|
||||
@import "extensions/pymdown/critic";
|
||||
@import "extensions/pymdown/details";
|
||||
@import "extensions/pymdown/emoji";
|
||||
@import "extensions/pymdown/inlinehilite";
|
||||
@import "extensions/pymdown/tasklist";
|
||||
|
||||
@ -56,7 +56,7 @@
|
||||
// Title
|
||||
.admonition-title {
|
||||
margin: -1.2rem -1.2rem 0;
|
||||
padding: 0.8rem 1.2rem;
|
||||
padding: 0.8rem 1.2rem 0.8rem 4rem;
|
||||
border-bottom: 0.1rem solid transparentize($clr-blue-a200, 0.9);
|
||||
background-color: transparentize($clr-blue-a200, 0.9);
|
||||
font-weight: 700;
|
||||
@ -65,19 +65,21 @@
|
||||
&::before {
|
||||
@extend %md-icon;
|
||||
|
||||
margin-right: 0.8rem;
|
||||
position: absolute;
|
||||
left: 1.2rem;
|
||||
color: $clr-blue-a200;
|
||||
font-size: 2rem;
|
||||
content: "edit";
|
||||
vertical-align: -0.25em;
|
||||
}
|
||||
}
|
||||
|
||||
// Build representational classes
|
||||
@each $names, $appearance in (
|
||||
summary tldr: $clr-light-blue-a400 "subject",
|
||||
info todo: $clr-cyan-a700 "info",
|
||||
tip hint important : $clr-teal-a700 "whatshot",
|
||||
success check done: $clr-green-a700 "done",
|
||||
question help faq: $clr-light-green-a700 "help",
|
||||
warning caution attention: $clr-orange-a400 "warning",
|
||||
failure fail missing: $clr-red-a200 "clear",
|
||||
danger error: $clr-red-a400 "flash_on",
|
||||
|
||||
97
src/assets/stylesheets/extensions/pymdown/_details.scss
Normal file
97
src/assets/stylesheets/extensions/pymdown/_details.scss
Normal file
@ -0,0 +1,97 @@
|
||||
////
|
||||
/// Copyright (c) 2016-2017 Martin Donath <martin.donath@squidfunk.com>
|
||||
///
|
||||
/// Permission is hereby granted, free of charge, to any person obtaining a
|
||||
/// copy of this software and associated documentation files (the "Software"),
|
||||
/// to deal in the Software without restriction, including without limitation
|
||||
/// the rights to use, copy, modify, merge, publish, distribute, sublicense,
|
||||
/// and/or sell copies of the Software, and to permit persons to whom the
|
||||
/// Software is furnished to do so, subject to the following conditions:
|
||||
///
|
||||
/// The above copyright notice and this permission notice shall be included in
|
||||
/// all copies or substantial portions of the Software.
|
||||
///
|
||||
/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL
|
||||
/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
/// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
|
||||
/// DEALINGS
|
||||
////
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Rules
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Scoped in typesetted content to match specificity of regular content
|
||||
.md-typeset {
|
||||
|
||||
// Details extension
|
||||
details {
|
||||
@extend .admonition;
|
||||
|
||||
padding-top: 0;
|
||||
|
||||
// Rotate title icon
|
||||
&[open] > summary::after {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
// Remove bottom spacing
|
||||
&:not([open]) {
|
||||
padding-bottom: 0;
|
||||
|
||||
// Remove bottom border if block is closed
|
||||
> summary {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Increase spacing to the right - scoped here for higher specificity
|
||||
summary {
|
||||
padding-right: 4rem;
|
||||
}
|
||||
|
||||
// Manually hide and show, if browser doesn't support details
|
||||
.no-details &:not([open]) {
|
||||
|
||||
// Hide all nested tags ...
|
||||
> * {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// ... but show title
|
||||
summary {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Title
|
||||
summary {
|
||||
@extend .admonition-title;
|
||||
|
||||
// Hack: set to block, so Firefox doesn't render marker
|
||||
display: block;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
|
||||
// Remove default details marker
|
||||
&::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Icon
|
||||
&::after {
|
||||
@extend %md-icon;
|
||||
|
||||
position: absolute;
|
||||
top: 0.8rem;
|
||||
right: 1.2rem;
|
||||
color: $md-color-black--lighter;
|
||||
font-size: 2rem;
|
||||
content: "keyboard_arrow_down";
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -163,9 +163,6 @@
|
||||
display: inline-block;
|
||||
width: 3.2rem;
|
||||
height: 3.2rem;
|
||||
border: 0.1rem solid $md-color-white--lightest;
|
||||
border-radius: 100%;
|
||||
color: $md-color-white--light;
|
||||
font-size: 1.6rem;
|
||||
text-align: center;
|
||||
|
||||
@ -173,5 +170,10 @@
|
||||
&::before {
|
||||
line-height: 1.9;
|
||||
}
|
||||
|
||||
// Active link
|
||||
&:hover::before {
|
||||
color: $md-color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2020,9 +2020,9 @@ flatten@^1.0.2:
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782"
|
||||
|
||||
flow-bin@^0.52.0:
|
||||
version "0.52.0"
|
||||
resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.52.0.tgz#b6d9abe8bcd1ee5c62df386451a4e2553cadc3a3"
|
||||
flow-bin@^0.53.0:
|
||||
version "0.53.1"
|
||||
resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.53.1.tgz#9b22b63a23c99763ae533ebbab07f88c88c97d84"
|
||||
|
||||
flow-jsdoc@^0.3.0:
|
||||
version "0.3.0"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user