Возможности страниц bugажа знаний #

Синтаксис Markdown Это облегченный язык разметки, который является инструментом преобразования кода в HTML. Синтаксис достаточно ограничен, и соответствует лишь небольшому подмножеству элементов HTML.

Форматирование текста #

*Курсивный текст* или _Курсивный текст_

Курсивный текст

**Жирный текст** или __Жирный текст__

Жирный текст

***Жирный курсивный текст*** или ___Жирный курсивный текст___

Жирный курсивный текст

~~Перечеркнутый текст~~

Перечеркнутый текст

Заголовки #

Заголовки от h1 до конца h6 построены с помощью # символа для каждого уровня:

Код:

# h1 Заголовок
## h2 Заголовок
### h3 Заголовок
#### h4 Заголовок
##### h5 Заголовок
###### h6 Заголовок

Пример:

h1 Заголовок #

h2 Заголовок #

h3 Заголовок #

h4 Заголовок #

h5 Заголовок #

h6 Заголовок #

Горизонтальные Правила #

Предназначен для создания «тематического разрыва» между элементами уровня абзаца:

Код:

<hr>Образец.<hr>

Пример:

Также возможно воспользоваться символами:

___: три последовательных символа подчеркивания
---: три тире подряд
***: три звездочки подряд

Списки #

Список элементов, в котором порядок элементов не имеет значения.

Можно использовать любой из следующих символов для обозначения маркеров для каждого элемента списка:

Код:

* Пример 1
- Пример 2
+ Пример 3

Пример:

• Пример 1

• Пример 2

• Пример 3

После установки двух пробелов можно сместить текст:

Код:

* Пример 1
  - Пример 2
  + Пример 3

Результат:

• Пример 1
  • Пример 2
  • Пример 3

Список элементов можно использовать для ссылок.

• Регламент по заполнению bugажа знаний
• Инструкция по развертыванию bugажа знаний
• Возможности страниц bugажа знаний

Списки с отметками #

Есть возможность создать список в виде чек-листа:

Код:

Есть возможность создать список в виде чек-листа:
- [x] Сходить за хлебушком;
- [x] Перейти на темную сторону;
- [ ] Найти ~~Дарт Вейдера~~ отца;

Пример:

• Сходить за хлебушком;
• Перейти на темную сторону;
• Найти Дарт Вейдера отца;

Элемент строки #

Hugo как отдельный синтаксис!

В данных разделах об элементах строк и их выделения может отсутствовать строка для копирования это связано с синтаксисом hugo, для этого были прикреплены примеры в картинках.

Для того чтобы выделить фрагмент кода в строке, достаточно заключить необходимый контент в реверсивные кавычки:

Код:

`code`

Результат:

code

Отдельный блок #

Для размещения кода в отдельном блоке можно использовать конструкцию, называемую “забор”, состоящую из трех открывающих и закрывающих реверсивных кавычек:

code is here...

Так же можно, после первых трех точек вписать для выделения tpl:

code is here...

Выделение текста #

Помимо “заборной” конструкции можно использовать hugo shortcode highlite, который, как и “забор” состоит из двух элементов - открывающего и закрывающего:

{{< highlight md >}} code is here... {{< /highlight >}}

Шорткод #

Но что делать если нам нужно показать пример шорткода (shortcode). В этом случае есть небольшая хитрость.

Такой синтаксис:

Даст следующий результат:

{{< shortcode >}}

Во всех остальных случаях hugo будет пытаться выполнить шорткод.

Ссылки #

Код:

