mirror of
https://github.com/squidfunk/mkdocs-material.git
synced 2026-08-04 19:45:08 -04:00
Refactored admonition styles to be slightly lighter
This commit is contained in:
squidfunk
@@ -1,57 +1,312 @@
|
||||
# Admonition
|
||||
|
||||
## Variations
|
||||
[Admonition][] 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, hints, notes or warnings.
|
||||
|
||||
## Installation
|
||||
|
||||
Add the following lines to your `mkdocs.yml`:
|
||||
|
||||
``` yaml
|
||||
markdown_extensions:
|
||||
- admonition
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
Admonition blocks follow a simple syntax: every block is started with `!!!`,
|
||||
followed by a single keyword which is used as the [type qualifier](#types) of
|
||||
the block. The content of the block then follows on the next line, indented by
|
||||
four spaces.
|
||||
|
||||
Example:
|
||||
|
||||
``` markdown
|
||||
!!! hint
|
||||
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:
|
||||
|
||||
!!! hint
|
||||
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.
|
||||
|
||||
!!! hint "Failure with custom name"
|
||||
### Change the title
|
||||
|
||||
!!! hint
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at nisl ac
|
||||
urna lobortis consectetur ut vitae urna. Donec eu viverra sapien. Nam
|
||||
tempor auctor lacus et congue. Quisque id congue velit. Lorem ipsum dolor
|
||||
sit amet, consectetur adipiscing elit.
|
||||
By default, the block title will equal the type qualifier. However, it can
|
||||
easily be changed by adding a quoted string after the type qualifier.
|
||||
|
||||
Nunc eu odio eleifend, blandit leo a, volutpat sapien. Phasellus posuere in
|
||||
sem ut cursus. Nullam sit amet tincidunt ipsum, sit amet elementum turpis.
|
||||
Etiam ipsum quam, mattis in purus vitae, lacinia fermentum enim.
|
||||
Example:
|
||||
|
||||
``` markdown
|
||||
!!! hint "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:
|
||||
|
||||
!!! hint "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.
|
||||
|
||||
### Remove the title
|
||||
|
||||
Similar to setting a [custom title](#change-the-title), the icon and title can
|
||||
be omitted by providing an empty string after the type qualifier:
|
||||
|
||||
Example:
|
||||
|
||||
``` markdown
|
||||
!!! hint ""
|
||||
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:
|
||||
|
||||
!!! hint ""
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at nisl ac
|
||||
urna lobortis consectetur ut vitae urna. Donec eu viverra sapien. Nam
|
||||
tempor auctor lacus et congue. Quisque id congue velit. Lorem ipsum dolor
|
||||
sit amet, consectetur adipiscing elit.
|
||||
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.
|
||||
|
||||
### Embedded code blocks
|
||||
|
||||
Blocks 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][] package adds an extension called
|
||||
`superfences`, which makes it possible to nest code blocks within other blocks.
|
||||
|
||||
Example:
|
||||
|
||||
!!! hint
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at nisl ac
|
||||
urna lobortis consectetur ut vitae urna. Donec eu viverra sapien. Nam
|
||||
tempor auctor lacus et congue. Quisque id congue velit. Lorem ipsum dolor
|
||||
sit amet, consectetur adipiscing elit.
|
||||
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.
|
||||
|
||||
> Nunc eu odio eleifend, blandit leo a, volutpat sapien. Phasellus posuere
|
||||
> sem ut cursus. Nullam sit amet tincidunt ipsum, sit amet elementum turpis.
|
||||
``` mysql
|
||||
SELECT
|
||||
Employees.EmployeeID,
|
||||
Employees.Name,
|
||||
Employees.Salary,
|
||||
Manager.Name AS Manager
|
||||
FROM
|
||||
Employees
|
||||
LEFT JOIN
|
||||
Employees AS Manager
|
||||
ON
|
||||
Employees.ManagerID = Manager.EmployeeID
|
||||
WHERE
|
||||
Employees.EmployeeID = '087652';
|
||||
```
|
||||
|
||||
Nunc eu odio eleifend, blandit leo a, volutpat sapien. Phasellus posuere in
|
||||
sem ut cursus. Nullam sit amet tincidunt ipsum, sit amet elementum turpis.
|
||||
Etiam ipsum quam, mattis in purus vitae, lacinia fermentum enim.
|
||||
|
||||
TODO: NESTED...
|
||||
## Types
|
||||
|
||||
## Specimen
|
||||
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
|
||||
Material theme, whereas the default type, and thus fallback for unknown type
|
||||
qualifiers, is [hint](#hint).
|
||||
|
||||
!!! hint "hint, note <small>default</small>"
|
||||
### Hint
|
||||
|
||||
!!! summary "summary, tldr"
|
||||
This is a very long text, yes. I'm so sorry.
|
||||
Example:
|
||||
|
||||
!!! tip "tip, idea"
|
||||
``` markdown
|
||||
!!! hint
|
||||
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.
|
||||
```
|
||||
|
||||
!!! success "success, check, done"
|
||||
Result:
|
||||
|
||||
!!! warning "warning, warn"
|
||||
!!! hint
|
||||
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.
|
||||
|
||||
!!! failure "failure, fail, missing"
|
||||
Qualifiers:
|
||||
|
||||
!!! fatal "danger, fatal"
|
||||
* `hint`
|
||||
* `note`
|
||||
|
||||
!!! bug "error, bug"
|
||||
### Summary
|
||||
|
||||
Example:
|
||||
|
||||
``` markdown
|
||||
!!! summary
|
||||
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:
|
||||
|
||||
!!! summary
|
||||
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:
|
||||
|
||||
* `summary`
|
||||
* `tldr`
|
||||
|
||||
### Tip
|
||||
|
||||
Example:
|
||||
|
||||
``` markdown
|
||||
!!! tip
|
||||
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:
|
||||
|
||||
!!! tip
|
||||
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:
|
||||
|
||||
* `tip`
|
||||
* `idea`
|
||||
|
||||
### Success
|
||||
|
||||
Example:
|
||||
|
||||
``` markdown
|
||||
!!! success
|
||||
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:
|
||||
|
||||
!!! success
|
||||
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:
|
||||
|
||||
* `success`
|
||||
* `check`
|
||||
* `done`
|
||||
|
||||
### Warning
|
||||
|
||||
Example:
|
||||
|
||||
``` markdown
|
||||
!!! warning
|
||||
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:
|
||||
|
||||
!!! warning
|
||||
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:
|
||||
|
||||
* `warning`
|
||||
* `attention`
|
||||
* `important`
|
||||
|
||||
### Failure
|
||||
|
||||
Example:
|
||||
|
||||
``` markdown
|
||||
!!! failure
|
||||
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:
|
||||
|
||||
!!! failure
|
||||
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:
|
||||
|
||||
* `failure`
|
||||
* `fail`
|
||||
* `missing`
|
||||
|
||||
### Danger
|
||||
|
||||
Example:
|
||||
|
||||
``` markdown
|
||||
!!! danger
|
||||
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:
|
||||
|
||||
!!! danger
|
||||
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:
|
||||
|
||||
* `danger`
|
||||
* `caution`
|
||||
|
||||
### Error
|
||||
|
||||
Example:
|
||||
|
||||
``` markdown
|
||||
!!! error
|
||||
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:
|
||||
|
||||
!!! error
|
||||
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:
|
||||
|
||||
* `error`
|
||||
* `bug`
|
||||
|
||||
[Admonition]: https://pythonhosted.org/Markdown/extensions/admonition.html
|
||||
[PyMdown Extensions]: https://facelessuser.github.io/pymdown-extensions
|
||||
|
||||
Reference in New Issue
Block a user