Шпаргалка по синтаксису markdown (маркдаун) со всеми самыми популярными тегами

markdown
Markdown (маркдаун) — облегчённый язык разметки созданный с целью написания максимально читабельного и удобного для правки текста, но пригодного для преобразования в языки для продвинутых публикаций (HTML, Rich Text и др.). Ниже будет приведена шпаргалка по синтаксису markdown со всеми самыми популярными тегами маркдаун.


СОДЕРЖАНИЕ

Содержание в виде ссылок по тексту (якоря) (работает не со всеми плагинами wordpress)

Маркдаун может генерировать содержание статьи автоматически основываясь на заголовках, при этом якоря создаются также автоматически. В месте вывода содержания укажите тег [TOC]. В результате, вы получите список как сверху (в этой статье содержание реализовано другим способом)


Якоря в Markdown (маркдаун)

Поместите в нужном месте якорь: <a name="abcd"></a>, и, там где это необходимо, ссылку на этот якорь: Текст ссылки.
Пример использования таких якорей видно в содержании этой статьи.


Тэг читать далее (cut) в Markdown (маркдаун)

Чтобы в маркдауне поставить тэг Читать далее, достаточно в строчке написать <!--more-->


Заголовки

Для того чтобы написать заголовок в Markdown, необходимо использовать знак # (хэш). Если необходимо несколько уровней заголовков, h1 — h6, нужно изменить количество хэшей (#) перед текстом заголовка.

<code># H1
## H2
### H3
#### H4
##### H5
###### H6  
Альтернативные теги для H1 и H2 (знаки равно или минусы под заголовком + пустая строчка над загаловком):

Альтернативный-H1
======

Альтернативный-H2
------
</code>

H1

H2

H3

H4

H5
H6

Альтернативные теги для H1 и H2 (знаки равно или минусы под заголовком + пустая строчка над загаловком):

Альтернативный-H1

Альтернативный-H2


Списки

Markdown поддерживает два вида списков: маркерованный и нумерованный. Для организации маркерованного списка используются знаки *, + и -. От них зависит вид маркеров. Чтоб сделать многоуровневый список, нужно будет сделать отступы (4 или 8 пробелов).

<code>1. Первый пункт списка
2. Второй пункт
⋅⋅⋅* Немаркерованный вложенный подпункт. 
1. Номер не имеет значения, нужно чтобы это была просто любая цифра
⋅⋅⋅1. Маркерованный вложенный подпункт.
4. Тут другой пункт.

⋅⋅⋅Можно вставлять в список отдельный абзац. Но, обратите внимание на пустую строчку сверху и пробелы перед строчкой.

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

* Для ненумерованных списков можно использовать звёздочки
- Или минусы
+ Или плюсы
</code>
  1. Первый пункт списка
  2. Второй пункт
    • Немаркерованный вложенный подпункт.
  3. Номер не имеет значения, нужно чтобы это была просто любая цифра
    1. Маркерованный вложенный подпункт.
  4. Тут другой пункт.Можно вставлять в список отдельный абзац. Но, обратите внимание на пустую строчку сверху и пробелы перед строчкой.Чтобы вставить абзац без пустой строчки сверху, нужно в конце строки поставить два пробела.
    Обратите внимания что эта строчка отдельная, хотя находится в том же абзаце.
    В этой строчке пробелы в конце строчки не требуются.
  • Для ненумерованных списков можно использовать звёздочки
  • Или минусы
  • Или плюсы

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

Создать горизонтальную линию можно поместив три или больше звездочек *, минусов — или подчеркиваний _ на отдельной строке.

<code>***
</code>

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

<code>* * * * *  
-------------------------  
_ _ _ _ _  
</code>

Каждая из приведенных выше строк даст одинаковый результат. Вот такой:


Абзацы, параграфы

В маркдаун все блочные элементы (заголовки, списки, абзацы и т.д.) — все, что визуально начинается с новой строки отбивается пустой строкой. Для вставки пустой строки необходимо два раза поставить символ переноса строки (нажать на Enter)


Перенос строки

Перенос строки всегда игнорируется. Это делается для того, чтобы, например, была возможность при наборе держать определенную длину строки, скажем в 80 символов.

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

Для переноса строки внутри абзаца нужно использовать два пробела ⋅⋅ в конце строки.


Курсивное и жирное выделение текста

Для курсива необходимо поставить знаки * вокруг текста. Для жирного начертания обрамим текст двумя звездочками, а для жирного курсива — тремя. Алтернативный синтаксис — использование знака _ по тем же правилам.

<code>___жирный курсив___
</code>

Выделение текст или код

Выделить текст или часть кода можно с помощью символа гравис (обратный апостроф) <pre>&lt;code&gt;Выделитьтекстиличасть кодаможно с помощью символа гравис (обратный апостроф)
</code>
Для выделения блока кода используют три символа в строчке до и после блока кода:

<code>```
$a = 5; 
$b = 3; 
$c = $a + $b;
```
</code>

Отмена форматирования

