Markdown-редактор

Markdown-редактор - это стандартный редактор, который используется в системе.  Облегчённый язык разметки, созданный с целью написания наиболее читаемого и удобного для правки текста, но пригодного для преобразования в языки для продвинутых публикаций (HTML, Rich Text и других).
Возможность использования в редакторе:
Объект
Символ
Никнейм пользователей
@...
Тэги
~...
Коды заявок
#...
Материал из центра знаний    
$...
​
Шпаргалка по Markdown
(перевод, оригинал)
Поиграть с разметкой Markdown можно на демо-странице.
Содержание
​Заголовки
Выделение
Списки
Ссылки
Изображения
Подсветка кода и синтаксиса
Таблицы
Цитаты
Встроенный HTML
Горизонтальная линия
Новая строка
Видео Youtube​
Заголовки
1
# H1
2
## H2
3
### H3
4
#### H4
5
##### H5
6
###### H6
7
​
8
Кроме того, H1 и H2 можно обозначить подчеркиванием:
9
​
10
Alt-H1
11
======
12
​
13
Alt-H2
14
------
Copied!
H1
H2
H3
H4
H5
H6
Кроме того, заголовки H1 и H2 можно обозначить подчеркиванием:
Alt-H1
Alt-H2
Выделение
1
Курсив обозначается *звездочками* или _подчеркиванием_.
2
​
3
Полужирный шрифт - двойными **звездочками** или __подчеркиванием__.
4
​
5
Комбинированное выделение **звездочками и _подчеркиванием_**.
6
​
7
Для зачеркнутого текста используются две тильды . ~~Уберите это.~~
Copied!
Курсив обозначается звездочками или подчеркиванием.
Полужирный шрифт - двойными звездочками или подчеркиванием.
Комбинированное выделение звездочками и подчеркиванием.
Для зачеркнутого текста используются две тильды . Уберите это.
Списки
(В данном примере предшествующие и завершающие пробелы обозначены точками: ⋅)
1
1. Первый пункт нумерованного списка
2
2. Второй пункт
3
⋅⋅*Ненумерованный вложенный список.
4
1. Сами числа не имеют значения, лишь бы это были цифры
5
⋅⋅1. Нумерованный вложенный список
6
4. И еще один пункт.
7
​
8
⋅⋅⋅Внутри пунктов списка можно вставить абзацы с таким же отступом. Обратите внимание на пустую строку выше и на пробелы в начале (нужен по меньшей мере один, но здесь мы добавили три, чтобы также выровнять необработанный Markdown).
9
​
10
⋅⋅⋅Чтобы вставить разрыв строки, но не начинать новый параграф, нужно добавить два пробела перед новой строкой.⋅⋅
11
⋅⋅⋅Этот текст начинается с новой строки, но находится в том же абзаце.⋅⋅
12
⋅⋅⋅(В некоторых обработчиках, например на Github, пробелы в начале новой строки не нужны.)
13
​
14
* Ненумерованный список можно размечать звездочками
15
- Или минусами
16
+ Или плюсами
Copied!
1.Первый пункт нумерованного списка
2.Второй пункт
Ненумерованный вложенный список.
1.Сами числа не имеют значения, лишь бы это были цифры
2.Нумерованный вложенный список
3.И еще один пункт.
Внутри пунктов списка можно вставить абзацы с таким же отступом. Обратите внимание на пустую строку выше и на пробелы в начале (нужен по меньшей мере один, но здесь мы добавили три, чтобы также выровнять необработанный Markdown).
Чтобы вставить разрыв строки, но не начинать новый параграф, нужно добавить два пробела перед новой строкой. Эта текст начинается с новой строки, но находится в том же абзаце. (В некоторых обработчиках, например на Github, пробелы в начале новой строки не нужны.)
Ненумерованный список можно размечать звездочками
Или минусами
Или плюсами
Ссылки
Ссылки можно оформить разными способами.
1
[Обычная ссылка в строке](https://www.google.com)
2
​
3
[Обычная ссылка с title](https://www.google.com "Сайт Google")
4
​
5
[Ссылка со сноской][Произвольный регистронезависимый текст]
6
​
7
[Относительная ссылка на документ](../blob/master/LICENSE)
8
​
9
[Для ссылок со сноской можно использовать цифры][1]
10
​
11
Или можно просто вставить ссылку в квадратные скобки [текст ссылки]
12
​
13
Произвольный текст, после которого можно привести ссылки.
14
​
15
[произвольный регистронезависимый текст]: https://www.mozilla.org
16
[1]: http://slashdot.org
17
[текст ссылки]: http://www.reddit.com
Copied!
​Обычная ссылка в строке​
​Обычная ссылка с title​
​Ссылка со сноской *
​Относительная ссылка на документ​
​Для ссылок со сноской можно использовать цифры​
Или можно просто вставить ссылку в квадратные скобки текст ссылки​
Произвольный текст, после которого можно привести ссылки.
(*) Для символов не входящих в ASCII, например кириллицы, текст сноски все-таки регистрозависим (прим. перев.)
Изображения
1
Вот наш логотип (наведите указатель, чтобы увидеть текст заголовка):
2
​
3
Внутри строки:  
4
![alt-текст](https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Текст заголовка логотипа 1")
5
​
6
В сноске:  
7
![alt-текст][logo]
8
​
9
[logo]: https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Текст заголовка логотипа 2"
Copied!
Вот наш логотип (наведите указатель, чтобы увидеть текст заголовка):
Внутри строки:
​
​​
В сноске:
​
​​
Код и подсветка синтаксиса
Блоки кода являются частью функций Markdown, но не подсветка синтаксиса. Однако многие обработчики, например Github или Markdown Here, поддерживают подсветку синтаксиса. Список поддерживаемых языков и способ их указания может различаться. Markdown Here поддерживает десятки языков (и не-языков, например синтаксис diff и заголовки HTTP); полный список и способ указания языков см. на странице highlight.js demo-странице.
1
`Код` в строке обрамляется `обратными апострофами`.
Copied!
Код в строке обрамляется обратными апострофами.
Блоки кода выделяются либо тремя обратными апострофами ``` либо четырьмя пробелами в каждой строке. Рекомендуется использовать три апострофа -- они проще и только они поддерживают подсветку синтаксиса.
1
```javascript
2
var s = "Подсветка JavaScript";
3
alert(s);
4
```
5
 
6
```python
7
s = "Подсветка Python"
8
print s
9
```
10
 
11
```
12
Язык не указан, синтаксис не подсвечен.
13
Но мы вставим в него <b>тег</b>.
14
```
Copied!
1
var s = "Подсветка JavaScript";
2
alert(s);
Copied!
1
s = "Подсветка Python"
2
print s
Copied!
1
Язык не указан, синтаксис не подсвечен (некоторые обработчики все же подсвечивают).
2
Но мы вставим в него <b>тег</b>.
Copied!
Таблицы
Таблицы не являются частью Markdown, но многие обработчики, например Markdown Here и Github, поддерживают их. Они позволяют легко добавить таблицы в электронное письмо -- в других случаях для этого нужно копировать их из другого приложения.
1
Вертикальные линии обозначают столбцы.
2
​
3
| Таблицы       | Это                | Круто |
4
| ------------- |:------------------:| -----:|
5
| столбец 3     | выровнен вправо    | $1600 |
6
| столбец 2     | выровнен по центру |   $12 |
7
| зебра-строки  | прикольные         |    $1 |
8
​
9
Внешние вертикальные линии (|) не обязательны и нужны только, чтобы сам код Markdown выглядел красиво. Тот же код можно записать так:
10
​
11
Markdown | не такой | красивый
12
--- | --- | ---
13
*Но выводится* | `так же` | **клево**
14
1 | 2 | 3
Copied!
Вертикальные линии обозначают столбцы.
Таблицы
Это
Круто
столбец 3
выровнен вправо
$1600
столбец 2
выровнен по центру
$12
зебра-строки
прикольные
$1
Внешние вертикальные линии (|) не обязательны и нужны только, чтобы сам код Markdown выглядел красиво. Тот же код можно записать так:
Markdown
не такой
красивый
Но выводится
так же
клево
1
2
3
Цитаты
1
> С помощью цитат очень удобно в письме обозначать исходный текст.
2
> Эта строка - часть той же цитаты.
3
​
4
Разрыв цитаты.
5
​
6
> Это очень длинная строка, но она будет правильно процитирована даже при размещении на нескольких строках. Продолжаем писать, чтобы эта строка не вмещалась на одной строке в любом окне. Кстати, в цитаты можно *вставлять* даже **Markdown**.
Copied!
С помощью цитат очень удобно в письме обозначать исходный текст. Эта строка - часть той же цитаты.
Разрыв цитаты.
Это очень длинная строка, но она будет правильно процитирована даже при размещении на нескольких строках. Продолжаем писать, чтобы эта строка не вмещалась на одной строке в любом окне. Кстати, в цитаты можно также размечать с помощью Markdown.
Встроенный HTML
Часто Markdown понимает чистый HTML.
1
<dl>
2
  <dt>Список определений</dt>
3
  <dd>Это то, что люди иногда используют.</dd>
4
​
5
  <dt>Markdown внутри HTML</dt>
6
  <dd>Работает *не очень** хорошо. Используйте HTML-<em>теги</em>.</dd>
7
</dl>
Copied!
Список определенийЭто то, что люди иногда используют.Markdown внутри HTMLРаботает *не очень** хорошо. Используйте HTML-теги.
Горизонтальные линии
1
Три и более...
2
​
3
---
4
​
5
Дефисы
6
​
7
***
8
​
9
Звездочки
10
​
11
___
12
​
13
Подчеркивания
Copied!
Три и более...
Дефисы
Звездочки
Подчеркивания
Новая строка
Для понимания работы разрыва строка автор главным образом рекомендует экспериментировать и пробовать -- нажмите <Enter> один раз (т.е. перейдите на новую строку), потом нажмите дважды (т.е. вставьте две новые строки) и посмотрите что приозошло. Вы сразу поймете что вам нужно. В расширении Markdown Here для браузеров есть удобная функция "Markdown Toggle", которая поможет в этом.
Примечание переводчика:
Для переноса на новую строку в конце предыдущей строки необходимо добавить два пробела. Без этого большинство парсеров Markdown не выполняют переход на новую строку.
Попробуйте ввести следующее:
1
Это начальная строка
2
​
3
Эта строка отделена от предыдущей двумя новыми строками и станет *отдельным абзацем*.
4
​
5
Это тоже отдельный абзац, но...⋅⋅
6
Эта строка отделена одной новой строкой, поэтому она находится в *том же абзаце*.
Copied!
Это начальная строка
Эта строка отделена от предыдущей двумя новыми строками и станет отдельным абзацем.
Это тоже отдельный абзац, но...[здесь два пробела]
Эта строка отделена одной новой строкой, поэтому она находится в том же абзаце.
(Примечание: В Markdown Here разрывы строк ведут себя так же, как в GFM, поэтому не нужно вставлять по две новые строки.)
Видео Youtube
Ролики нельзя вставить напрямую, но можно вставить изображение со ссылкой на видео, например:
1
<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" 
2
alt="ALT-ТЕКСТ ИЗОБРАЖЕНИЯ" width="240" height="180" border="10" /></a>
Copied!
На чистом Markdown, но без размеров изображения и рамки:
1
[![ALT-ТЕКСТ ИЗОБРАЖЕНИЯ](http://img.youtube.com/vi/ID_ВИДЕОРОЛИКА_НА_YOUTUBE/0.jpg)](http://www.youtube.com
Copied!