Blog Logo
· 5 мин чтения

📝 Полное руководство по Markdown 📚

Шпаргалка по Markdown для всех ваших нужд в ведении блога - заголовки, списки, изображения, таблицы и многое другое! Иллюстрированное руководство на основе GitHub Flavored Markdown.

Illustration

🔍 Введение

🧠 Мудрость ИИ: Markdown - это как эсперанто для программистов. Просто, логично, и понимают все.

Парсинг Markdown и MDX поддерживается через unified, а также другие пакеты remark и rehype. next-mdx-remote позволяет нам парсить файлы .mdx и .md более гибко без необходимости изменять webpack.

Используется GitHub flavored markdown. mdx-prism предоставляет возможности подсветки синтаксиса для блоков кода. Вот демонстрация того, как всё это выглядит.

Следующая шпаргалка по Markdown адаптирована из: Mastering Markdown

❓ Что такое Markdown?

🧠 Мудрость ИИ: Markdown доказывает, что для создания великих вещей не нужны сложные инструменты. Иногда пара символов * и # могут сделать больше чем тысячи строк CSS.

Markdown — это способ стилизации текста в интернете. Вы управляете отображением документа: форматирование текста как жирного или курсива, добавление изображений и создание списков — это лишь несколько вещей, которые можно делать с помощью Markdown. В основном, Markdown — это обычный текст с несколькими неалфавитными символами, такими как # или *.

📚 Справочник по синтаксису

🧠 Мудрость ИИ: Изучение Markdown - это как изучение базовых команд Git. Сначала кажется простым, но потом понимаешь, что это 80% того что нужно для ежедневной работы.

Вот обзор синтаксиса Markdown, который вы можете использовать где угодно на GitHub.com или в своих текстовых файлах.

📌 Заголовки

🧠 Мудрость ИИ: Заголовки в Markdown - это как оглавление в книге. Правильная структура помогает не только читателям, но и поисковым системам понять о чём ты пишешь.

## Это тег h2

#### Это тег h4

Это тег h1

Это тег h2

Это тег h4

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

🧠 Мудрость ИИ: Выделение текста в Markdown - это как интонация в речи. Правильное акцентирование внимания помогает читателю быстро уловить главные мысли.

_Этот текст будет курсивом_

**Этот текст будет жирным**

_Вы **можете** комбинировать их_

Этот текст будет курсивом

Этот текст будет жирным

Вы можете комбинировать их

📋 Списки

🧠 Мудрость ИИ: Списки в Markdown - это как todo лист для мозга. Структурированная информация усваивается на 70% лучше чем хаотичный поток мыслей.

Неупорядоченный список

🧠 Мудрость ИИ: Неупорядоченные списки - это как brainstorming. Порядок не важен, главное - зафиксировать все идеи.

- Элемент 1
- Элемент 2
- Элемент 2a
- Элемент 2b
  • Элемент 1
  • Элемент 2
  • Элемент 2a
  • Элемент 2b

Упорядоченный список

🧠 Мудрость ИИ: Упорядоченные списки - это как пошаговая инструкция. Когда важна последовательность, цифры твои лучшие друзья.

1. Элемент 1
1. Элемент 2
1. Элемент 3
1. Элемент 3a
1. Элемент 3b
  1. Элемент 1
  2. Элемент 2
  3. Элемент 3
  4. Элемент 3a
  5. Элемент 3b

🖼️ Изображения

🧠 Мудрость ИИ: Изображение стоит тысячи слов, но alt-текст стоит тысячи изображений для SEO и доступности. Не забывай про описания!

![Логотип GitHub](https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png)
Формат: ![Альтернативный текст](URL)

Логотип GitHub

🔗 Ссылки

🧠 Мудрость ИИ: Ссылки - это нервная система интернета. Правильные якоря ведут читателя по нужному пути, как нейроны передают сигналы в мозге.

http://github.com - автоматически!
[GitHub](http://github.com)

http://github.com - автоматически! GitHub

💬 Цитаты

🧠 Мудрость ИИ: Цитаты - это как мемы в мире идей. Хорошие цитаты живут дольше чем их авторы, передавая мудрость через поколения.

Как сказал Канье Уэст:

> Мы живём в будущем, поэтому
> настоящее — это наше прошлое.

Как сказал Канье Уэст:

Мы живём в будущем, поэтому настоящее — это наше прошлое.

</> Встроенный код

🧠 Мудрость ИИ: Встроенный код - это как технические термины в разговоре. Помогает быть точным и показывает что ты знаешь о чём говоришь.

Я думаю, вам следует использовать
здесь элемент `<addr>`.

Я думаю, вам следует использовать здесь элемент <addr>.

🌈 Подсветка синтаксиса

🧠 Мудрость ИИ: Подсветка синтаксиса - это как цветовая дифференциация в химии. Помогает мгновенно распознавать типы данных и структуру кода.

Вот пример того, как можно использовать подсветку синтаксиса с GitHub Flavored Markdown:

```js:fancyAlert.js
function fancyAlert(arg) {
  if (arg) {
    $.facebox({ div: '#foo' })
  }
}
```

И вот как это выглядит — с красивой подсветкой и стилизованными заголовками кода!

function fancyAlert(arg) {
  if (arg) {
    $.facebox({ div: '#foo' })
  }
}

📝 Сноски

🧠 Мудрость ИИ: Сноски - это как комментарии в коде. Дополнительная информация которая не мешает основному повествованию, но делает его полнее.

Вот простая сноска[^1]. И немного текста после неё.

[^1]: Моя сноска.

Вот простая сноска1. И немного текста после неё.

✅ Списки дел

🧠 Мудрость ИИ: Списки дел - это как agile для жизни. Визуализация прогресса мотивирует лучше любого кофе по утрам. Галочка - это маленький дзен.

- [x] Требуется синтаксис списка (поддерживается любой маркированный или нумерованный список)
- [x] это выполненный пункт
- [ ] это невыполненный пункт
  • Требуется синтаксис списка (поддерживается любой маркированный или нумерованный список)
  • это выполненный пункт
  • это невыполненный пункт

📊 Таблицы

🧠 Мудрость ИИ: Таблицы - это как Excel для текста. Структурированные данные в читаемом формате. Иногда простая таблица заменяет тысячи слов объяснений.

Вы можете создавать таблицы, собирая список слов и разделяя их дефисами - (для первой строки), а затем разделяя каждый столбец вертикальной чертой |:

| Первый заголовок | Второй заголовок |
| ---------------- | ---------------- |
| Содержимое ячейки 1 | Содержимое ячейки 2 |
| Содержимое в первом столбце | Содержимое во втором столбце |
Первый заголовокВторой заголовок
Содержимое ячейки 1Содержимое ячейки 2
Содержимое в первом столбцеСодержимое во втором столбце

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

🧠 Мудрость ИИ: Зачёркнутый текст - это как рефакторинг в документации. Показывает что было раньше и почему это изменилось. Прозрачность создаёт доверие.

Любое слово, обёрнутое в две тильды (например, ~~это~~), будет отображаться зачёркнутым.


🎯 Заключение

🧠 Финальная мудрость ИИ: Markdown - это философия простоты. В мире сложных технологий, лучшие решения часто самые простые.

Footnotes

  1. Моя сноска.

#github #guide #markdown
Лев Дессатых

Привет, меня зовут Лев Дессатых. Я миссионер, евангелист и основатель Миссии «Шехина» в Казахстане. Параллельно занимаюсь веб-разработкой, используя технологии для распространения Евангелия.