Skip to content

Instantly share code, notes, and snippets.

@fomvasss
Created October 26, 2018 22:39
Show Gist options
  • Save fomvasss/8dd8cd7f88c67a4e3727f9d39224a84c to your computer and use it in GitHub Desktop.
Save fomvasss/8dd8cd7f88c67a4e3727f9d39224a84c to your computer and use it in GitHub Desktop.
Шпаргалка по Markdown

Шпаргалка по Markdown

(https://github.com/sandino/Markdown-Cheatsheet) (перевод, оригинал)

Поиграть с разметкой Markdown можно на демо-странице.

Содержание

Заголовки
Выделение
Списки
Ссылки
Изображения
Подсветка кода и синтаксиса
Таблицы
Цитаты
Встроенный HTML
Горизонтальная линия
Новая строка
Видео Youtube

Заголовки

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

Кроме того, H1 и H2 можно обозначить подчеркиванием:

Alt-H1
======

Alt-H2
------

H1

H2

H3

H4

H5
H6

Кроме того, заголовки H1 и H2 можно обозначить подчеркиванием:

Alt-H1

Alt-H2

Выделение

Курсив обозначается *звездочками* или _подчеркиванием_.

Полужирный шрифт - двойными **звездочками** или __подчеркиванием__.

Комбинированное выделение **звездочками и _подчеркиванием_**.

Для зачеркнутого текста используются две тильды . ~~Уберите это.~~

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

Полужирный шрифт - двойными звездочками или подчеркиванием.

Комбинированное выделение звездочками и подчеркиванием.

Для зачеркнутого текста используются две тильды . Уберите это.

Списки

(В данном примере предшествующие и завершающие пробелы обозначены точками: ⋅)

1. Первый пункт нумерованного списка
2. Второй пункт
⋅⋅*Ненумерованный вложенный список.
1. Сами числа не имеют значения, лишь бы это были цифры
⋅⋅1. Нумерованный вложенный список
4. И еще один пункт.

⋅⋅⋅Внутри пунктов списка можно вставить абзацы с таким же отступом. Обратите внимание на пустую строку выше и на пробелы в начале (нужен по меньшей мере один, но здесь мы добавили три, чтобы также выровнять необработанный Markdown).

⋅⋅⋅Чтобы вставить разрыв строки, но не начинать новый параграф, нужно добавить два пробела перед новой строкой.⋅⋅
⋅⋅⋅Этот текст начинается с новой строки, но находится в том же абзаце.⋅⋅
⋅⋅⋅(В некоторых обработчиках, например на Github, пробелы в начале новой строки не нужны.)

* Ненумерованный список можно размечать звездочками
- Или минусами
+ Или плюсами
  1. Первый пункт нумерованного списка
  2. Второй пункт
  • Ненумерованный вложенный список.
  1. Сами числа не имеют значения, лишь бы это были цифры

  2. Нумерованный вложенный список

  3. И еще один пункт.

    Внутри пунктов списка можно вставить абзацы с таким же отступом. Обратите внимание на пустую строку выше и на пробелы в начале (нужен по меньшей мере один, но здесь мы добавили три, чтобы также выровнять необработанный Markdown).

    Чтобы вставить разрыв строки, но не начинать новый параграф, нужно добавить два пробела перед новой строкой. Эта текст начинается с новой строки, но находится в том же абзаце. (В некоторых обработчиках, например на Github, пробелы в начале новой строки не нужны.)

  • Ненумерованный список можно размечать звездочками
  • Или минусами
  • Или плюсами

Ссылки

Ссылки можно оформить разными способами.

[Обычная ссылка в строке](https://www.google.com)

[Обычная ссылка с title](https://www.google.com "Сайт Google")

[Ссылка со сноской][Произвольный регистронезависимый текст]

[Относительная ссылка на документ](../blob/master/LICENSE)

[Для ссылок со сноской можно использовать цифры][1]

Или можно просто вставить ссылку в квадратные скобки [текст ссылки]

Произвольный текст, после которого можно привести ссылки.

[произвольный регистронезависимый текст]: https://www.mozilla.org
[1]: http://slashdot.org
[текст ссылки]: http://www.reddit.com

Обычная ссылка в строке

Обычная ссылка с title

Ссылка со сноской *

Относительная ссылка на документ

Для ссылок со сноской можно использовать цифры

Или можно просто вставить ссылку в квадратные скобки текст ссылки

Произвольный текст, после которого можно привести ссылки.

(*) Для символов не входящих в ASCII, например кириллицы, текст сноски все-таки регистрозависим (прим. перев.)

Изображения

Вот наш логотип (наведите указатель, чтобы увидеть текст заголовка):

Внутри строки:  
![alt-текст](https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Текст заголовка логотипа 1")

В сноске:  
![alt-текст][logo]

[logo]: https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Текст заголовка логотипа 2"

Вот наш логотип (наведите указатель, чтобы увидеть текст заголовка):

Внутри строки:
alt-текст

В сноске:
alt-текст

Код и подсветка синтаксиса

Блоки кода являются частью функций Markdown, но не подсветка синтаксиса. Однако многие обработчики, например Github или Markdown Here, поддерживают подсветку синтаксиса. Список поддерживаемых языков и способ их указания может различаться. Markdown Here поддерживает десятки языков (и не-языков, например синтаксис diff и заголовки HTTP); полный список и способ указания языков см. на странице highlight.js demo-странице.

`Код` в строке обрамляется `обратными апострофами`.

Код в строке обрамляется обратными апострофами.

Блоки кода выделяются либо тремя обратными апострофами ``` либо четырьмя пробелами в каждой строке. Рекомендуется использовать три апострофа -- они проще и только они поддерживают подсветку синтаксиса.

```javascript
var s = "Подсветка JavaScript";
alert(s);
```
 
```python
s = "Подсветка Python"
print s
```
 
```
Язык не указан, синтаксис не подсвечен.
Но мы вставим в него <b>тег</b>.
```
var s = "Подсветка JavaScript";
alert(s);
s = "Подсветка Python"
print s
Язык не указан, синтаксис не подсвечен (некоторые обработчики все же подсвечивают).
Но мы вставим в него <b>тег</b>.

Таблицы

Таблицы не являются частью Markdown, но многие обработчики, например Markdown Here и Github, поддерживают их. Они позволяют легко добавить таблицы в электронное письмо -- в других случаях для этого нужно копировать их из другого приложения.

Вертикальные линии обозначают столбцы.

| Таблицы       | Это                | Круто |
| ------------- |:------------------:| -----:|
| столбец 3     | выровнен вправо    | $1600 |
| столбец 2     | выровнен по центру |   $12 |
| зебра-строки  | прикольные         |    $1 |

Внешние вертикальные линии (|) не обязательны, и они нужны только чтобы сам код Markdown выглядел красиво. Тот же код можно записать так:

Markdown | не такой | красивый
--- | --- | ---
*Но выводится* | `так же` | **клево**
1 | 2 | 3

Вертикальные линии обозначают столбцы.

Таблицы Это Круто
столбец 3 выровнен вправо $1600
столбец 2 выровнен по центру $12
зебра-строки прикольные $1

Внешние вертикальные линии (|) не обязательны, и они нужны только чтобы сам код Markdown выглядел красиво. Тот же код можно записать так:

Markdown не такой красивый
Но выводится так же клево
1 2 3

Цитаты

> С помощью цитат очень удобно в письме обозначать исходный текст.
> Эта строка - часть той же цитаты.

Разрыв цитаты.

> Это очень длинная строка, но она будет правильно процитирована даже при размещении на нескольких строках. Продолжаем писать, чтобы эта строка не вмещалась на одной строке в любом окне. Кстати, в цитаты можно *вставлять* даже **Markdown**.

С помощью цитат очень удобно в письме обозначать исходный текст. Эта строка - часть той же цитаты.

Разрыв цитаты.

Это очень длинная строка, но она будет правильно процитирована даже при размещении на нескольких строках. Продолжаем писать, чтобы эта строка не вмещалась на одной строке в любом окне. Кстати, в цитаты можно также размечать с помощью Markdown.

Встроенный HTML

Часто Markdown понимает чистый HTML.

<dl>
  <dt>Список определений</dt>
  <dd>Это то, что люди иногда используют.</dd>

  <dt>Markdown внутри HTML</dt>
  <dd>Работает *не очень** хорошо. Используйте HTML-<em>теги</em>.</dd>
</dl>
Список определений
Это то, что люди иногда используют.
Markdown внутри HTML
Работает *не очень** хорошо. Используйте HTML-теги.

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

Три и более...

---

Дефисы

***

Звездочки

___

Подчеркивания

Три и более...


Дефисы


Звездочки


Подчеркивания

Новая строка

Для понимания работы разрыва строка автор главным образом рекомендует экспериментировать и пробовать -- нажмите <Enter> один раз (т.е. перейдите на новую строку), потом нажмите дважды (т.е. вставьте две новые строки) и посмотрите что приозошло. Вы сразу поймете что вам нужно. В расширении Markdown Here для браузеров есть удобная функция "Markdown Toggle", которая поможет в этом.

Примечание переводчика:
Для переноса на новую строку в конце предыдущей строки необходимо добавить два пробела. Без этого большинство парсеров Markdown не выполняют переход на новую строку.

Попробуйте ввести следующее:

Это начальная строка

Эта строка отделена от предыдущей двумя новыми строками и станет *отдельным абзацем*.

Это тоже отдельный абзац, но...⋅⋅
Эта строка отделена одной новой строкой, поэтому она находится в *том же абзаце*.

Это начальная строка

Эта строка отделена от предыдущей двумя новыми строками и станет отдельным абзацем.

Это тоже отдельный абзац, но...[здесь два пробела]
Эта строка отделена одной новой строкой, поэтому она находится в том же абзаце.

(Примечание: В Markdown Here разрывы строк ведут себя так же, как в GFM, поэтому не нужно вставлять по две новые строки.)

Видео Youtube

Ролики нельзя вставить напрямую, но можно вставить изображение со ссылкой на видео, например:

<a href="http://www.youtube.com/watch?feature=player_embedded&v=ID_ВИДЕОРОЛИКА_НА_YOUTUBE" target="_blank"><img src="http://img.youtube.com/vi/ID_ВИДЕОРОЛИКА_НА_YOUTUBE/0.jpg" 
alt="ALT-ТЕКСТ ИЗОБРАЖЕНИЯ" width="240" height="180" border="10" /></a>

На чистом Markdown, но без размеров изображения и рамки:

[![ALT-ТЕКСТ ИЗОБРАЖЕНИЯ](http://img.youtube.com/vi/ID_ВИДЕОРОЛИКА_НА_YOUTUBE/0.jpg)](http://www.youtube.com/watch?v=ID_ВИДЕОРОЛИКА_НА_YOUTUBE)
@kr1so
Copy link

kr1so commented Nov 20, 2021

класс

@malina-code
Copy link

отлично!!!

@SuvorinSergey
Copy link

Спасибо! Очень полезная инфа.

@Konst-Andre25
Copy link

Thanks!

@MrAlexSmith
Copy link

Прекрасная работа! Низкий поклон Вам!

@aquaverso2077
Copy link

Класс! Спасибо!

@alenaVSk
Copy link

Спасибо, добрый человек! Очень выручает!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment