Настоящий обновленный документ предназначен для ознакомления пользователя с функциональными возможностями языка разметки Markdown. Markdown – это облегченный язык разметки, который является инструментом преобразования кода в HTML. Главной особенностью данного языка является максимально простой синтаксис, который служит для упрощения написания и чтения кода разметки, что, в свою очередь, позволяет легко его корректировать. Теперь рассмотрим более подробно функции языка разметки Markdown.
Markdown не является заменой HTML. Синтаксис Markdown достаточно ограничен, и соответствует лишь небольшому подмножеству элементов HTML.
- Пустая строка
- Перенос строки
- Разделители
- Заголовки
- Блоки кода
- Подсветка кода
- Цитаты
- Списки
- Таблицы
- Ссылки
- Специальные символы
- HTML внутри GFM и наоборот
- Изображение и видео
- Нововведение GFM
- Больше информации
- [ Пустая строка ] ↑
↑
(Заметка)
Для того, чтобы создать параграф с использованием синтаксиса языка Markdown, достаточно отделить строки текста одной (или более) пустой строкой (пустой считается всякая строка, которая не содержит в себе ничего, кроме пробелов и символов табуляции).
Что бы получить отступ в виде пустой строки, необходимо разделить части текста всего лишь пустой строкой
пример 1 ↷
тут находиться текст написанный в два строки без привычной разделяющий пустой строки
тут находиться текст написанный в два строки без привычной разделяющий пустой строки
пример 1 результат ↷
тут находиться текст написанный в два строки без привычной разделяющий пустой строки
тут находиться текст написанный в два строки без привычной разделяющий пустой строки
пример 1.1 ↷
тут находиться текст написанный в два строки с разделяющей пустой строкой
тут находиться текст написанный в два строки с разделяющей пустой строкой
пример 1.1 результат ↷
тут находиться текст написанный в два строки с разделяющей пустой строкой
тут находиться текст написанный в два строки с разделяющей пустой строкой
- [ Перенос строки ] ↑ ↑
(Заметка)
Для того, чтобы вставить видимый перенос строки используйте элемент <br/>
или окончите строку двумя пробелами и нажатием клавиши перевода строки «Enter». Многие элементы синтаксиса Markdown выглядят и работают гораздо лучше в случае, когда их форматируют с помощью «жесткого перевода строк» (разделение строк, осуществленное самим пользователем, а не программой автоматически). К таким элементам относятся цитаты, списки и пр. В "блоках кода" не обязательно использовать 2-а пробела, можно ограничиться привычным способом, просто сразу использую клавишу «Enter»
Чтобы перейти на следующую строку используй не мене 1-го таба или 2-ух пробелов
c последующим нажатием «Enter»
или стандартный тег <br/>
пример 2 ↷
Зимняя ночь
Мело, мело по всей земле
Во все пределы.
Свеча горела на столе,
Свеча горела.
Борис Пастернак ©
- [ Разделитель ] ↑ ↑
(Заметка)
Для того чтобы создать горизонтальную линию с использованием синтаксиса языка Markdown, необходимо поместить три (или более) дефиса или звездочки на отдельной строке текста. Между ними возможно располагать пробелы. При использовании данного инструмента важно помнить, что после первой части текста и перед второй необходимо оставлять пустую строку. Данное правило необходимо соблюдать только при использовании дефисов. Если его не соблюдать, на экран будет выведен заголовок второго уровня и строка обычного текста. При использовании символа звездочки данным правилом можно пренебречь.
Что бы получить разделяющую линию аналогичную тегу <hr/> используем одноименный тег, *** или ---
пример 3 ↷
***
---
<hr/>
пример 3 результат ↷
- [ Заголовки ] ↑ ↑
(Заметка)
Язык разметки Markdown поддерживает 2 стиля обозначения заголовков: подчеркивание и выделение символом («#»). Выделение заголовков с помощью подчеркивания производится знаками равенства («=») в случае, если заголовок первого уровня, и дефисами («-») в случае, если заголовок второго уровня. Количество знаков подчеркивания не ограничивается. При выделении заголовков с помощью символа («#») используется от одного до шести данных символов, которые устанавливаются в начале строки (перед заголовком). В данном случае количество символов соответствует уровню заголовка. Кроме того, заголовок возможно снабдить закрывающимися символами («#»), хотя это и не является обязательным. Количество закрывающихся символов не обязано соответствовать количеству начальных символов. Уровень заголовка определяется по количеству начальных символов.
Заголовки первого и второго уровней, выполненные с помощью подчеркивания.
Заголовок можно создать 2-мя способами подчеркивая и выделяя
с помощью символов # и многократного - или =
пример 4 ↷
Заголовок1 =
=========
Заголовок2 -
----------
# Заголовок3.1 #1 (Всегда подчеркивается тонкой горизонтальной чертой)
## Заголовок4.2 ##2 (Всегда подчеркивается тонкой горизонтальной чертой)
### Заголовок5.3 ###3 LEVEL
#### Заголовок6.4 ####4 LEVEL
##### Заголовок7.5 #####5 LEVEL
###### Заголовок8.6 ######6 LEVEL (минимальный)
####### Заголовок8.7 #######7 Level (ошибка, так-как всего 6 тегов h ((h1-h6)) в html )
пример 4 результат ↷
####### Заголвок8.7 #######7 (Ошибка) size: 16px
- [ Блоки кода ] ↑ ↑
(Заметка)
Отформатированные блоки кода используются в случае необходимости процитировать исходный код программ или разметки. Для создания блока кода в языке Markdown необходимо каждую строку параграфа начинать с отступа, состоящего из четырех пробелов или одного символа табуляции.
Блок кода продолжается до тех пор, пока не встретится строка без отступа (или конец текста). Внутри блока кода амперсанды («&») и угловые скобки («<» и «>») автоматически преобразуются в элементы HTML разметки. Кроме того, следует отметить, что внутри блоков кода обычный синтаксис Markdown не обрабатывается.
Что бы создать такой блок нужно начинать с новой строки используя минимум 4 пробела или один символ табуляции
пример 5 ↷
это написано в "блоке кода"
тут пробелами можно делать необходимые отступы
в данных блоках не действует магия MarkDown
данные
символы
не обрабатываются <> & * ! + - и т.д.
и даже ссылки [пример](http://example.com)
пример 5.1 ↷
``Если внутри кода есть апостроф, его обрамляют двойными апострофами: A small piece using (`) an apostrophe.``
пример 5.1 результат ↷
Если внутри кода есть апостроф, его обрамляют двойными апострофами: A small piece using (`) an apostrophe.
- [ Подсветка кода ] ↑ ↑
(Заметка)
Блоки кода в GitHub являются частью спецификации Markdown, но подсветка синтаксиса не является ее частью, поэтому рендеры, такие как Github и Markdown Here, поддерживают подсветку синтаксиса highlightJS. В зависимости от указанного языка в специально конструкции состоящей из трёх подряд обратных кавычек ```указать язык синтаксис подсветки будет меняться, количество поддерживаемых языков исчисляется десятками с перечнем которых можно ознакомиться на highlightjs.org.
Создавая блок с подсветкой синтаксиса сперва указывает язык ```Java➝ перевод на новую строку с "Enter" ➝
конструкцию кода ➝ закрыть с новой строки обратными кавычками ```
пример 6 ↷
```JavaScript
function fancyAlert(arg) {
if(arg) {
$.facebox({div:'#JavaScript syntax highlighting'})
}
}
```
пример 6 результат ↷
function fancyAlert(arg) {
if(arg) {
$.facebox({div:'#JavaScript syntax highlighting'})
}
}пример 6.1 ↷
```Python
s = "Python syntax highlighting"
print s
```
пример 6.1 результат ↷
s = "Python syntax highlighting"
print sпример 6.2 ↷
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MarkDown hilightjs</title>
</head>
<body>
<div class="main-wrapper">
<div class="main">
<p>Параграф с номером 1</p>
<p>Параграф с номером 2</p>
<p>Параграф с номером 3</p>
<p>Параграф с номером 4</p>
<p>Параграф с номером 5</p>
</div>
</div>
</body>
</html>
```
пример 6.2 результат ↷
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MarkDown hilightjs</title>
</head>
<body>
<div class="main-wrapper">
<div class="main">
<p>Параграф с номером 1</p>
<p>Параграф с номером 2</p>
<p>Параграф с номером 3</p>
<p>Параграф с номером 4</p>
<p>Параграф с номером 5</p>
</div>
</div>
</body>
</html>пример 6.3 ↷
```css
#css-style {
font-family: Lato, Arial, sans-serif;
font-size: 25px;
letter-spacing: 3px;
color: #d47e7e;
position: absolute;
border: none;
background: none;
}
```
пример 6.3 результат ↷
#css-style {
font-family: Lato, Arial, sans-serif;
font-size: 25px;
letter-spacing: 3px;
color: #d47e7e;
position: absolute;
border: none;
background: none;
}пример 6.4 ↷
```Java
package l2f.java.syntax;
public abstract class L2Char extends L2Object {
public static final Short ERROR = 0x0001;
public void moveTo(int x, int y, int z) {
_ai = null;
log("Should not be called");
if (1 > 5) { // wtf!?
return;
}
}
}
```
пример 6.4 результат ↷
package l2f.java.syntax;
public abstract class L2Char extends L2Object {
public static final Short ERROR = 0x0001;
public void moveTo(int x, int y, int z) {
_ai = null;
log("Should not be called");
if (1 > 5) { // wtf!?
return;
}
}
}
- [ Цитаты ] ↑ ↑
(Заметка)
Для обозначения цитат в языке MarkDown используется знак «больше» («>»). Его можно вставлять как перед каждой строкой цитаты, так и только перед первой строкой параграфа. Также синтаксис MarkDown позволяет создавать вложенные цитаты (цитаты внутри цитат). Для их разметки используются дополнительные уровни знаков цитирования, например это («>>») уровень два. Допустимо символы цитирования писать слитно («>>>>») - четвертый уровень, так же как возможно не разделять пробелом между символом и текстом начала цитаты > >Цитата без разделяющего пробела. Цитаты в Markdown могут содержать всевозможные элементы разметки и не могут превышать 15 уровень вложенности.
Создать с помощью знака «>» а для вложенности используется тот же знак больше, количество повторений данного знака равно уровню вложенности.
пример 7 ↷
> Цитата первого уровня, вида ">"
> > Вложенная цитата второго уровня, вида "> >"
>>> Вложенная цитата третьего уровня, без пробелов, вида ">>>"
Для разрыва, нужен разделитель из целой пустой строки
> > > > >Ecли у вас есть яблоко и у меня есть яблоко, и еcли мы обмениваемся
этими яблоками, тo у вас и у меня остается по одному яблоку. А если у вас есть идея и
у мeня ecть идeя и мы обмениваемся идеями, то у каждого
из нас будет по две идеи. GB ©
>>>>>Цитата без пробелов между символами цитирования уровня 5, вида ">>>>>"
> Первый уровень цитирования
>> Второй уровень цитирования
>>> Третий уровень цитирования
>
> Первый уровень цитирования
пример 7 результат ↷
Цитата первого уровня, вида ">"
Вложенная цитата второго уровня, вида "> >"
Вложенная цитата третьего уровня, без пробелов, вида ">>>"
Для разрыва, нужен разделитель из целой пустой строки
Ecли у вас есть яблоко и у меня есть яблоко, и еcли мы обмениваемся этими яблоками, тo у вас и у меня остается по одному яблоку. А если у вас есть идея и у мeня ecть идeя и мы обмениваемся идеями, то у каждого из нас будет по две идеи. GB ©
Цитата без пробелов между символами цитирования уровня 5, вида ">>>>>"
Первый уровень цитирования
Второй уровень цитирования
Третий уровень цитирования
Первый уровень цитирования
- [ Списки ] ↑ ↑
(Заметка)
Markdown поддерживает упорядоченные (нумерованные) и неупорядоченные (ненумерованные) списки. Для формирования неупорядоченный списков используются такие маркеры, как звездочки, плюсы и дефисы. Все перечисленные маркеры могут использоваться взаимозаменяемо. Для формирования упорядоченных списков в качестве маркеров используются числа с точкой. Важной особенностью в данном случае является то, что сами номера, с помощью которых формируется список, не важны, так как они не оказывают влияния на выходной HTML код. Как бы ни нумеровал пользователь список, на выходе он в любом случае будет иметь упорядоченный список, начинающийся с единицы (1, 2, 3…). Эту особенность стоит учитывать в том случае, когда необходимо использовать порядковые номера элементов в списке, чтобы они соответствовали номерам, получающимся в HTML. Упорядоченные списки всегда следует начинать с единицы, но можно и с 0 тогда первый элемент списка будет 0. Маркеры списков обычно начинаются с начала строки, однако они могут быть сдвинуты, но не более чем на 3 пробела иначе попадут по форматирование. За маркером должен следовать пробел, либо символ табуляции. При необходимости в список можно вставить цитату. В этом случае обозначения цитирования ( «>» ) нужно писать с отступом. Для создания вложенности используют 1 таб или 4 пробела GFM позволяет смешивать упорядоченный и не упорядоченный список, при первом максимальная величина элементов 49(xlix) после идет расчет с римской единицы.
Создать список можно с помощью символов + - * и N. где N - любая цифра. Допустимо комбинирование одновременно разных символов * - + но при каждой смене типа символа будут появляться небольшие отступы между строками списка, вложенность создается TABом или 4 пробелами.
КАЖДЫЙ ПЕРВЫЙ элемент КАЖДОГО ВЛОЖЕННОГО уровня
УПОРЯДОЧЕННОГО списка ДОЛЖЕН начинаться с 1. иначе список ПО РУШИТЬСЯ
пример 8 ↷
* Элемент 1*
* Элемент 2*
* Элемент 3*
+ Элемент 1+
+ Элемент 2+
+ Элемент 3+
- Элемент 1-
- Элемент 2-
- Элемент 3-
Заметьте в блоках кода нет разрыва строк между типами символов
пример 8 результат ↷
- Элемент 1*
- Элемент 2*
- Элемент 3*
- Элемент 1+
- Элемент 2+
- Элемент 3+
- Элемент 1-
- Элемент 2-
- Элемент 3-
пример 8.1 ↷
* Элемент 1*
+ Элемент 1+
- Элемент 1-
* Элемент 2*
+ Элемент 2+
- Элемент 2-
* Элемент 3*
+ Элемент 3+
- Элемент 3-
Заметьте в блоках кода нет разрыва строк между типами символов
пример 8.1 результат ↷
- Элемент 1*
- Элемент 1+
- Элемент 1-
- Элемент 2*
- Элемент 2+
- Элемент 2-
- Элемент 3*
- Элемент 3+
- Элемент 3-
пример 8.2 ↷
0. Элемент 1
0. Элемент 2
0. Элемент 3
0. Элемент 4
0. Элемент 5
При старте с нуля будет как не странно начало с 0
пример 8.2 результат ↷
- Элемент 1
- Элемент 2
- Элемент 3
- Элемент 4
- Элемент 5
При старте с нуля будет как не странно начало с 0
пример 8.3 ↷
1. Элемент 1
0. Элемент 2
0. Элемент 3
0. Элемент 4
0. Элемент 5
Это поведение можно поменять если принудительно начинать с 1
пример 8.3 результат ↷
- Элемент 1
- Элемент 2
- Элемент 3
- Элемент 4
- Элемент 5
Это поведение можно поменять если принудительно начинать с 1
пример 8.4 ↷
0. Элемент 1
3. Элемент 2
7. Элемент 3
9. Элемент 4
02. Элемент 5
Порядок после 0 не имеет значения
пример 8.4 результат ↷
- Элемент 1
- Элемент 2
- Элемент 3
- Элемент 4
- Элемент 5
Порядок после 0 не имеет значения
пример 8.5 ↷
+ Element 1+
+ Element 2+
+ Element 2.1+
+ Element 2.2+
+ Element 2.2.1+
+ Element 2.2.2+
+ Element child 2.2.2.1+
+ Element child 2.2.2.2+
+ Element child 2.2.2.3+
+ Element child 2.2.2.4+
+ Element child 2.2.2.5+
+ Element level5 2.2.2.5.1+
+ Element level5 2.2.2.5.2+
пример 8.5 результат ↷
- Element 1+
- Element 2+
- Element 2.1+
- Element 2.2+
- Element 2.2.1+
- Element 2.2.2+
- Element child 2.2.2.1+
- Element child 2.2.2.2+
- Element child 2.2.2.3+
- Element child 2.2.2.4+
- Element child 2.2.2.5+
- Element level5 2.2.2.5.1+
- Element level5 2.2.2.5.2+
(Заметка)
Вложенные элементы списка допустимо размечать разными типами символов одновременно, но есть разница из-за которой высоте между строками одного уровня при использовании разных типов символов будет на 4px уже чем при однотипных, в редакторе каждый 3 уровень будет отображаться красным цветом для визуального разделения.
пример 8.6 ↷
+ Element 1+
+ Element 2+
+ Element 2.1+
+ Element 2.2+
+ Element 2.2.1+
+ Element 2.2.2+
+ Element child 2.2.2.1+
+ Element child 2.2.2.2+
+ Element child 2.2.2.3+
+ Element child 2.2.2.4+
+ Element child 2.2.2.5+
+ Element LEVEL5 2.2.2.5.1+
+ Element LEVEL5 2.2.2.5.2+ here ↓
* Element TYPE*1 2.2.2.5.3* here ↑
* Element TYPE*2 2.2.2.5.4*
* Element TYPE*3 2.2.2.5.5*
* element TYPE*4 2.2.2.5.6*
* Element TYPE*5 2.2.2.5.7*
* element TYPE*6 2.2.2.5.8* here ↓
- element TYPE-1 2.2.2.5.9- here ↑
- element TYPE-2 2.2.2.5.10-
- element TYPE-3 2.2.2.5.11-
- element TYPE-4 2.2.2.5.12-
* Element level6 2.2.2.5.12.1*
* Element level6 2.2.2.5.12.2*
* Element level6 2.2.2.5.12.3*
+ Element level6 2.2.2.5.12.3.1+
+ Element level6 2.2.2.5.12.3.2+
+ Element level6 2.2.2.5.12.3.3+
пример 8.6 результат ↷
- Element 1+
- Element 2+
- Element 2.1+
- Element 2.2+
- Element 2.2.1+
- Element 2.2.2+
- Element child 2.2.2.1+
- Element child 2.2.2.2+
- Element child 2.2.2.3+
- Element child 2.2.2.4+
- Element child 2.2.2.5+
- Element LEVEL5 2.2.2.5.1+
- Element LEVEL5 2.2.2.5.2+ here ↓
- Element TYPE1 2.2.2.5.3 here ↑
- Element TYPE2 2.2.2.5.4
- Element TYPE3 2.2.2.5.5
- element TYPE4 2.2.2.5.6
- Element TYPE5 2.2.2.5.7
- element TYPE6 2.2.2.5.8 here ↓
- element TYPE-1 2.2.2.5.9- here ↑
- element TYPE-2 2.2.2.5.10-
- element TYPE-3 2.2.2.5.11-
- element TYPE-4 2.2.2.5.12-
- Element level6 2.2.2.5.12.1*
- Element level6 2.2.2.5.12.2*
- Element level6 2.2.2.5.12.3*
- Element level6 2.2.2.5.12.3.1+
- Element level6 2.2.2.5.12.3.2+
- Element level6 2.2.2.5.12.3.3+
пример 8.7 ↷
0. Элемент 1
0. Элемент 2
0. Элемент 3
1. list 3.1
2. list 3.2
3. list 3.3
55. list 3.4
0. list 3.5
77. list 3.6
1. list 3.7
2. list 3.8
3. list 3.9
555. list 3.10
0. list 3.11
1. OrderL 3.11.1
1. OrderL 3.11.2
1. OrderL 3.11.3
1. OrderL 3.11.4
1. OrderL 3.11.5
1. OrderL 3.11.6
1. OrderL4 3.11.6.1
1. OrderL4 3.11.6.2
1. OrderL4 3.11.6.3
1. OrderL4 3.11.6.4
1. OrderL4 3.11.6.5
1. OrderL4 3.11.6.6
пример 8.7 результат ↷
- Элемент 1
- Элемент 2
- Элемент 3
- list 3.1
- list 3.2
- list 3.3
- list 3.4
- list 3.5
- list 3.6
- list 3.7
- list 3.8
- list 3.9
- list 3.10
- list 3.11
- OrderL 3.11.1
- OrderL 3.11.2
- OrderL 3.11.3
- OrderL 3.11.4
- OrderL 3.11.5
- OrderL 3.11.6
- OrderL4 3.11.6.1
- OrderL4 3.11.6.2
- OrderL4 3.11.6.3
- OrderL4 3.11.6.4
- OrderL4 3.11.6.5
- OrderL4 3.11.6.6
(Заметка)
Виды маркеров разделяются на три типа для каждого из типа списков (Ul / Ol) для Unordered list на первом уровне идет круг на втором полый круг на третьем квадрат, для Ordered list на первом уровне идут цифры на втором римские цифры на третьем латинские буквы, но для обоих типов все последующие уровни будут отображаться третьим уровнем в зависимости от типа списка.
каждый 1-ый элемент каждого вложенного уровня Ul должен начинаться с 1. иначе список сломается
пример 8.8 ↷
555. Element 1
8. Element 2
+ Element 2.1+ [важно]
+ Element 2.2+
1. Element 2.2.1 [важно]
33. Element 2.2.2
+ Element child 2.2.2.1+ [важно]
+ Element child 2.2.2.2+
+ Element child 2.2.2.3+
+ Element child 2.2.2.4+
+ Element child 2.2.2.5+
1. Element LEVEL5 2.2.2.5.1 [важно]
7. Element LEVEL5 2.2.2.5.2 here ↓
8. Element TYPEN 2.2.2.5.3 here ↑
9. Element TYPEN 2.2.2.5.4
* Element TYPE*1 2.2.2.5.5*
* element TYPE*2 2.2.2.5.6*
* Element TYPE*3 2.2.2.5.7*
77. element TYPE*N 2.2.2.5.8 here ↓
- element TYPE-1 2.2.2.5.9- here ↑
- element TYPE-2 2.2.2.5.10-
6. element TYPE-N 2.2.2.5.11
- element TYPE-3 2.2.2.5.12-
* Element level6 2.2.2.5.12.1* [важно]
1. Element level6 2.2.2.5.12.2
2. Element level6 2.2.2.5.12.3
+ Element level6 2.2.2.5.12.3.1+ [важно]
+ Element level6 2.2.2.5.12.3.2+
+ Element level6 2.2.2.5.12.3.3+
пример 8.8 результат ↷
- Element 1
- Element 2
- Element 2.1+ [важно]
- Element 2.2+
- Element 2.2.1 [важно]
- Element 2.2.2
- Element child 2.2.2.1+ [важно]
- Element child 2.2.2.2+
- Element child 2.2.2.3+
- Element child 2.2.2.4+
- Element child 2.2.2.5+
- Element LEVEL5 2.2.2.5.1 [важно]
- Element LEVEL5 2.2.2.5.2 here ↓
- Element TYPEN 2.2.2.5.3 here ↑
- Element TYPEN 2.2.2.5.4
- Element TYPE1 2.2.2.5.5
- element TYPE2 2.2.2.5.6
- Element TYPE3 2.2.2.5.7
- element TYPEN 2.2.2.5.8 here ↓
- element TYPE-1 2.2.2.5.9- here ↑
- element TYPE-2 2.2.2.5.10-
- element TYPEN 2.2.2.5.11
- element TYPE-3 2.2.2.5.12-
- Element level6 2.2.2.5.12.1* [важно]
- Element level6 2.2.2.5.12.2
- Element level6 2.2.2.5.12.3
- Element level6 2.2.2.5.12.3.1+ [важно]
- Element level6 2.2.2.5.12.3.2+
- Element level6 2.2.2.5.12.3.3+
пример 8.9 ↷
1. Первая строчка
2. Вторая строчка
3. Третья строчка
1. Не упорядоченный список первая строчка, 2-ого уровня 3.1
2. Не упорядоченный список second строчка, 2-ого уровня 3.2
> Первая строка цитаты 3.3
> Вторая строка цитаты 3.4
> Третья строка цитаты 3.5
4. Четвертая строчка после цитаты 1-ого уроня
1. Первая строка второго уровня вложенности 4.1
> Цитата №2 находящаяся на 2 уровне, Для меня не важно стать самым богатым человеком на кладбище. Ложиться спать и думать, что сегодня ты совершил настоящее чудо, — вот что для меня важно. The Wall Street Journal, 1993 г. SJ ©
1. Первая строка второго уровня вложенности 4.2
1. Первая строка третьего уровня вложенности 4.2.1
1. четвертый уровень 4.2.1.1
> Образование в сфере компьютерных технологий точно так же не сделает из вас отличного программиста, как изучение кистей и красок не сделает вас прекрасным художником. ER ©
2. Четвертый уровень 4.2.1.2
> Чудесно праздновать свой успех, но более важным является умение выносить уроки из своих провалов. BG ©
пример 8.9 результат ↷
- Первая строчка
- Вторая строчка
- Третья строчка
- Не упорядоченный список первая строчка, 2-ого уровня 3.1
- Не упорядоченный список second строчка, 2-ого уровня 3.2
Первая строка цитаты 3.3 Вторая строка цитаты 3.4 Третья строка цитаты 3.5
- Четвертая строчка после цитаты 1-ого уроня
- Первая строка второго уровня вложенности 4.1
Цитата №2 находящаяся на 2 уровне, Для меня не важно стать самым богатым человеком на кладбище. Ложиться спать и думать, что сегодня ты совершил настоящее чудо, — вот что для меня важно. The Wall Street Journal, 1993 г. SJ ©
- Первая строка второго уровня вложенности 4.2
- Первая строка третьего уровня вложенности 4.2.1
- четвертый уровень 4.2.1.1
Образование в сфере компьютерных технологий точно так же не сделает из вас отличного программиста, как изучение кистей и красок не сделает вас прекрасным художником. ER ©
- Четвертый уровень 4.2.1.2
Чудесно праздновать свой успех, но более важным является умение выносить уроки из своих провалов. BG ©
- Первая строка третьего уровня вложенности 4.2.1
пример 8.10 ↷
+ еСписка1, что бы добавить "Блок кода" на тот же уровень списка
+ еСписка2, нужно после элемента списка
+ еСписка2.1, добавить целую пустую строку
+ еСписка3, и следующую строку на которой уже будет ↷
Находиться сам "Блок кода" отделить восемью пробелами или двумя табами
пример 8.10 результат ↷
-
еСписка1, что бы добавить "Блок кода" на тот же уровень списка
-
еСписка2, нужно после элемента списка
- еСписка2.1, добавить целую пустую строку
-
еСписка3, и следующую строку на которой уже будет ↷
Находиться сам "Блок кода" отделить восемью пробелами или двумя табами
- [ Таблицы ] ↑ ↑
(Заметка)
Таблицы не являются частью основной спецификации Markdown, но они являются частью [GFM] - Github Flavoured Markdown. Внутри таблиц можно использовать ссылки, изображения, наклонный, жирный или зачеркнутый текст, количество заголовков должно = созданный подготовленной структуре (-|-|-). Для создания полосатой таблички используют прямую вертикальную черту " | " и символ тире " - " .
Конструируем простую таблицы:
создаем ЗАГОЛОВКИ разделенные символом " | " подчеркнув их символом(и) тире " ----- "
и разделяя их в нужных местах логически, тем же символом " | "
для выравнивания колонок используется символ " : "
например выравняем 1 колонку по центру, а последнюю в право :----:|----|----:
пример 9 ↷
**Заголовок1** | Заголовок2 |*Заголвоок3*|
-:|-|-|-
**текст1** | ~~Текст2~~ | *Текст3*
пример 9 результат ↷
| Заголовок1 | Заголовок2 | Заголвоок3 | |
|---|---|---|---|
| текст1 | Текст3 |
пример 9.1 ↷
у четвертого|заголовка будет|пустой символ| ← пустой символ
------------|----------------|-------------|-← без него тоже таблица крашнется
1 ячейка | 2 ячейка | 3 ячейка |
пустой | символ | alt 255 |
если 4-ый | заголовок | оставить |
пустым то | таблица будет | сломана |
пример 9.1 результат ↷
| у четвертого | заголовка будет | пустой символ | |
|---|---|---|---|
| 1 ячейка | 2 ячейка | 3 ячейка | |
| пустой | символ | alt 255 | |
| если 4-ый | заголовок | оставить | |
| пустым то | таблица будет | сломана |
пример 9.2 ↷
 Aliance| Horde| Альянс| Орда
:--------:|:---------:|:---------:|:-------:
Human | Orc | Люди | Орки
Gnome | Troll | Гномы | Тролли
Dwarf | Tauren | Дворфы | Таурены
Worgen | Undead | Воргены | Нежить
Draenei | Goblin | Дренеи | Гоблины
Pandaren | Pandaren | Пандарены | Пандарены
Night Elf | Blood Elf | НЭльфы | КЭльфы
пример 9.2 результат ↷
 Aliance |
 Horde |
Альянс |
Орда |
|---|---|---|---|
| Human | Orc | Люди | Орки |
| Gnome | Troll | Гномы | Тролли |
| Dwarf | Tauren | Дворфы | Таурены |
| Worgen | Undead | Воргены | Нежить |
| Draenei | Goblin | Дренеи | Гоблины |
| Pandaren | Pandaren | Пандарены | Пандарены |
| Night Elf | Blood Elf | НЭльфы | КЭльфы |
- [ Ссылки ] ↑ ↑
(Заметка)
В GFM ссылки можно разделить условно на три типа:
- Гиперссылки, с внутренним указанием адреса
[имя ссылки](http://www.wowhead.com/ "Необязательный title") - Гиперссылки, с внешним местом указания адреса (anchor) состоит из двух частей:
первая часть -[имя ссылки][ключевое слово]
вторая часть - которая обязательно должна находиться через одну целую строку
[ключевое слово из первой части]: ссылка_назначения "Необязательный title"
адрес может быть как абсолютный(полный)http://google.com/так и относительный(этой страницы)Issues
или../../marketplace- выйти на 2 уровня назад и зайти на https://github.com/marketplace
у ссылки может быть задано только одно ключевое слово и стоит помнить, что после второй части ссылки не должно идти текст на этой строке, если он есть, то он должен располагаться на следующей строке. - Гипрерссылки, упрощенного порядка, генерируемые при указании полного пути https://github.com/pricing
или при заключения его в угловые скобки скобки<https://www.wikipedia.org/>
в таком же стиле можно указать адрес электронной почты address@gmail.com.
пример 10 ↷
[пример10](http://www.wowhead.com/ "База данных WoW")
пример 10 результат ↷
(Заметка)
Гиперссылки с внешним местом указания имеют не приятную особенность вести себя странно при размещении ключевой фразы СРАЗУ после или до того места где создается ссылка, что бы все работало стабильно их лучше размещать или в самом начале или в конце, места определения ключевого слова [key name]: www.ya.ru не отображаются в исходном коде, название ключевых слов/идентификаторов можно состоять из нескольких слов, невидимого символа alt 255, цифр, знаков пунктуации и они не чувствительны к регистру, по этому
[b]: www.www.com эквивалентно [B]: www.www.com так же нужно знать, что если определены несколько(<1) одинаковых идентификаторов сработает самый первый(верхний) найденный браузером.
пример 10.1 ↷
[bestCSS][Chris Coyier]
определяем ключевые слова
← целая пустая строка
[Chris Coyier]: https://css-tricks.com/ "your title text" ← после title не должно быть ничего
пример 10.1 результат ↷
bestCSS
определяем ключевые слова
пример 10.2 ↷
[codepen]: https://codepen.io/ ← первый, сработает эта ссылка
CodePen is a playground for the front end side of the web.
It's all about inspiration, education, and sharing.
[code^sandbox][codepen]
Need to build a reduced test case to demonstrate and figure out a bug?
CodePen is great for that.
Want to show off your latest creation and get feedback from your peers?
CodePen is great for that.
Want to find examples of a particular design pattern for your project?
CodePen is great for that.
[codepen]: http://www.error.com/ ← второй, не сработает
пример 10.2 результат ↷
CodePen is a playground for the front end side of the web.
It's all about inspiration, education, and sharing.
Need to build a reduced test case to demonstrate and figure out a bug?
CodePen is great for that.
Want to show off your latest creation and get feedback from your peers?
CodePen is great for that.
Want to find examples of a particular design pattern for your project?
CodePen is great for that.
пример 10.3 ↷
[check-WEB-feature][CANiUSE] ← если нет пробелов между именем и id, сработает верно
"Can I use" provides up-to-date browser support.
[check-WEB-feature] [CANiUSE] ← пробел между именем и id, рушит логику и имя меняется id
"Can I use" provides up-to-date mobile browser support.
[caniuse]:http://caniuse.com/ ← регистр не играет роли, как и отсутствие пробела между []:http
пример 10.3 результат ↷
"Can I use" provides up-to-date browser support tables for support of front-end web on desktop and mob web browsers.
[check-WEB-feature] canIuse
"Can I use" provides up-to-date browser support tables for support of front-end web on desktop and mob web browsers.
(Заметка)
Вынос длинных урлов из предложения способствует сохранению читабельности исходника, а сноски можно располагать в любом месте документа, помня при этом о потоке, сработает первая найденная сноска при наличии нескольких с одинаковыми id.
пример 10.4 ↷
А вот [пример][№1] [нескольких][#2] [ссылок][id] с разметкой как у сносок.
Сработает и [короткая запись][] без указания id.
[№1]: http://example.com/ "Текст описание при наведении"
[#2]: http://example.com/some
[id]: http://example.com/links (Simple title in parentheses)
[короткая запись]: http://example.com/short
пример 10.4 результат ↷
А вот пример нескольких ссылок с разметкой как у сносок.
Сработает и короткая запись без указания id.
пример 10.5 ↷
[iss-urlname-go][issue] переходим относительно этой страницы
https://github.com/Oxenz/markdown-refreshed/blob/master/README.md
в раздел Issues.
[issue]: ../../issues
пример 10.5 результат ↷
iss-urlname-go переходим относительно этой страницы
https://github.com/Oxenz/markdown-refreshed/blob/master/README.md
в раздел Issues.
(Заметка)
Markdown позволяет также использовать неявно выраженный идентификатор (пустой). В этом случае [][метка] не указывается, вместо неё используется текст гиперссылки, а вторая пара квадратных скобок остаётся пустой [name-url][].
Например, чтобы сделать слово «Example» гиперссылкой, ведущей на сайт http://example.com/ необходимо:
пример 10.6 ↷
[Example][]
[Example]: http://example.com/
пример 10.6 результат ↷
- [ Специальные символы ] ↑ ↑
(Заметка)
В языке HTML существует несколько символов, требующих специального рассмотрения: это символы
"greater-than sign («>»)", "less-than sign («<»)" и "ampersand («&»)".
Угловые скобки используется как начало и завершение тэга, а амперсанды применяются для обозначения специальных символов в HTML.
Для того чтобы использовать эти символы в их буквальном смысле, необходимо заменить их элементами HTML, а именно < и & соответственно. При использовании Markdown подобных действий совершать не нужно. Он позволяет использовать эти символы в исходном виде. В случае если амперсанд используется как часть спецсимвола HTML, он останется неизменным. В противном случае Markdown преобразует его в &.
Используя обратный слеш « \ » можно экранировать спецсимволы, таким образом символы будут восприниматься в буквальном а не служебном состоянии, все ниже приведенные символы экранированы по типу \` \* \_ \# за исключением списка "не нуждающихся".
` апостроф;
* звездочка;
_ символ подчеркивания;
# символ решетки;
+ плюс;
- минус (дефис);
\ слэш;
! восклицательный знак;
| вертикальная черта;
[] квадратные скобки;
{} фигурные скобки;
() круглые скобки;
— длинное тире;
. точка;
, запятая;
- [ HTML внутри GFM и наоборот ] ↑ ↑
(Заметка)
MarkDown позволяет смешивать разметку с HTML, но не всю, например в созданных списках ul или dl синтаксиса GFM не обрабатывается, а вот внутри синаксиса MD большинство тегов HTML работают стабильно.
пример 12 ↷
> Это цитата создана с помощью <a href="https://learn.getgrav.org/content/markdown">MD</a>
в которой используется простой html tag <em>смыслового курсива</em>
пример 12 результат ↷
Это цитата создана с помощью MD
в которой используется простой html tag смыслового курсива
пример 12.1 ↷
<dl>
<dt>Definition list</dt>
<dd>Is `something` ~~people~~ use sometimes.</dd>
<dt>Markdown in HTML</dt>
<dd>Does *not* work **very** well. Use HTML <i>tags</i>.</dd>
</dl>
пример 12.1 результат ↷
- Definition list
- Is `something` ~~people~~ use sometimes.
- Markdown in HTML
- Does *not* work **very** well. Use HTML tags.
пример 12.2 ↷
Создаем простой список
<ul class="don't-work">
<li>Элемент списка 1 без мд</li>
<li>Тут будет ссылка в разметке МД [текст](http://belousovv.ru/markdown_syntax)</li>
<li>Тут будет курсивный и жирный текст выполненные с помощью `***` ***not work :(***</li>
</ul>
пример 12.2 результат ↷
Создаем простой список
- Элемент списка 1 без мд
- Тут будет ссылка в разметке МД [текст](http://belousovv.ru/markdown_syntax)
- Тут будет курсивный и жирный текст выполненные с помощью `***` ***not work :(***
- [ Изображения и видео ] ↑ ↑
(Заметка)
Конструкция создания в GFM изображений очень похоже на создание Ссылок c той лишь разнице, что перед открывающей квадратной скобкой добавляется !восклицательный знак и выглядит это так
 то же самое относиться к изображением типа "сноски", самое обидное, что с помощью синтаксиса MD или GFM не удается задать размеры picture (width_height), изображения добавляется в изначальном размере, по этому за этим нужно следить и пользоваться старым добрый HTML вида <img src="www" width="x" height="x">, что касается видео напрямую его добавить тоже не удаться, но есть обходные пути в примерах ниже.
пример 13 ↷
Изображение без атрибута alt 
пример 13 результат ↷
Изображение без атрибута alt
пример 13.1 ↷
Изображение с атрибутом alt и title 
пример 13.1 результат ↷
Изображение с атрибутом alt и title
пример 13.2 ↷
Изображения "сноски" на которых действуют те же правила, что и на ссылки:
![Картинка][identificator 1]
![Картинка][identificator 2]
![Картинка][identificator 3]
← целая пустая строка
[identificator 1]: http://placehold.it/150x75 'title заключенный в одиночные кавычки'
[identificator 2]: http://placehold.it/150x100 "' ☻ '"
[identificator 3]: http://placehold.it/150x50 "title заключенный в двойные кавычки"
пример 13.2 результат ↷
Изображения "сноски" на которых действуют те же правила, что и на ссылки:
пример 13.3 ↷
Markdown **не позволяет** задать размеры изображения (ширину, высоту)
пример 13.3 результат ↷
Markdown не позволяет задать размеры изображения (ширину, высоту)
пример 13.4 ↷
Изображение обернутое в ссылку:
[](https://www.reddit.com/r/wow/)
пример 13.4 результат ↷
Изображение обернутое в ссылку:
(Заметка)
Напрямую добавить видео тегами <iframe>, <object>, embed... из-за соображений безопасности невозможно, нужно идти по другому пути, добавив заглушку в виде статического изображения или даже динамического gif,apng предварительно обернув их ссылкой, у роликов youtube по умолчанию создается preview из нескольких изображений, доступны они по ссылке такого вида http://img.youtube.com/vi/ТВОЙ_ID_РОЛИКА/0.jpg цифра на конце позволяет выбрать из нескольких вариантов или воспользоваться HTML разметкой вида <a href=""><img src=""></a>
секундочка рекламного альтруизма, есть удобное бесплатное десктопное приложение http://www.screentogif.com/ позволяющее записать видео рабочего стола и в момент превращать его в легковесный .gif
пример 13.5 ↷
Подменяем видео материал изображением, указывая ссылку на видео и изображение
конструкция состоит из объединения `![linkIMG]() + [linkVIDEO]()`
[](http://www.youtube.com/watch?v=SfSYrebXLDE)
пример 13.5 результат ↷
Подменяем видео материал изображением, указывая ссылку на видео и изображение
конструкция состоит из объединения ![linkIMG]() + [linkVIDEO]()
пример 13.6 ↷
Фрагмент видео с изменяемыми размерами встраивания с помощью HTML
<a href="http://www.youtube.com/watch?v=SfSYrebXLDE">
<img src="http://img.youtube.com/vi/SfSYrebXLDE/sddefault.jpg"
alt="accessibility" width="550" height="100"/></a>
пример 13.6 результат ↷
Фрагмент видео с изменяемыми размерами встраивания с помощью HTML
- [ Нововведение GFM ] ↑ ↑
(Заметка)
Ввод символа @name, в комбинации с именем пользователя, уведомит этого человека,
чтобы он пришел и прочитал данный комментарий,
ну и куда без "незаменимых" EMOJI список которых можно посмотреть на www.emoji-cheat-sheet.com
для добавления, имя EMOJI заключают с обеих сторон знаком :двоеточие: :shit:
последней рассмотренной фишкой станет эмуляция "task lists".
пример 14.1 ↷
:fire: :neckbeard: :trollface: :octocat: :e-mail: :date: :gem: :checkered_flag: :ru: :new: :tm:
пример 14.1 результат___ ↷
🔥 
📧 📅 💎 🏁 🇷🇺 🆕 ™️
пример 14.2 ↷
**Don't Work**
- [х] error, использована русская хЭ
-[x] error, not space 1
- [x]error, not space 2
- [] error, not space 3
Work
- [X] use uppercase X
- [x] this is a complete item
- [ ] this is an incomplete item
- [x] @mentions, #refs, [links](), **formatting**, and <del>tags</del> or ~~tilda~~ supported
- [x] list syntax required (any unordered or ordered list supported)
пример 14.2 результат___ ↷
Don't Work
- [х] error, использована русская хЭ
-[x] error, not space 1 - [x]error, not space 2
- [] error, not space 3
Work
- use uppercase X
- this is a complete item
- this is an incomplete item
- @mentions, #refs, links, formatting, and
tagsortildasupported - list syntax required (any unordered or ordered list supported)
Sources of information ↑ ↑
- Embed a YouTube video stackoverflow-quest
- How to embed a video stackoverflow-quest
- Краткое руководство here
- MarkDown Here here
- Markdown doc here
- Github шпаргалка here