feat(wip_for_article)

Work on the examples of plugins and extensions
This commit is contained in:
TGITS
2024-02-13 19:34:12 +01:00
parent a2df76edcc
commit c633d97352
3 changed files with 86 additions and 4 deletions

View File

@@ -1,5 +1,5 @@
---
title: Configuration example
title: Page configuration and extensions example usage
description: Some page configuration and extensions usage examples
status: new
---
@@ -8,6 +8,17 @@ status: new
This page aims to demonstrate some examples of a page configuration and examples usage of some extensions.
## Emoji :smile:
* :grinning_face:
* :cold_face:
* :nerd_face:
* :rolling_on_the_floor_laughing:
* :broken_heart:
* :alien:
Some of the codes from this [Emoji Cheat Sheet](https://www.webfx.com/tools/emoji-cheat-sheet/) works.
## Admonition examples
!!! note
@@ -54,3 +65,58 @@ frequencies.entrySet().iterator().forEachRemaining(System.out::println);
```
1. :man_raising_hand: Code annotation example
## Tables examples
### Sortable table with no alignement specified for columns
| AtomicNumber | Symbol | Name | AtomicMass |
| ------------ | ------ | --------- | ----------- |
| 1 | H | Hydrogen | 1.0080 |
| 2 | He | Helium | 4.00260 |
| 3 | Li | Lithium | 7.0 |
| 4 | Be | Beryllium | 9.012183 |
### Sortable table with columns aligned to left
| AtomicNumber | Symbol | Name | AtomicMass |
| :----------- | :----- | :-------- | :---------- |
| 1 | H | Hydrogen | 1.0080 |
| 2 | He | Helium | 4.00260 |
| 3 | Li | Lithium | 7.0 |
| 4 | Be | Beryllium | 9.012183 |
### Sortable table with columns centered
| AtomicNumber | Symbol | Name | AtomicMass |
| :----------: | :----: | :-------: | :---------: |
| 1 | H | Hydrogen | 1.0080 |
| 2 | He | Helium | 4.00260 |
| 3 | Li | Lithium | 7.0 |
| 4 | Be | Beryllium | 9.012183 |
### Sortable table with columns aligned to right
| AtomicNumber | Symbol | Name | AtomicMass |
| -----------: | -----: | --------: | ----------: |
| 1 | H | Hydrogen | 1.0080 |
| 2 | He | Helium | 4.00260 |
| 3 | Li | Lithium | 7.0 |
| 4 | Be | Beryllium | 9.012183 |
## Diagrams with Mermaid examples
Hereafter an example with a sequence diagram but any diagram supporrted by [mermaid](https://mermaid.js.org/) is possible.
``` mermaid
sequenceDiagram
autonumber
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
```

View File

@@ -0,0 +1,6 @@
document$.subscribe(function() {
var tables = document.querySelectorAll("article table:not([class])")
tables.forEach(function(table) {
new Tablesort(table)
})
})

View File

@@ -18,7 +18,6 @@ nav:
- 'Installation': 'installing-and-running-mkdocs.md'
- 'Configuration example': 'configuration_example.md'
plugins:
- search
- offline
@@ -31,7 +30,12 @@ markdown_extensions:
# For admonitions
- admonition
- pymdownx.details
- pymdownx.superfences
- pymdownx.superfences: # Required for admonitions, diagrams and code blocks
# For using mermaid for inline diagrams
custom_fences:
- name: mermaid
class: mermaid
format: !!python/name:pymdownx.superfences.fence_code_format
# For using a large database of icons and emojis
- pymdownx.emoji:
emoji_index: !!python/name:material.extensions.emoji.twemoji
@@ -43,5 +47,11 @@ markdown_extensions:
pygments_lang_class: true
- pymdownx.inlinehilite
- pymdownx.snippets
# For tables
- tables
extra_javascript:
# For sortable tables
# You need to have some javascript code in docs/javascripts/tablesort.js
- https://unpkg.com/tablesort@5.3.0/dist/tablesort.min.js
- javascripts/tablesort.js