Markdown — это утилита, позволяющая преобразовывать текст в HTML. Markdown позволяет писать обычный текст, который легко читать и редактировать, а затем преобразовывать в HTML.
Содержание:
Абзацы, заголовки, цитаты в Markdown
Ударение на фразы в Markdown
Списки в Markdown
Ссылки в Markdown
Изображения в Markdown
Код в Markdown
Все примеры из этой статьи и их результаты вы можете посмотреть на GitHub.
Абзацы, заголовки, цитаты в Markdown
Абзацы в Markdown — это просто несколько идущих подряд строк текста. Абзацы разделяются одной или более пустых строк. (Пустая строка — это любая строка, которая выглядит пустой. Строка, содержащая только пробелы и табуляторы считается пустой).
Markdown позволяет использовать два стиля заголовков: Setext и atx. Стиль Setext для заголовков <h1> и <h2> создаётся с помощью «подчёркивания» символами «=» и «-» соответственно. Для создания заголовков в стиле atx вставляются от одного до шести символов «#» в начале строки. Количество символов «#» определяет уровень заголовка.
Цитаты предваряются символами «>».
Markdown:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
Заголовок первого уровня ======================== Заголовок второго уровня ------------------------ Настал черёд, мои друзья, поговорить о королях... Это обычный параграф. Быстрая коричневая лиса перепрыгнула через спину ленивой собаки. ### Заголовок 3 > Это цитата > > Это второй параграф в цитате > > ## Это заголовок второго уровня в цитате. |
Результат:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<h1>Заголовок первого уровня</h1> <h2>Заголовок второго уровня</h2> <p>Настал черёд, мои друзья, поговорить о королях... Это обычный параграф.</p> <p>Быстрая коричневая лиса перепрыгнула через спину ленивой собаки.</p> <h3>Заголовок 3</h3> <blockquote> <p>Это цитата</p> <p>Это второй параграф в цитате</p> <h2>Это заголовок второго уровня в цитате.</h2> </blockquote> |
Ударение на фразы в Markdown
Для выделения фраз с помощью HTML-тегов <em></em> и <strong></strong> используйте звёздочки и подчёркивания.
Markdown:
1 2 3 4 5 |
Некоторые из этих слов *выделены*. Некоторые из этих слов _тоже выделены_. Используйте две звёздочки для **сильного выделения**. Или используйте __два подчёркивания__. |
Результат:
1 2 3 4 5 |
<p>Некоторые из этих слов <em>выделены</em>. Некоторые из этих слов <em>тоже выделены</em>.</p> <p>Используйте две звёздочки для <strong>сильного выделения</strong>. Или используйте <strong>два подчёркивания</strong>.</p> |
Списки в Markdown
Неупорядоченные списки создаются с помощью звёздочек, плюсов и знака вычитания. Все эти три способа взаимозаменяемы:
1 2 3 4 5 6 7 8 9 10 11 |
* Конфета. * Жвачка. * Батончик. + Конфета. + Жвачка. + Батончик. - Конфета. - Жвачка. - Батончик. |
Результат:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<p>Список 1</p> <ul> <li>Конфета.</li> <li>Жвачка.</li> <li>Батончик.</li> </ul> <p>Список 2</p> <ul> <li>Конфета.</li> <li>Жвачка.</li> <li>Батончик.</li> </ul> <p>Список 3</p> <ul> <li>Конфета.</li> <li>Жвачка.</li> <li>Батончик.</li> </ul> |
Упорядоченные списки создаются с использованием чисел с последующей точкой.
Markdown:
1 2 3 |
1. Red 2. Green 3. Blue |
Результат:
1 2 3 4 5 |
<ol> <li>Red</li> <li>Green</li> <li>Blue</li> </ol> |
Если вы добавите пустые строки между элементами, то вы получите теги <p> для текстов в элементах. Вы можете создавать элементы списка из нескольких абзацев, для этого делайте отступы в четыре пробела или один символ табуляции:
1 2 3 4 5 |
* Элемент списка. С несколькими параграфами. * Ещё один элемент списка. |
Результат:
1 2 3 4 5 6 |
<ul> <li><p>Элемент списка.</p> <p>С несколькими параграфами.</p></li> <li><p>Ещё один элемент списка.</p></li> </ul> |
Ссылки в Markdown
Markdown поддерживает два стиля создания ссылок: внутристрочные и в стиле сносок. В обоих стилях используются квадратные скобки для указания текста, который вы хотите использовать в качестве ссылки.
Markdown:
1 |
Пример [внутристрочной ссылки](http://example.com/). |
Результат:
1 |
<p>Пример <a href="http://example.com/">внутристрочной ссылки</a>.</p> |
Вы также можете указать атрибут title (всплывающую подсказку) внутри скобок:
1 |
Это [пример ссылки](http://example.com/ "с Title"). |
Результат:
1 |
<p>Это <a href="http://example.com/" title="с Title">пример ссылки</a>.</p> |
Ссылки в стиле сносок позволяют вам указывать имя ссылки, а саму ссылку определять где-нибудь в другом месте документа:
1 2 3 4 5 6 |
Я получаю в десять раз больше трафика с [Google][1] чем [Yahoo][2] с [MSN][3]. [1]: http://google.com/ "Google" [2]: http://search.yahoo.com/ "Yahoo Search" [3]: http://search.msn.com/ "MSN Search" |
Результат:
1 2 |
<p>Я получаю в десять раз больше трафика с <a href="http://google.com/" title="Google">Google</a> чем <a href="http://search.yahoo.com/" title="Yahoo Search">Yahoo</a> с <a href="http://search.msn.com/" title="MSN Search">MSN</a>.</p> |
Имена ссылок могут содержать буквы, цифры и пробелы, но они НЕ чувствительны к регистру символов:
1 2 3 4 |
Я начал утро с чашки кофе и [The New York Times][NY Times]. [ny times]: http://www.nytimes.com/ |
Результат:
1 2 |
<p>Я начал утро с чашки кофе и <a href="http://www.nytimes.com/">The New York Times</a>.</p> |
Изображения в Markdown
Синтаксис вставки изображений в Markdown схож с синтаксисом ссылок.
Встроенная ссылка (title не обязателен):
1 |
 |
В стиле сносок:
1 2 3 |
![alt text][id] [id]: /path/to/img.jpg "Title" |
В обоих случаях результатом будет:
1 |
<img src="/path/to/img.jpg" alt="alt text" title="Title" /> |
Код в Markdown
В обычном абзаце вы можете вставить тег <code></code>. Для этого вам нужно обернуть текст символом « `» (он расположен на одной кнопке с буквой «ё» на клавиатуре). Символы «&», «<», «>» автоматически преобразуются в коды символов HTML.
Markdown:
1 2 3 4 |
Я строго не рекомендую использовать теги `<blink>`. Я бы хотел, чтобы SmartPants использовали `—` вместо `—`. |
Результат:
1 2 3 4 |
<p>Я строго не рекомендую использовать теги <code><blink></code>.</p> <p>Я бы хотел, чтобы SmartPants использовали <code>&mdash;</code> вместо <code>&#8212;</code>.</p> |
Чтобы указать целый блок предварительно отформатированного кода, сделайте отступ каждой строки в четыре пробела или один табулятор. Символы «&», «<» и «>» будут преобразованы в HTML-коды символов автоматически:
1 2 3 4 5 6 7 |
Если вы хотите, чтобы ваша страница проходила проверку на XHTML 1.0 Strict, вам нужно добавить теги абзацев в ваши блочные цитаты: <blockquote> <p>Пример.</p> </blockquote> |
Результат:
1 2 3 4 5 6 7 8 |
<p>Если вы хотите, чтобы ваша страница проходила проверку на XHTML 1.0 Strict, вам нужно добавить теги абзацев в ваши блочные цитаты:</p> <pre><code><blockquote> <p>Пример.</p> </blockquote> </code></pre> |
—