Если вы хотите, чтобы введенные теги HTML, код, теги маркдауна отображались в точности как вы их написали, то начните каждую строку с четырех пробелов.

<code>⋅⋅⋅⋅тут должен быть **жирный текст**, но я поставил 4 пробела в начале стрки
</code>

Цитаты

Для обозначения цитат достаточно поставить знак > в начале строки

<code>&gt; Это простая цитата⋅⋅  
Состоящая из двух строк
</code>

Это простая цитата
Состоящая из двух строк

(напомню, для переноса строчки я использую два пробела в конце строчки)
Цитаты можно вкладывать друг в друга:

<code>&gt; Это просто цитата
&gt;
&gt; &gt; А это уже вложенная цитата
</code>

Это просто цитата

А это уже вложенная цитата


Ссылки

Существует два варианта оформления ссылок. Первый — обычная вставка в текст:

<code>[Текст ссылки](адрес "Описание")
</code>

Текст ссылки

и второй вариант — оформление ссылки в виде сноски. Когда в текст вставляется конструкция вида:

<code>[Текст ссылки][Тег1]
</code>

… Указывающая, что именно в этом место будет располагаться ссылка, а где-нибудь ниже её описание:

<code>[Тег1][Адрес ссылки]
</code>

Результат выполнение будет аналогичен первому варианту, но такое оформление удобнее с точки зрения дальнейшей поддержки и редактирования.

<code>I get 10 times more traffic from [Google][1] than from
[Yahoo][2] or [MSN][3].

[1]: http://google.com/        "Google"
[2]: http://search.yahoo.com/  "Yahoo Search"
[3]: http://search.msn.com/    "MSN Search"
</code>

I get 10 times more traffic from Google than from
Yahoo or MSN.


Сноски

Сноски и примечания1 задаются так2:

<code>Сноски и примечания[^1] задаются так[^2]:
// пустая строка обязательно
[^1]: Все сноски отображаются в конце страницы
[^2]: Просто не так ли?)
</code>

Изображения

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

<code>![Alt-текст](Путь к файлу "Подпись")
</code>

Вставка реального изображения может выглядеть как-то так:

<code>![mountains](/img/mountan.png "Пейзаж с горами")
</code>

Создадим картинку, которая является еще и ссылкой на какую-нибудь страницу в сети:

<code>[Поисковая система Google][google]
![Логотип Google][logo]
</code>

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

<code>[![Логотип Google][logo]][google]
</code>

Нужно помнить, что приведенные выше ссылки должны быть определены где-либо в документе:

<code>[logo]: http://www.google.com/images/logo.gif
[google]: http://www.google.com/ "щелкните, чтобы посетить Google.com"
</code>

Такое совмещение создает картинку, щелчок по которой переместит вас на указанную ссылку:

Логотип Google


Таблицы (работает не со всеми плагинами wordpress)

Создание таблиц с Markdown намного нагляднее, чем в HTML. Форматирование интуитивно понятно, добавлю только что для выравнивания текста внутри ячеек используются знаки : в строке, отделяющей заголовок от основной таблицы.

<code>Item      | Value | Quantity
:-------- |:-----:| -------:
Computer  | 1600  | 3
Phone     | 12    | 2
Pipe      | 1     | 1
</code>
Item Value Quantity
Computer 1600 3
Phone 12 2
Pipe 1 1

Спецсимволы

Если вы хотите отобразить любой из специальных символов Markdown вместо того, чтобы использовать его для форматирования, просто поставьте перед ним символ обратной косой черты (). Сама косая черта не отображается, однако следующий за ней символ будет показан как есть: *


Списки определений

Списки определений содержат термины и их описания. Это выглядит подобно словарю. Ниже простой пример:

<code>Moodle
:   Хорошо известная платформа для онлайнового обучения

PHP
:   Язык программирования.
    Часто используется для разработки интерактивных веб-приложений.
</code>
Moodle
Хорошо известная платформа для онлайнового обучения
PHP
Язык программирования.
Часто используется для разработки интерактивных веб-приложений.

Спойлер (работает не со всеми плагинами wordpress)

Скрываем большие объемы текстовой и графической информации с помощью Advanced Spoiler, который уже 2 года не обновляется и работает не везде.

<code>[spoiler]тут текст[/spoiler]
</code>

[spoiler]тут текст[/spoiler]


Использование HTML

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

<code>* &lt;small&gt;мелкий текст&lt;/small&gt;
* &lt;big&gt;крупный текст&lt;/big&gt;
</code>
  • мелкий текст
  • крупный текст

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


Рекомендуемый мной онлайн редактор Markdown

http://dillinger.io/


Рекомендуемый плагин для wordpress

  • WP — Markdown on Save Improved
  • Markdown Shortcode — позволяет вставить синтаксис маркдауна в части статьи. Код обрамляется тэгами:

    via shortcode


Официальный сайт Markdown

http://daringfireball.net/projects/markdown/


  1. Все сноски отображаются в конце страницы 
  2. Просто не так ли?)