Markdown легкое управление разметкой HTML

На мгновение я искал в голове подходящий эпитет, который должен описать нашего сегодняшнего героя статьи. Я думаю, что удобнее будет дать вам полное определение, поскольку Markdown одинаково производителен и интуитивен.

Чем вообще является Markdown?

Это язык разметки, используемый для форматирования текста, созданный Джоном Грубером и Аароном Шварцем в далеком 2004 году. Из других доступных решений, таких как ВВCode или чистый HTML его отличает ряд преимуществ, из которых я бы выделил скорость использования и интуитивность. Синтаксис Markdown запроектирован таким образом, что даже глядя на еще не преобразованный код мы видим предназначение каждого маркера.

Markdown меняет дело!

Как работать со всем этим, спросите вы. И зачем вообще это. Работать с markdown можно практически везде, где до этого вы работали с чистым HTML. Есть множество библиотек, плагинов, модулей, все это можно найти на просторах интернета. Можно работать на WordPress, SublimeText, Eclipse и т. д. Для наглядности сразу кидаю вам пример:

Это заголовок h1

==================

# Это тоже заголовок h1

А это его подзаголовок

———————-

## А это тоже его подзаголовок

Каждый абзац отделяется пустой строкой, следовательно в пределе одного параграфа мы можем

беспрепятственно пользоваться клавишей enter.

Одинаково интуитивно происходит форматирование текста, например: это *курсив* а это **жирный**.

Ненумерованный список:

— Огурцы

— Картофель

— Помидоры

И пронумерованый список:

Огурцы

Свекла

Капуста

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

Это заголовок h1

==================

# Это тоже заголовок h1

А это его подзаголовок

———————-

## А это тоже его подзаголовок

Каждый абзац отделяется пустой строкой, следовательно в пределе одного параграфа мы можем

беспрепятственно пользоваться клавишей enter.

Одинаково интуитивно происходит форматирование текста, например: это *курсив* а это **жирный**.

Ненумерованный список:

— Огурцы

— Картофель

— Помидоры

И пронумерованый список:

Огурцы

Свекла

Капуста

Как видите, в разметке нет никаких тегов (закрывающих, открывающих, как это было в HTML), практически не возможно запутаться, все достаточно прозрачно и динамично.

У вас сразу же может возникнуть вопрос, а сколько надо ставить этих знаков равно (==

) или сколько пунктиров (-) чтобы получился заголовок? Ответ: достаточно одной таблэтки одного знака, но лучше ставить их относительно размера самого заголовка, так вам будет более легче «читать» разметку, или же можете пользоваться хешами (#).

А теперь смотрим на результат который сгенерировал для нас Markdown:

Теперь если посмотреть в исходный код страницы то вы увидите самый обычный HTML:

<h1>Это заголовок h1</h1>

<h1>Это тоже заголовок h1</h1>

<h2>А это его подзаголовок</h2>

<h2>А это тоже его подзаголовок</h2>

<p>Каждый абзац отделяется пустой строкой, следовательно в пределе одного параграфа мы можем

беспрепятственно пользоваться клавишей enter.</p>

<p>Одинаково интуитивно происходит форматирование текста, например: это <em>курсив</em>

а это <strong>жирный</strong>.</p>

<p>Ненумерованный список:</p>

<ul>

<li>Огурцы</li>

<li>Картофель</li>

<li>Помидоры</li>

</ul>

<p>И пронумерованый список:</p>

<ol>

<li>Огурцы</li>

<li>Свекла</li>

<li>Капуста</li>

</ol>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<h1>Это заголовок h1</h1>

<h1>Это тоже заголовок h1</h1>

<h2>А это его подзаголовок</h2>

<h2>А это тоже его подзаголовок</h2>

<p>Каждый абзац отделяется пустой строкой, следовательно в пределе одного параграфа мы можем

беспрепятственно пользоваться клавишей enter.</p>

<p>Одинаково интуитивно происходит форматирование текста, например: это <em>курсив</em>

а это <strong>жирный</strong>.</p>

<p>Ненумерованный список:</p>

<ul>

<li>Огурцы</li>

<li>Картофель</li>

<li>Помидоры</li>

</ul>

<p>И пронумерованый список:</p>

<ol>

<li>Огурцы</li>

<li>Свекла</li>

<li>Капуста</li>

</ol>

Краткая визуализация работы Markdown

Резюме

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

7 основных конструкций в работе с Markdown

В дополнение тому, что уже было показано выше, синтаксис markdown предлагает нам еще целую кучу конструкций (а вы думали это все? 🙂 ). В список входит:

ссылки

изображения

разрывы строк внутри абзацев

размещение блоков кода

таблицы

линии

цитаты

Ссылки и Markdown

Все знают как записать ссылку в HTML.

Пример в HTML:

<p>Это разметка хтмл, а это <a href=»http://site. com/»>ссылка</a> на сайт</p>

Пример в Markdown:

Это разметка хтмл, а это [ссылка](http://site. com/) на сайт.

Также можно сослаться на сайт в таком стиле:

Это разметка хтмл, а это <http://site. com/> наш сайт.

Результат:

Изображения и Markdown

Пример:

![альтернативный текст](http://site. com/img. png «Тут можно написать title, а можно и без него»)

Разрывы строк внутри абзацев

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

Пример:

Речь идет о том, как в пределах одного абзаца перейти<тут ставим два пробела без тегов и нажимаем enter> на новою строку

Размещение блоков кода с помощью Markdown

Хотите написать код (например на php)? Начинайте с трех и более, обратных апострофов (на клавиатуре значок тильды) и также ними заканчивайте. Например:

Результат:

Таблицы в Markdown

Тут тоже все достаточно легко и просто в сравнении с таблицами на чистом html. Пример построения таблицы:

Техника | Цена

— | —

Принтер | $100

Телефон | $80

Сканер | $150

Результат:

Хочется больше столбцов? Продолжаем по аналогии.

Линии в Markdown

Вместо тега <hr> (в html) просто ставим три звезды (***)

Цитаты в Markdown

Цитата (аналогия blockquote) начинается с символа (>)

Резюме

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

Спецсекция или коротко о главном

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

Тут хотел бы сказать несколько слов о заголовках h1-h Лучше всего их записывать хешем (#), так вы всегда будете знать какой сейчас уровень заголовка исходя из их количества. Пример #Это заголовок h1, а ######Это заголовок h6

Сейчас множество программ поддерживает Markdown синтаксис. Например в Thunderbird, можно с легкостью писать письма используя все эти конструкции. Также markdown используется на таких сайтах как — БитБакет, ДжитХаб, Джекил и на многих других. Для wordpress можете пользоваться плагином WP-Markdown[1]. Про него я потом напишу обзорною статью. Напоследок несколько online сервисов, где вы можете потестить свои навыки в этой разметке:

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

Оцените пожалуйста материал:

Загрузка…

Поделиться:

Оставьте пожалуйста ваш комментарий :

comments powered by HyperComments[2]

Если вам понравилась статья поделитесь ей в социальных сетях.