Skip to content

Markdown и расширения, используемые при оформлении документации данной KB

Метаданные

---
title: 'Наш заголовок'
authors: 
 - some_author
tags:
 - Tag1
 - Tag2
todo: 'Optimize this page in the next days'
date: 2020-04-18
---

Ввод специальных символов с клавиатуры в Linux

  1. Вводим символ с помощью Compose Key. Настраиваем Compose в Gnome Tweaks. И пользуемся. Для получения длинного тире вида — зажимаем Compose, затем дваждны вводим минус, получаем —. Compose + oc даст ©, Compose + or — ®.
  2. Вводим нужный символ через Ctrl + Shift + U, 4-х символьный код символа Unicode, затем Enter или пробел.

Ctrl + Shift + U → 2014 → Space — даст нам символ —.

Ctrl + Shift + U → 221E → Space — даст нам символ ∞.

Ctrl + Shift + U → 2603 → Space — даст нам символ ☃.

Ctrl + Shift + U → 1f4b0 → Space — даст нам символ 💰.

Чем хорош вариант №2? Тем, что он позволяет вставлять Emoji, и расширенные символы Unicode, которые не релаьно ввести с помощью Compose.

  1. Вариант #3 - часть смециальных символов можно отображать, используя Python Markdown SmartyPants и PyMdown Extensions SmartSymbols и Emoji. Последний вариант хорош для отображения emoji.

Markdown

Заголовки

H1

H2

H3

H4

H5
H6

Alt-H1

Alt-H2

# H1
## H2
### H3
#### H4
##### H5
###### H6

Alt-H1
======

Alt-H2
------

Акцентирование

Выделение(italic) с помощью звёздочки и подчёркивания

Строгое выделение(bold) с помощью двух звёздочек или символов подчёркивания

Комбинирование выделение с помощью звёздочек и символов подчёркивания

Зачёркнутый текст

Выделение(italic) с помощью *звёздочки* и _подчёркивания_
Строгое выделение(bold) с помощью **двух звёздочек** или __символов подчёркивания__
Комбинирование выделение с помощью **звёздочек и _символов подчёркивания_**
~~Зачёркнутый текст~~

Подсветка кода

#!/bin/bash

echo "Hello world!"

``` bash
#!/bin/bash

echo "Hello world!"
```

Расширения Markdown

Admonition

Admonition предоставляет возвожность добавить блок с примечанием или предупреждением. Синтаксис 

!!! note "Заголовок"

Где 1. Заголовок - наш заголовок, если указать "" - будет блок без заголовка. 2. note - класс из списка note seealso abstract summary tldr info todo tip hint important success check done question help faq warning caution attention failure fail missing danger error bug example quote cite

Эти же классы можно использовать для коллапсирующих блоков Details.

Phasellus posuere in sem ut cursus

Lorem 

!!! note "Заметка №1"
Текст заметки...

Расшиерения из pymdown-extensions

Mark

Mark - способ пометить часть строки в тексте с помощью выделения цветом(так в бумажной газете отмечали ключевые фразы маркером). Отмечаем нужный фрагмент с помощью двух символов = до и после нужной фразы.

Пример

заметь меня

умная==заметка

==заметь меня==
==умная==заметка==

Keys

Пример использования Keys

Ctrl+Alt+Del

++ctrl+alt+delete++

Delete

Пример использования Delete

Delete me

~~Delete me~~

Tabs

Tabs - это расширение, позволяющее создавать групы вкладок с неким содержимым. Пример использования данного расширения

Markdown content.

Multiple paragraphs.

More Markdown content.

  • list item a
  • list item b
=== "Tab 1"
    Markdown **content**.

    Multiple paragraphs.

=== "Tab 2"
    More Markdown **content**.

    - list item a
    - list item b

Details

Details создаёт коллапсирующие блоки скрывающие дополнительную информацию под кат.

Перед Details необходимо добавить хотябы одну пустую строку. Обявляется Details с помощью ??? для начала объявления блока Details, или с ???+ если нам нужен изначально раскрытый блок. Синтаксис элемента Details 

??? multiple optional-class 'Заголовок'
Возвожные варианты классов:

settings

settings - желтый цвет и символ карандаша

danger

danger - красный и символ молнии в круге

success

success зелёный и галочка звершения задачи в круге

note

note - символ карандаша

warning

warning - оранжевый и треугольник с восклицательным знаком

cite

warning - оранжевый и треугольник с восклицательным знаком

Подробный пример с содержимым, включающим блок с кодом с подсветкой

Basic Polyfill Setup

Часть css полифила для details 

details {
display: block;
}


??? settings "Basic Polyfill Setup"
Часть css полифила для details
```css
details {
display: block;
}
```

Icons

  • – we can use Material Design icons
  • :fontawesome-regular-laugh-wink: – we can also use FontAwesome icons
  • :octicons-octoface: – that's not all, we can also use GitHub's Octicons
* :material-account-circle: – we can use Material Design icons
* :fontawesome-regular-laugh-wink: – we can also use FontAwesome icons
* :octicons-octoface: – that's not all, we can also use GitHub's Octicons

Mermaid

graph TD; A-->B; A-->C; B-->D; C-->D; 

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

Изображения отображаемые плагином lightgallery

Одиночное изображение

![!Description](/assets/img/Test.png)

Description

Галерея

<div class="lightgallery">
    <a href="/assets/img/Test.png">
        <img src="/assets/img/Test.png">
    </a>
    <a href="/assets/img/Test.png">
        <img src="/assets/img/Test.png">
    </a>
</div>

Вставка содержимого файла с исходником

browserslistrc.py
print('TEst') 

```python title="browserslistrc.py"
--8<-- "browserslistrc.py" 
```

Внимание!

Если после имени файла, указанного в кавычках, добавляем пробел — вставка сниппета из файла производиться не будет.

Подробности

embedding-external-files pymdown-extensions/extensions/snippets