1
0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2024-11-12 01:50:52 +01:00

Added code block annotations and diagrams to docs

This commit is contained in:
squidfunk 2021-06-15 11:03:15 +02:00
parent 0ea07be14f
commit 1a554c8bb0
3 changed files with 53 additions and 10 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 34 KiB

View File

@ -247,19 +247,56 @@ document$.subscribe(function() { // (1)
_Result_:
<figure markdown="1">
``` {: .js .annotate }
document$.subscribe(function() { // (1)
var tables = document.querySelectorAll(/* (2) */ "article table")
tables.forEach(function(table) {
new Tablesort(table) // (3)
})
})
```
[![Annotations][19]][19]
1. Annotations can contain __arbitrary content__ which is shown when the marker
is focussed, including any kind of formatting, links, admonitions, details,
and even diagrams:
<figcaption markdown="1">
``` mermaid
graph LR
A[I'm] --> B{a} --> C[diagram];
```
A demo is worth a thousand words — check it out at
[squidfunk.github.io/mkdocs-material-insiders][20]
:octicons-light-bulb-16:
**Tip:** You can use ++tab++ to navigate annotations.
</figcaption>
</figure>
2. Annotations can be __placed anywhere__ in a code block were a comment for the
underlying language can be placed.
_Annotations require syntax highlighting with [Pygments][24] they're currently
=== "Python"
``` python
# (1)
```
=== "JavaScript"
``` js
// (2)
/* (2) */
```
=== "Lua"
``` lua
-- (3)
```
_We're working on a solution for languages without comments, which will be
available shortly._
1. Of course, this can be combined with [line numbers][10], highlighting and
all other code block related features.
_Annotations require syntax highlighting with [Pygments][26] they're currently
not compatible with other JavaScript-based syntax highlighters. Support may be
added later on._

View File

@ -89,11 +89,17 @@ graph LR
_Result_:
[![Diagram][12]{ style="width: 100%; max-width: 594px" }][12]
``` mermaid
graph LR
A[Start] --> B{Error?};
B -->|Yes| C[Hmm...];
C --> D[Debug];
D --> B;
B ---->|No| E[Yay!];
```
_See the [official documentation][1] to learn about all available diagram
types._
[10]: code-blocks.md
[11]: #superfences
[12]: ../assets/screenshots/diagram.png