Справочники, инструменты, документация

Markdown: Шпаргалка по синтаксису разметки Parsedown.php

Маркдаун – облегченный язык разметки, созданный для написания, чтения, оформления веб-текстов.
Markdown: Шпаргалка по синтаксису разметки Parsedown.php

Заголовки

Заголовки H1–H6 выделяются в Markdown с помощью знаков решетки (диез/шарп). Можно просто поставить нужное количество решеток в начале строки, чтобы указать уровень.

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

Выделения текста

Форматирование курсивом и жирным точно есть во всех инструментах, где другие функции Markdown могут быть ограничены. Синтаксис выделения текста и расставления акцентов:

__Жирный__

Жирный

**Тоже жирный**

Тоже жирный

*Курсив*

Курсив

_Тоже курсив_

Тоже курсив

~~Зачеркнутый~~

Зачеркнутый

<ins>Подчеркнутый</ins>

Подчеркнутый

Списки и отступы

Чтобы оформить строку в элемент маркированного списка, в начале нужно поставить плюс, минус или звездочку. Звездочка не приведет к курсивному выделению, потому что отделяется от слова пробелом.

  • Пункт 1

  • Пункт 2

  • Пункт 3

или

  • Пункт 1

  • Пункт 2

  • Пункт 3

или

  • Пункт 1

  • Пункт 2

  • Пункт 3

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

  1. Пункт 1

  2. Пункт 2

  3. Пункт 3

или

  1. Пункт 1

  2. Пункт 2

  3. Пункт 3

или даже

  1. Пункт 1

  2. Пункт 2

  3. Пункт 3

Маркдаун-разметка также позволяет оформлять многоуровневые списки. Уровень обозначается не количеством спецсимволов, как в случае с заголовками, а за счет отступов. Проще не считать пробелы, а каждый новый подпункт выделять табуляцией.

- Пункт 1
  - Подпункт A
    - Подподпункт a

- Пункт 2
  + Подпункт A
    * Подподпункт a

  • Пункт 1

    • Подпункт A
      • Подподпункт a

  • Пункт 2

    • Подпункт A
      • Подподпункт a
1. Пункт 1
  + Подпункт A
    - Подподпункт a

2. Пункт 2
  1. Подпункт 2.1.
    1. Подподпункт 2.1.1

3. Пункт 3
  1. Пункт 1
  • Подпункт A
    • Подподпункт a

  1. Пункт 2

  2. Подпункт 2.1.

  3. Подподпункт 2.1.1

  4. Пункт 3

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

* __Тезис №1__

  Раскрываем тезис


* _Тезис №2_

  Раскрываем тезис

* __Тезис №3__ Раскрываем тезис

* __Тезис №4__ Раскрываем тезис

  • Тезис №1

    Раскрываем тезис

  • Тезис №2

    Раскрываем тезис

  • Тезис №3 Раскрываем тезис

  • Тезис №4 Раскрываем тезис

Ссылки

Чтобы поставить гиперссылку без анкора, нужно взять URL в угловые скобки. С e-mail – аналогично. Если вставлять с анкором, то тогда текст ссылки заключается в квадратные скобки, а адрес страницы – в круглые. Рядом с URL можно прописать тайтл, его объявляют в кавычках (он тоже остается внутри круглых скобок).