[Регламент заполнения bugажа знаний](/docs/luggage-of-knowledge/regulations/)
[bugаж знаний в GitLab](https://git.crtweb.ru/creative.qa/luggage-of-knowledge/)

Результат:

Регламент заполнения bugажа знаний

bugаж знаний в GilLab

Сноски #

Сноски содержат пояснения к основному тексту, этот текст оставляет ссылку в нижнею части страницы под основным текстом:

Код:

часть текста для сноски [^1],…
[^1]: Текст сноски.

Результат:

Цифрой помечается часть текста для сноски ¹,еще текст для сноски ².

Изображения #

Добавляем изображение в папку /content/images/ - также можем создать подпапку под нашу статью.

Здесь возможные параметры.

Код:

{{< figure class="text-center" src="/images/_10.svg" width="50%" title="Пример изображения" >}}

Пример:

Кнопки #

Кнопки - это стилизованные ссылки, которые могут вести на локальную страницу или внешнюю ссылку.

Код:

{{< button relref="/" [class="..."] >}}Перейти домой{{< /button >}}
{{< button href="https://www.google.ru" >}}Перейти в Google{{< /button >}}

Результат:

Перейти домой Перейти в Google

Таблица #

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

Построение таблицы Обратите внимание, что черты не нужно выравнивать по вертикали.

Пример составления таблицы:

| Опция     | Описание    |
| --------- | ----------- |
| Пример 1  | Здесь можно оставить описание к примеру 1. |
| Пример 2  | Здесь можно оставить описание к примеру 2. |
| Пример 3  | Здесь можно оставить описание к примеру 3. |

Результат:

Столбцы #

Столбцы помогают организовать более короткие фрагменты содержимого по горизонтали для удобства чтения.

Код:

{{< columns >}} <!-- begin columns block -->
# Левый контент
Текст в левом контенте

<---> <!-- magic separator, between columns -->

# Средний контент
Текст в среднем контенте

<---> <!-- magic separator, between columns -->

# Правый контент
Текст в правом контенте
{{< /columns >}}

Результат:

Подробности #

Раскрывающиеся подробности. Такой блок позволяет скрыть более подробную информацию в лаконичный заголовок.

Код:

{{< details "Title" >}}
## Заголовок дополнительной информации
Текст дополнительной информации.
{{< /details >}}

{{< details title="Title" open >}}
## Заголовок дополнительной информации
Текст дополнительной информации.
{{< /details >}}

Результат:

Подсказки #

Подсказки можно использовать как: подсказки / предупреждения / уведомления. На выбор предлагается 3 цвета: «информация», «предупреждение» и «опасность».

Код:

{{< hint info >}}
**Заголовок информация**
Основной текст уведомления.
{{< /hint >}}

{{< hint warning >}}
**Заголовок предупреждения**
Основной текст предупреждения.
{{< /hint >}}

{{< hint danger >}}
**Заголовок опасности**
Основной текст опасности.
{{< /hint >}}

Результат:

Заголовок информация Основной текст информации.

Заголовок предупреждения Основной текст предупреждения.

Заголовок опасности Основной текст опасности.

Цитаты #

Оставить цитату возможно при помощи блока, что позволяет выделить текст:

Код:

<blockquote>
<p><strong>Заголовок уведомления</strong> 
Основной текст уведомления.</p>
</blockquote>

Пример:

Заголовок цитаты Основной текст цитат.

Цитирования блоков контента возможно при помощи Скобки для этого нужно добавить > перед любым текстом, который необходимо процитировать:

Код:

> Лучшие цитаты

Результат:

Лучшие цитаты

Цитаты также могут быть вложенными:

Люк: Ты убил его.

Дарт Вейдер: Нет, я твой отец.

Вкладки #

Вкладки позволяют организовать контент по контексту, например инструкции по установке для каждой поддерживаемой платформы.

Код:

{{< tabs "uniqueid" >}}
{{< tab "MacOS" >}} # MacOS Основной текст информации. {{< /tab >}}
{{< tab "Linux" >}} # Linux Основной текст информации. {{< /tab >}}
{{< tab "Windows" >}} # Windows Основной текст информации. {{< /tab >}}
{{< /tabs >}}

Результат:

Формулы KaTeX #

KaTeX используется для отрисовки формул. Все возможные варианты шорткодов можно посмотреть в официальной документации KaTeX’а. CSS классы пишутся без кавычек в строку. Код:

{{< katex display text-center >}}
f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
{{< /katex >}}

Результат: \[f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi\]

Также можно писать формулы в строчку с текстом если убрать display из шорткода.

Код:

Пишем формулу в строку {{< katex >}}\pi(x){{< /katex >}} и продолжение строки

Результат:

Пишем формулу в строку \(\pi(x)\) и продолжение строки

Mermaid #

Mermaid - библиотека для генерации svg графиков и диаграм из шорткодов.

По ссылке можно найти ещё больше примеров.

Пример последовательности, например, для процессов или алгоритма:

{{< mermaid text-center>}}
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
{{< /mermaid >}}

Пример диграммы взаимодействий с разными вариантами:

{{< mermaid text-center>}}
sequenceDiagram
    Катя->>Алексей: Привет, Алексей, как твои дела??
    alt 1-ый вариант
        Алексей->>Катя: Не очень хорошо
    else 2-ой вариант
        Алексей->>Катя: Отлично
    end
    opt дополнение
        Алексей->>Катя: Спасибо, что спросила
    end
{{< /mermaid >}}

Пример ветка git:

{{< mermaid text-center>}}
gitGraph:
    options
    {
        "nodeSpacing": 150,
        "nodeRadius": 10
    }
    end
    commit
    branch newbranch
    checkout newbranch
    commit
    commit
    checkout master
    commit
    commit
    merge newbranch
{{< /mermaid >}}

Результат:

gitGraph: options { "nodeSpacing": 150, "nodeRadius": 10 } end commit branch newbranch checkout newbranch commit commit checkout master commit commit merge newbranch

YouTube #

Копируем из поисковой строки параметр watch?v.

Например, из видео https://www.youtube.com/watch?v=48iCTcaN96E мы копируем 48iCTcaN96E и вставляем в шорткод.

Код:

{{< youtube 48iCTcaN96E >}}

Пример:

#

Увидел(а) ошибку в тексте? Нет нужной информации или она не полная?
Скорей же исправь данный недочет и облегчи жизнь себе и своей команде!
Обязательно ознакомься с тем как заполнить bugаж знаний и после создавай МР в проекте bugаж знаний на своего QA Team Lead.