Markdown - это облегчённый язык разметки, который преобразует текст в структурированный HTML. Следующее руководство поможет вам разобраться, как использовать Markdown.
¶ Заголовки
# Заголовок первого уровня
## Заголовок второго уровня
### Заголовок третьего уровня
#### Заголовок четвёртого уровня
##### Заголовок пятого уровня
###### Заголовок шестого уровня
Пример:
¶ Заголовок первого уровня
¶ Заголовок второго уровня
¶ Заголовок третьего уровня
¶ Заголовок четвёртого уровня
¶ Заголовок пятого уровня
¶ Заголовок шестого уровня
¶ Параграфы и переносы строк
Это параграф. Чтобы создать новый параграф, оставьте пустую строку между двумя строками текста.
Это первая строка
И это вторая строка, но они находятся в одном параграфе. Для переноса строки используйте два пробела в конце предыдущей строки.
Пример:
Это параграф. Чтобы создать новый параграф, оставьте пустую строку между двумя строками текста.
Это первая строка
И это вторая строка, но они находятся в одном параграфе. Для переноса строки используйте два пробела в конце предыдущей строки.
¶ Выделение текста
*курсив*
_курсив_
**жирный**
__жирный__
***жирный курсив***
___жирный курсив___
~~зачеркнутый~~
Пример:
курсив
курсив
жирный
жирный
жирный курсив
жирный курсив
зачеркнутый
¶ Списки
¶ Нумерованный список
1. Пункт первый
2. Пункт второй
3. Пункт третий
Пример:
- Пункт первый
- Пункт второй
- Пункт третий
¶ Маркированный список
- Пункт первый
- Пункт второй
- Пункт третий
Пример:
- Пункт первый
- Пункт второй
- Пункт третий
¶ Вложенные списки
Также можно делать вложенные списки, добавляя 4 пробела перед пунктом:
1. Пункт первый
- Подпункт первый
- Подпункт второй
2. Пункт второй
Пример:
- Пункт первый
- Подпункт первый
- Подпункт второй
- Пункт второй
¶ Ссылки
[Текст ссылки](https://www.example.com)
Пример:
¶ Изображения
Пример:
¶ Блоки кода
¶ Строка кода
`строка кода`
Пример:
строка кода
¶ Блок кода
Удалите символы \
\```
Блок кода
\```
Пример:
Блок кода
¶ Подсветка кода
Для блоков кода можно указывать язык программирования.
Используется подсветка синтаксиса из библиотеки linguist, которая включает множество различных языков.
Удалите символы \
\```python
print("Привет, мир!")
\```
Пример:
print("Привет, мир!")
¶ Цитаты
> Первый уровень цитирования
>> Второй уровень цитирования
>>> Третий уровень цитирования
Пример:
Первый уровень цитирования
Второй уровень цитирования
Третий уровень цитирования
¶ Горизонтальная линия
---
Пример:
¶ Таблицы
| Заголовок 1 | Заголовок 2 |
| ----------- | ----------- |
| Ячейка 1 | Ячейка 2 |
| Ячейка 3 | Ячейка 4 |
Пример:
| Заголовок 1 | Заголовок 2 |
|---|---|
| Ячейка 1 | Ячейка 2 |
| Ячейка 3 | Ячейка 4 |
¶ Таблица как HTML
<table>
<tr>
<th>Заголовок 1</th>
<th>Заголовок 2</th>
</tr>
<tr>
<td>Ячейка 1.1</td>
<td>Ячейка 2.1</td>
</tr>
<tr>
<td>Ячейка 1.2</td>
<td>Ячейка 2.2</td>
</tr>
</table>
Пример:
| Заголовок 1 | Заголовок 2 |
|---|---|
| Ячейка 1.1 | Ячейка 2.1 |
| Ячейка 1.2 | Ячейка 2.2 |
¶ Чек-листы
- [x] Задача 1
- [ ] Задача 2
- [ ] Задача 3
Пример:
- Задача 1
- Задача 2
- Задача 3
¶ Внутренние ссылки
[Перейти к Заголовку 1](#title1)
## <a id="title1">Заголовок 1</a>
Какой-то контент
Пример:
¶ Заголовок 1
Какой-то контент
¶ Ссылка на заголовок на английском
[Some title 1](#some-title-1)
## Some Title 1
Some content
Пример:
¶ Some Title 1
Some content
¶ Автоматические ссылки
<http://example.com/>
<address@example.com>
Пример
¶ HTML
Markdown поддерживает использование прямого HTML внутри документа, так что вы можете использовать любые HTML-теги для более сложного оформления:
<kbd>CTRL</kbd> + <kbd>P</kbd>
Пример:
CTRL + P
¶ HTML-коды
Например, вы можете использовать HTML-код ¯ для добавления черты над буквой:
A¯
Пример:
A¯
¶ Комментарии
Вы можете вставить комментарии в свой markdown-файл, которые не будут отображаться в окончательном отформатированном виде:
[//]: # (Это комментарий, он не будет отображаться)
Пример:
¶ Эмодзи
Вы можете использовать эмодзи в своих Markdown-файлах. Существует множество эмодзи, которые вы можете использовать, вот некоторые из них:
:smile:
:laughing:
:blush:
Пример:
¶ Кнопка
<a href="https://wiki.bgpu.ru/lit/hight-level" style="display:flex;align-items:center;background:#fff;border-radius:20px;padding:20px;text-decoration:none;color:#333;box-shadow:0 4px 10px rgba(0,0,0,0.1);transition:all 0.2s;">
<img src="/uploads/эмблема-no-bg-preview_(carve.photos).png" alt="Moodle" style="width:60px;height:60px;object-fit:contain;margin-right:20px;">
<span style="font-size:20px;font-weight:600;">отдел Автоматизированных систем управления и информационной безопасности</span>
</a>
Пример:
.png)
отдел Автоматизированных систем управления и информационной безопасности
¶ Кнопка без изображения
<a href="ССЫЛКА" style="display:flex;align-items:center;background:#fff;border-radius:20px;padding:20px;text-decoration:none;color:#333;box-shadow:0 4px 10px rgba(0,0,0,0.1);transition:all 0.2s;">
<span style="font-size:20px;font-weight:600;">ТЕКСТ</span>
</a>
Пример:
Кнопка без изображения¶ 💅 Дополнение
Wiki.js поддерживает HTML прямо в редакторе, поэтому можно использовать стили для создания красивых элементов интерфейса — кнопок, карточек, баннеров и других визуальных блоков.
¶ 🎨 1. Кнопки и ссылки
Минималистичная кнопка:
<a href="ССЫЛКА" style="display:inline-block;padding:12px 24px;background:#007bff;color:#fff;border-radius:8px;text-decoration:none;font-weight:600;transition:0.3s;">
Перейти
</a>
Пример:
ПерейтиС эффектом наведения:
<a href="ССЫЛКА" style="display:inline-block;padding:12px 24px;background:#28a745;color:#fff;border-radius:10px;text-decoration:none;font-weight:600;box-shadow:0 4px 8px rgba(0,0,0,0.1);transition:all 0.2s;">
Документы
</a>
Пример:
Документы¶ 🧱 2. Карточки разделов
<div style="display:flex;align-items:center;gap:20px;background:#fff;border-radius:20px;padding:20px;box-shadow:0 4px 10px rgba(0,0,0,0.05);">
<img src="/uploads/icons/security.png" width="60" height="60" alt="icon" />
<div>
<h3 style="margin:0;color:#333;font-size:20px;">Отдел информационной безопасности</h3>
<p style="margin:5px 0 0;color:#666;">Документы, инструкции, нормативы</p>
</div>
</div>
Пример:
¶ Отдел информационной безопасности
Документы, инструкции, нормативы
🟢 Можно сделать целую сетку карточек, чтобы визуально разделять разделы.
¶ 📦 3. Информационные блоки
<div style="background:#e8f4fd;border-left:6px solid #2196f3;padding:15px 20px;border-radius:6px;color:#333;">
<strong>Информация:</strong> Перед сохранением убедитесь, что документ прошёл проверку безопасности.
</div>
Пример:
Варианты:
- 🔵 Информационный (
#e8f4fd) - 🟢 Успех (
#e9fce8) - 🟠 Предупреждение (
#fff4e5) - 🔴 Ошибка (
#fdecea)
¶ 📊 4. Блок с иконками и действиями
<div style="display:flex;gap:15px;flex-wrap:wrap;">
<a href="/security" style="display:flex;align-items:center;gap:10px;background:#fff;padding:15px 25px;border-radius:15px;box-shadow:0 4px 8px rgba(0,0,0,0.05);text-decoration:none;color:#333;font-weight:500;">
<img src="/uploads/1c_logo.png" width="32" height="32" alt="icon" />
Безопасность
</a>
<a href="/docs" style="display:flex;align-items:center;gap:10px;background:#fff;padding:15px 25px;border-radius:15px;box-shadow:0 4px 8px rgba(0,0,0,0.05);text-decoration:none;color:#333;font-weight:500;">
<img src="/uploads/1c_logo.png" width="32" height="32" alt="icon" />
Документы
</a>
</div>
Пример:
¶ 🕹 5. Аккордеон (сворачивающийся блок)
<details style="background:#fff;border-radius:12px;padding:15px;box-shadow:0 4px 10px rgba(0,0,0,0.05);">
<summary style="cursor:pointer;font-weight:600;color:#333;">Как добавить новую страницу?</summary>
<p style="margin-top:10px;color:#555;">Выберите раздел → Нажмите “Создать страницу” → Укажите заголовок и сохраните.</p>
</details>
Как добавить новую страницу?
Выберите раздел → Нажмите “Создать страницу” → Укажите заголовок и сохраните.
¶ 🧭 6. Панель навигации или баннер
<div style="background:linear-gradient(135deg,#007bff,#6610f2);color:#fff;padding:25px;border-radius:15px;text-align:center;">
<h2 style="margin:0;font-size:24px;">Wiki по информационной безопасности</h2>
<p>Документация, инструкции и полезные материалы</p>
</div>
Пример:
¶ Wiki по информационной безопасности
Документация, инструкции и полезные материалы
¶ ✨ 7. Сетка с карточками
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;">
<div style="background:#fff;border-radius:15px;box-shadow:0 4px 8px rgba(0,0,0,0.05);padding:20px;">
<h3 style="margin-top:0;">Регламенты</h3>
<p>Описание внутренних политик и инструкций.</p>
</div>
<div style="background:#fff;border-radius:15px;box-shadow:0 4px 8px rgba(0,0,0,0.05);padding:20px;">
<h3 style="margin-top:0;">Проекты</h3>
<p>Текущие и завершённые инициативы.</p>
</div>
</div>
Пример:
¶ ✨ 8. Обьявления
<div style="margin-top:40px;background:#f8f9fa;border-left:6px solid #007bff;padding:20px;border-radius:10px;">
<h3 style="margin:0 0 10px 0;">📢 Актуальные обновления</h3>
<ul style="margin:0;padding-left:20px;color:#555;">
<li>Добавлены новые шаблоны актов и инструкций</li>
<li>Обновлён регламент по обработке персональных данных (версия 2.3)</li>
<li>Плановое обновление серверов 10 октября с 21:00 до 23:00</li>
</ul>
</div>
Пример:
¶ 📢 Актуальные обновления
- Добавлены новые шаблоны актов и инструкций
- Обновлён регламент по обработке персональных данных (версия 2.3)
- Плановое обновление серверов 10 октября с 21:00 до 23:00
¶ ✨ 9. Еще кнопочки
<div style="display:flex;gap:15px;flex-wrap:wrap;margin-top:30px;">
<a href="/faq" style="flex:1;min-width:200px;text-align:center;background:#fff;border-radius:12px;padding:15px 20px;text-decoration:none;color:#007bff;font-weight:600;box-shadow:0 3px 6px rgba(0,0,0,0.05);transition:0.2s;">
❓ Частые вопросы
</a>
<a href="/manuals" style="flex:1;min-width:200px;text-align:center;background:#fff;border-radius:12px;padding:15px 20px;text-decoration:none;color:#28a745;font-weight:600;box-shadow:0 3px 6px rgba(0,0,0,0.05);transition:0.2s;">
📘 Инструкции
</a>
<a href="/forms" style="flex:1;min-width:200px;text-align:center;background:#fff;border-radius:12px;padding:15px 20px;text-decoration:none;color:#6f42c1;font-weight:600;box-shadow:0 3px 6px rgba(0,0,0,0.05);transition:0.2s;">
🧾 Формы и шаблоны
</a>
</div>
Пример:
Пример:
¶ 🛡 Стандарты ИБ
ISO/IEC 27001, ГОСТ 57580, внутренние регламенты.
¶ 📈 Метрики и отчёты
Показатели SLA, uptime, инциденты и аудиты.
¶ ⚙️ Сервисы и доступы
Заявки на доступ, список сервисов и статусы систем.
Пример:
Primary
Indigo
Success
Warning
Danger
Info
¶ 10. Всплывающие подсказки (Tooltips) — разные варианты
<span class="tooltip">Наведи сюда
<span class="tooltiptext">Это стандартная подсказка.</span>
</span>
Обычный:
Пример:
Наведи сюда
Это стандартная подсказка.
<span class="tooltip tooltip-light">🌞 Подсказка
<span class="tooltiptext">Это вариант для светлой темы.</span>
</span>
Светлая тема:
Пример:
🌞 Подсказка
Это вариант для светлой темы.
<span class="tooltip tooltip-neon">💡 Неоновая подсказка
<span class="tooltiptext">Свечение в стиле Cyberpunk!</span>
</span>
Неоновая тема:
Пример:
💡 Неоновая подсказка
Свечение в стиле Cyberpunk!