diff --git a/docs/configuration_example.md b/docs/configuration_example.md index bd45d26..eea301d 100644 --- a/docs/configuration_example.md +++ b/docs/configuration_example.md @@ -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! +``` \ No newline at end of file diff --git a/docs/javascripts/tablesort.js b/docs/javascripts/tablesort.js new file mode 100644 index 0000000..c916015 --- /dev/null +++ b/docs/javascripts/tablesort.js @@ -0,0 +1,6 @@ +document$.subscribe(function() { + var tables = document.querySelectorAll("article table:not([class])") + tables.forEach(function(table) { + new Tablesort(table) + }) + }) \ No newline at end of file diff --git a/mkdocs.yml b/mkdocs.yml index 5bf0979..ba0ebb1 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -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