Demonstration page↵

mm-docs demonstration page.

For more details about included tools see:

Customization↵

Text↵

Unicode: Мислим дакле постојим

Basic effects↵

Output	Code
Bold text	`Bold text` or `__Bold text__`
Italic text	`Italic text` or `_Italic text_`
~~Strike Through~~	`~~Strike Through~~`
Colored text	`==Colored text==`
`Inline code`	`Inline code`

Subscript and supscript:

- H~2~0
- A^T^A

H₂0
A^TA

Buttons↵

Adding button

[Subscribe to our newsletter](#){ .md-button }

Subscribe to our newsletter

Local files and images↵

![omg-lolcat](files/omg-lolcat.jpg)

omg-lolcat

To align image and add some text next to it you must put in div with class result:

Aligned image

<div class="result" markdown>
![omg-lolcat](files/omg-lolcat.jpg){ align=left }
</div>

omg-lolcat

Some OMG cat is displayed here.

Some more text here...

Hotkeys↵

Output	Code
`Enter`	`++enter++`
`PgDown`	`++"PgDown"++`
`Non Existent Key`	`++"Non Existent Key"++`

Links, footnotes and comments↵

Links↵

Output	Code
An inline-style link	`[An inline-style link](https://www.google.com)`
An inline-style link with title	`[An inline-style link with title](https://www.google.com "Google's Homepage")`
Reference-style link	`[Reference-style link][arbitrary reference text]` `[arbitrary reference text]: https://www.mozilla.org`
Relative reference to a repository file	`[Relative reference to a repository file](../about/overview)`
Numbers for reference-style link definitions	`[Numbers for reference-style link definitions][1]` `[1]: http://slashdot.org`
Use the link text itself	`Use the [link text itself]` `[link text itself]: http://www.reddit.com`

Magic links and emails: turned to links as recognized

Output	Code
http://www.google.com	`http://www.google.com`
majkinetor@gmail.com	`majkinetor@gmail.com`
www.google.com	`www.google.com`

Footnotes↵

A text with a short footnote[^short]
[^short]: https://en.wikipedia.org/wiki/Note_(typography)

A text with a short footnote¹

A text with a long footnote[^long]
[^long]:
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
    massa, nec semper lorem quam in massa.

    ```
    code

A text with a long footnote²

Comments↵

The text contains 2 comments bellow this line which should not be visible.
[comment]: # (Developed using Visual Studio Code with plantuml extension: cinst visualstudiocode; code --install-extension jebbs.plantuml)
[comment]: # (PlantUML version may influence diagrams. This document is developped with 1.2017.15: cinst plantuml --version 1.2017.15)

The text contains 2 comments bellow this line which should not be visible.

Citations↵

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. Inline:
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.
code in citations
Another citation line

HTML↵

HTML is allowed without restrictions. Custom styles are added in docs\_css\extra.css file.

<div style='background-color: #fdd; padding:1em; text-align: center '>
    <font size="20">
        <span class="yellow bred pl1 pr1">cookies</span>
    </font>
</div>

cookies

Critic and comments↵

Here is some ~~incorrect~~ Markdown. I am adding this here. Here is some more ~~text that I am removing~~text. And here is even more text that I am adding. Paragraph was deleted and replaced with some spaces.

Spaces were removed and a paragraph was added.

And here is a comment on some textThis works quite well. I just wanted to comment on it.. Substitutions isare great!

General block handling:

test remove

test remove

test add
test add

Emoji and icons↵

Use more than 7.000 icons and thousands of emojis in your project documentation with zero effort. Custom icons can be added and used in mkdocs.yml, documents and templates.

Examples:

:tada:
:jack_o_lantern:
:alien:
:robot_face:
:smile:
:heart:
:thumbsup:

– :material-account-circle: (icon in .icons/material/account-circle.svg)
– :fontawesome-regular-face-laugh: (icon in .icons/fontawesome/regular/face-laugh.svg)
In a link

Lists↵

Ordered list↵

List item 1
List item 2
1. List item 2.1
2. List item 2.2
  1. List item 2.2.1
  2. List item 2.2.2
3. List item 2.3
List item 4

Unordered, mixed↵

List item 1
List item 2
- List item 2.1
- List item 2.2
  1. List item 2.2.1
  2. List item 2.2.2
- List item 2.3
List item 4

Tables↵

Col1	Col2
row1.1	row1.2
row2.1	row2.2-1 row2.2-2

Plantuml↵

Add plantuml in a block code header to set code section as PlantUml source. Use format to specify output type:

```plantuml format="svg"
title PlantUml Demo
left to right direction
skinparam packageStyle rectangle
actor customer
actor clerk
rectangle checkout {
  customer -- (checkout)
  (checkout) .> (payment) : include
  (help) .> (checkout) : extends
  (checkout) -- clerk
}
```

uml diagram

Mermaid↵

```mermaid
sequenceDiagram
  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!
```

sequenceDiagram
  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!

MathJax↵

The block code:

```
$$
\frac{n!}{k!(n-k)!} = \binom{n}{k}
$$
```

\[ \frac{n!}{k!(n-k)!} = \binom{n}{k} \]

Inline math expressions: $p(x|y) = \frac{p(y|x)p(x)}{p(y)}$

Inline math expressions: $p(x|y) = \frac{p(y|x)p(x)}{p(y)}$

NOTE:

This doesn't render corretly in PDF output, see this issue for explanation.

Admonition↵

More info

Note

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.

Collapsed closed

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.

Collapsed open

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.

Extreme 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.

some code

Some citation

Code Highlight↵

More info

import tensorflow as tf

With tabs:

BashPowerShellPlantUMLCC++C#

#!/bin/bash

echo "Hello world!"

Write-Host "Hello world!"

uml diagram

#include <stdio.h>

int main(void) {
  printf("Hello world!\n");
}

#include <iostream>

int main() {
  std::cout << "Hello world!" << std::endl;
  return 0;
}

using System;

class Program {
  static void Main(string[] args) {
    Console.WriteLine("Hello world!");
  }
}

Abbreviations↵

The following are defined in single file, _inc\abbr.md and included on each page.

IT, XML, JSON

Smart symbols↵

(tm) ™
(c) ©
c/o ℅
+/- ±
--> →
<-- ←
<--> ↔
=/= ≠
1/4 ¼
1st 1^st

Task list↵

Lorem ipsum dolor sit amet, consectetur adipiscing elit
Curabitur elit nibh, euismod et ullamcorper at, iaculis feugiat est
Vestibulum convallis sit amet nisi a tincidunt
- In hac habitasse platea dictumst
- Praesent sed risus massa
Nulla vel eros venenatis, imperdiet enim id, faucibus nisi

Macros↵

More details.


Variable from config	`extra.version = 0.1`
Variable from this page	`acme = Acme Company Ltd`
Macro (defined in `main.py`)	`bar(1) = 9.3` - `barbaz(3) = 9`
Python variable (defined in `main.py`)	`baz = John Doe`
Dictionary variable from config	`company.name = Acme`

Jinja templates↵

You can do all the work you want with Jinja2, including defining pure macros, conditionals and for loops:

{% macro input(name, value='', type='text', size=20) -%}
  <input type="{{ type }}" name="{{ name }}" value="{{ value}}" size="{{ size }}">
{%- endmacro %}

{% input('username') }}
{% input('password', type='password') }}

Includes↵

You may use the include directive from jinja2, directly in your markdown code e.g.:

## Paragraph
{%include 'snippet.md' %}
{%include 'html/content1.html' %}

The root directory for your included files is in docs_dir.

You can also include parts of the file.

Environment variables↵

Environment variables can be used inside of configuration file mkdocs.yaml. More...

site_name: !ENV CI_PROJECT_PATH

✏️ Last Change: 2024-06-25 11:37

📖 Publication Date: 2024-06-25 11:38

https://en.wikipedia.org/wiki/Note_(typography) ↩
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod massa, nec semper lorem quam in massa.
```
code
```
↩