Это простая [ссылка](http://ya.com/) в тексте.
Это [ссылка](http://ya.com/ "Титул") с аттрибутом title.

Чтобы длинные URL не затрудняли чтение и написание документа Markdown, есть вариант присвоения каждой ссылке определенных ID (меток/переменных). Можно сделать это несколькими способами:

Ссылаемся на [блог][blog-link] через ID. 
Объявляем метку позже по аналогии со сносками. 
Цифрами обозначить тоже можно: [Google][1], [Yandex][2].

[blog-link]: /blog "Блог про интернет-маркетинг"
[1]: google.com 'Сайт Google'
[2]: yandex.ru (Сайт «Яндекса»)

Ссылаемся на блог через ID.

Объявляем метку позже по аналогии со сносками.

Цифрами обозначить тоже можно: Google, Yandex.

Картинки

Синтаксис Markdown для работы с картинками очень похожий. Разница в восклицательном знаке перед первыми квадратными скобками. Ссылке на картинку тоже можно присвоить определенный ID. Примеры:

![Alt текст](/путь/к/изображению.jpg)

Alt текст

или ![Alt текст](/путь/к/изображению.jpg "Подсказка")

Alt текст

b. С помощью метки-идентификатора. Синтаксис данной команды записывается следующим образом: ![Alt текст][id], где id — имя определённой метки изображения. Метки изображений определяются при помощи синтаксиса: [id]: путь/к/изображению "Необязательная подсказка" и соответственно там где нужно отобразить или повторить изображение размещаем ![Alt text][id] (т.е. вместо «путей» мы используем id).

YouTube видео

[![Image alt текст](http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg)](http://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE)

Горизонтальная линия

Можно *** звездочки без пробелов, можно --- дефисы без пробелов.

Таблицы

| Header | Header |
| ---- | ---- |
| Content | Content |
| Content | Content |
First Header Second Header
Content Cell Content Cell
Content Cell Content Cell

Выравнивание задается двоеточием - влево, по центру, вправо:

:---     |   :---:   |     ---:

Выравнивание по левому краю.

| Option | Description |
| :------| :-----------|
| data  | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext  | extension to be used for dest files. |
Option Description
data path to data files to supply the data that will be passed into templates.
engine engine to be used for processing templates. Handlebars is the default.
ext extension to be used for dest files.

Выравнивание по правому краю.

| Option | Description |
| ------:| -----------:|
| data  | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext  | extension to be used for dest files. |
Option Description
data path to data files to supply the data that will be passed into templates.
engine engine to be used for processing templates. Handlebars is the default.
ext extension to be used for dest files.

Код

Вставлять его можно как внутрь строк, так и отдельными блоками. Для соответствующей разметки используют грависы или обратные тики (на букве Ё). Инлайн-код выделяют одиночными символами, а блоки – тройными.

Простой инлайн-код: print("Hello, World!")

`print("Hello, World!")`

Если внутри кода есть апостроф, то код надо обрамить двойными апострофами: There is a literal backtick (`) here.

``There is a literal backtick (`) here.``

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

Код на Python:

```python

код

```

Итог:

x = int(input())
if x > 0:
  print(x)
else:
  print(-x)

Код на JavaScript:

let greeting1 = 'Father!';
console.log(greeting1);
let greeting2 = 'Mother!';
console.log(greeting2);

Код на PHP:

include('Parsedown.php');
$filename = 'test.md';
$text = file_get_contents($filename);
$Parsedown = new Parsedown();
$Parsedown->setSafeMode(true);
echo $Parsedown->text($text);

Экранирование Для экранирования служебных символов маркдауна нужно использовать обратный слеш \

Дополнительные элементы Обратный слеш Может употребляться в Markdown перед специальными символами для того, чтобы они воспринимались в их буквальном (а не служебном) значении. Полный список данных символов приводится ниже:

«\» - слеш;

«`» - обратный апостроф;

«*» - звездочка;

«_» - символ подчеркивания;

«{}» - фигурные скобки;

«[]» - квадратные скобки;

«()» - круглые скобки;

«#» - символ решетки;

«+» - плюс;

«-» - минус (дефис);

«.» – точка;

«!» - восклицательный знак.

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

http://example.com/ В результате на экран выводится следующее: http://example.com/

Автоматическая ссылка на адрес электронной почты в Markdown выглядит следующим образом

address@example.com В результате на экран выводится следующее: address@example.com

Специальные символы HTML В языке HTML существует два символа, требующих специального рассмотрения: это символы («<») и («&»). Левая угловая скобка используется как начало тэга; амперсанды применяются для обозначения специального символа HTML. Для того чтобы использовать эти символы в их буквальном смысле, необходимо заменить их элементами HTML, а именно < и & соответственно. При использовании Markdown подобных действий совершать не нужно. Он позволяет использовать эти символы в исходном виде. В случае если амперсанд используется как часть спецсимвола HTML, он останется неизменным. В противном случае Markdown преобразует его в &.

HTML В любой момент можно вставить кусок html и не париться.

Тег. Внутри тега markdown **игнорируется**.

В любой момент можно вставить кусок html и не париться.

Тег. Внутри тега markdown игнорируется.

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

Буря мглою небо кроет, Вихри снежные крутя;

«Зимний вечер», А.С.Пушкин

Закомментируйте текст

[comment]: <> (This is a comment, it will not be included)
[comment]: <> (in the output file unless you use it in)
[comment]: <> (a reference style link.)
[//]: <> (This is also a comment.)
[//]: # (This may be the most platform independent comment)

ParsedownExtra

Расширение Parsedown, которое добавляет расширенные возможности Markdown.

Специальные атрибуты

Header 1 {#header1}
========

## Header 2 ## {#header2}

## The Site ## {.main}

## The Site ## {.main .shine #the-site}

[link](http://parsedown.org) {.primary #link .upper-case}

![logo](/md.png) {#logo .big}

Результат: 

<h1 id="header1">Header 1</h1>
<h2 id="header2">Header 2</h2>
<h2 class="main">The Site</h2>
<h2 id="the-site" class="main shine">The Site</h2>
<p><a href="http://parsedown.org" id="link" class="primary upper-case">link</a></p>
<p><img src="/md.png" alt="logo" id="logo" class="big" /></p>

Внутри разметки

<div class="example" markdown="1">
_markdown_

This is another paragraph. It contains <em>inline markup</em>.
<div>
_no markdown_
</div>
</div>

---

<div markdown="1">
_markdown_
<div markdown="1">
_markdown_
</div>
</div>

---

<div>
_no markdown_
<div markdown="1">
_markdown_
</div>
</div>

---

<div markdown="0">
_no markdown_
</div>

Результат: 

<div class="example">
<p><em>markdown</em></p>
<p>This is another paragraph. It contains <em>inline markup</em>.</p>
<div>
_no markdown_
</div>
</div>
<hr />
<div>
<p><em>markdown</em></p>
<div>
<p><em>markdown</em></p>
</div>
</div>
<hr />
<div>
_no markdown_
<div>
<p><em>markdown</em></p>
</div>
</div>
<hr />
<div markdown="0">
_no markdown_
</div>

Сноски

first [^1] second [^2].

[^1]: one
[^2]: two

first [^a] second [^b].

[^a]: one
[^b]: two

second time [^1]

Результат: 

<p>first <sup id="fnref1:1"><a href="#fn:1" class="footnote-ref">1</a></sup> second <sup id="fnref1:2"><a href="#fn:2" class="footnote-ref">2</a></sup>.</p>
<p>first <sup id="fnref1:a"><a href="#fn:a" class="footnote-ref">3</a></sup> second <sup id="fnref1:b"><a href="#fn:b" class="footnote-ref">4</a></sup>.</p>
<p>second time <sup id="fnref2:1"><a href="#fn:1" class="footnote-ref">1</a></sup></p>
<div class="footnotes">
<hr />
<ol>
<li id="fn:1">
<p>one&#160;<a href="#fnref1:1" rev="footnote" class="footnote-backref">&#8617;</a> <a href="#fnref2:1" rev="footnote" class="footnote-backref">&#8617;</a></p>
</li>
<li id="fn:2">
<p>two&#160;<a href="#fnref1:2" rev="footnote" class="footnote-backref">&#8617;</a></p>
</li>
<li id="fn:a">
<p>one&#160;<a href="#fnref1:a" rev="footnote" class="footnote-backref">&#8617;</a></p>
</li>
<li id="fn:b">
<p>two&#160;<a href="#fnref1:b" rev="footnote" class="footnote-backref">&#8617;</a></p>
</li>
</ol>
</div>

Объединение сносок

footnote [^1] and another one [^2]

[^1]: line 1
   line 2

  > quote

  another paragraph

[^2]:
  paragraph

  another paragraph

Результат: 

<p>footnote <sup id="fnref1:1"><a href="#fn:1" class="footnote-ref">1</a></sup> and another one <sup id="fnref1:2"><a href="#fn:2" class="footnote-ref">2</a></sup></p>
<div class="footnotes">
<hr />
<ol>
<li id="fn:1">
<p>line 1
line 2</p>
<blockquote>
<p>quote</p>
</blockquote>
<p>another paragraph&#160;<a href="#fnref1:1" rev="footnote" class="footnote-backref">&#8617;</a></p>
</li>
<li id="fn:2">
<p>paragraph</p>
<p>another paragraph&#160;<a href="#fnref1:2" rev="footnote" class="footnote-backref">&#8617;</a></p>
</li>
</ol>
</div>

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

Term 1
:  one
:  two
  extra line

Term 2

:  lazy
line

:  multiple

  paragraphs

:  nested

    code block

  > quote
  > block

Результат:

Term 1
one
two extra line
Term 2

lazy line

multiple

paragraphs

nested

code block

quote block
<dl>
<dt>Term 1</dt>
<dd>one</dd>
<dd>two
extra line</dd>
<dt>Term 2</dt>
<dd>
<p>lazy
line</p>
</dd>
<dd>
<p>multiple</p>
<p>paragraphs</p>
</dd>
<dd>
<p>nested</p>
<pre><code>code block</code></pre>
<blockquote>
<p>quote
block</p>
</blockquote>
</dd>
</dl>
На этой странице