SovaWiki

Инструменты пользователя

Инструменты сайта

Вы посетили: • installing_plugins • additional • selectors • psevdoclass • top
html:markdown

Различия

Показаны различия между двумя версиями страницы.

Ссылка на это сравнение

Следующая версия		Предыдущая версия
html:markdown [2022/04/21 20:30] – создано so_v_ahtml:markdown [2026/08/06 08:31] (текущий) – so_v_a
Строка 1: Строка 1:
-MarkDown+<!DOCTYPE markdown> 
 + 
 +# MarkDown 
 + 
 +## Шпаргалка по синтаксису markdown (маркдаун) со всеми самыми популярными тегами 
 + 
 +**Markdown** (маркдаун) — облегчённый язык разметки созданный с целью написания максимально читабельного и удобного для правки текста, но пригодного для преобразования в языки для продвинутых публикаций (HTML, Rich Text и др.).   
 +Ниже будет приведена шпаргалка по синтаксису markdown со всеми самыми популярными тегами маркдаун.   
 + 
 + 
 + **СОДЕРЖАНИЕ** 
 + 
 + * Содержание в виде ссылок по тексту (якоря) 
 + * Якоря в Markdown (маркдаун) 
 + * Тэг читать далее (cut) в Markdown (маркдаун) 
 + * Заголовки 
 + * Списки 
 + * Горизонтальные линии 
 + * Абзацы, параграфы 
 + * Перенос строки 
 + * Курсивное и жирное выделение текста 
 + * Выделение текст или код 
 + * Отмена форматирования 
 + * Цитаты 
 + * Ссылки 
 + * Сноски 
 + * Изображения 
 + * Таблицы 
 + * Спецсимволы 
 + * Списки определений 
 + * Спойлер 
 + * Использование HTML 
 + * Рекомендуемый мной онлайн редактор Markdown 
 + * Рекомендуемый плагин для wordpress 
 + * Официальный сайт Markdown 
 + 
 + 
 +## Содержание в виде ссылок по тексту (якоря) (работает не со всеми плагинами wordpress) 
 + 
 +Маркдаун может генерировать содержание статьи автоматически основываясь на заголовках, при этом якоря создаются также автоматически. В месте вывода содержания укажите тег [TOC]. В результате, вы получите список как сверху 
 + 
 + 
 +## Якоря в Markdown (маркдаун) 
 + 
 +Поместите в нужном месте якорь: `<a name="abcd"></a>`,   
 +и, там где это необходимо, ссылку на этот якорь: `[Текст ссылки](http://example.com/site/#abcd)`. 
 + 
 +## Тэг читать далее (cut) в Markdown (маркдаун) 
 + 
 +Чтобы в маркдауне поставить тэг Читать далее, достаточно в строчке написать `<!--more-->` 
 + 
 + 
 +## Заголовки 
 + 
 +Для того чтобы написать заголовок в Markdown, необходимо использовать знак # (хэш). Если необходимо несколько уровней заголовков, h1 — h6, нужно изменить количество хэшей (#) перед текстом заголовка. 
 +``` 
 +# H1 
 +## H2 
 +### H3 
 +#### H4 
 +##### H5 
 +###### H6   
 +``` 
 + 
 +Альтернативные теги для H1 и H2 (знаки равно или минусы под заголовком + пустая строчка над загаловком): 
 +``` 
 +Альтернативный-H1 
 +====== 
 + 
 +Альтернативный-H2 
 +------ 
 +``` 
 + 
 +# H1 
 +## H2 
 +### H3 
 +#### H4 
 +##### H5 
 +###### H6 
 + 
 +Альтернативные теги для H1 и H2 (знаки равно или минусы под заголовком + пустая строчка над загаловком): 
 + 
 +Альтернативный-H1 
 +====== 
 + 
 +Альтернативный-H2 
 +------ 
 + 
 + 
 +## Списки 
 + 
 +Markdown поддерживает два вида списков: маркированный и нумерованный. Для организации маркированного списка используются знаки *, + и -. От них зависит вид маркеров.   
 +Чтоб сделать многоуровневый список, нужно будет сделать отступы. 
 + 
 +``` 
 +Далее важно количество пробелов слева: 
 + 
 +1. Первый элемент нумерованного  
 +2. Второй элемент нумерованного 
 +  * "Подсписок" (в) - элемент списка второго уровня, ненумерованный.  
 +1. Третий элемент верхнего уровня, номер тут не имеет значения - лишь был  (заменится на 3-ий) 
 +  1. первый элемент нумерованного подсписка -нумерованный 
 +4. Ещё один нумерованный элемент верхнего уровня. 
 + 
 +Пропускаем одну строку от списка и пишем какой-то текст (этот), 
 + ну а ненумерованные элементы тоже можно выводить целыми тремя способами: 
 +* Звездочкой, как выше 
 +- Минусом в начале строки 
 ++ Или плюсом 
 + 
 +можно также регулировать уровни иерархии с помощью отступов, например: 
 + 
 +* Звездочкой, как выше 
 +  - Минусом в начале строки 
 +      + Или плюсом 
 +    + Или плюсом 
 +- Минусом в начале строки 
 +  - Минусом в начале строки 
 +  - Минусом в начале строки 
 +``` 
 + 
 +Далее важно количество пробелов слева: 
 + 
 +1. Первый элемент нумерованного  
 +2. Второй элемент нумерованного  
 +  * Подсписок (в) - элемент списка второго уровня, ненумерованный.  
 +1. Третий элемент верхнего уровня, номер тут не имеет значения - лишь был  (заменится на 3-ий) 
 +  1. первый элемент нумерованного подсписка -нумерованный 
 +4. Ещё один нумерованный элемент верхнего уровня. 
 + 
 +Пропускаем одну строку от списка и пишем какой-то текст (этот), 
 + ну а ненумерованные элементы тоже можно выводить целыми тремя способами: 
 + * Звездочкой, как выше 
 + - Минусом в начале строки 
 + + Или плюсом 
 + 
 +можно также регулировать уровни иерархии с помощью отступов, например: 
 + 
 +* Звездочкой, как выше 
 +  - Минусом в начале строки 
 +    + Или плюсом 
 +      + Или плюсом 
 +  - Минусом в начале строки 
 +  - Минусом в начале строки 
 +  - Минусом в начале строки 
 + 
 + 
 +## Горизонтальные линии 
 + 
 +Создать горизонтальную линию можно поместив три или больше звездочек `*`, минусов — или подчеркиваний `_` на отдельной строке. 
 + 
 +``` 
 +*** 
 +``` 
 + 
 +но вы можете разделять символы пробелами, чтобы сделать линию более очевидной в процессе редактирования документа. 
 + 
 +``` 
 +* * * * *   
 +-------------------------   
 +_ _ _ _ _   
 +``` 
 + 
 +Каждая из приведенных выше строк даст одинаковый результат. Вот такой: 
 +* * * * * * 
 + 
 + 
 +## Абзацы, параграфы 
 + 
 +В маркдаун все блочные элементы (заголовки, списки, абзацы и т.д.) — все, что визуально начинается с новой строки отбивается пустой строкой. Для вставки пустой строки необходимо два раза поставить символ переноса строки (нажать на Enter) 
 + 
 +## Перенос строки 
 + 
 +Перенос строки всегда игнорируется. Это делается для того, чтобы, например, была возможность при наборе держать определенную длину строки, скажем в 80 символов. 
 + 
 +Т.к. маркдаун создавался с целью быть удобночитаемым, его нередко используют в текстовых документах и для комфорта читателя лучше не давать тексту расплываться соплёй по экрану. 
 + 
 +Для переноса строки внутри абзаца нужно использовать два пробела ⋅⋅ в конце строки. 
 + 
 +## Курсивное и жирное выделение текста 
 + 
 +Для курсива необходимо поставить знаки "*" вокруг текста. Для жирного начертания обрамим текст двумя звездочками, а для жирного курсива — тремя. Алтернативный синтаксис — использование знака "_" по тем же правилам. 
 + 
 +``` 
 +***жирный курсив*** 
 +``` 
 + 
 +***жирный курсив*** 
 + 
 +## Выделение текст или код 
 + 
 +Выделить текст или часть кода можно с помощью символа гравис "**\`**" (обратный апостроф): 
 + 
 +`Выделить  
 +текст или часть кода можно с помощью символа гравис (обратный апостроф)` 
 + 
 +Для выделения блока кода используют три символа гравис в строчке до и после блока кода: 
 + 
 +``` 
 + $a = 5;  
 + $b = 3;  
 + $c = $a + $b; 
 +``` 
 +. 
 + 
 +## Отмена форматирования 
 + 
 +Если вы хотите, чтобы введенные теги HTML, код, теги маркдауна отображались в точности как вы их написали,  
 +то начните каждую строку с четырех пробелов. 
 + 
 +<code> 
 +⋅⋅⋅⋅тут должен быть **жирный текст**, но я поставил 4 пробела в начале стрки 
 +</code> 
 +## Цитаты 
 + 
 +Для обозначения цитат достаточно **поставить знак >** в начале строки 
 + 
 +<code>&gt; Это простая цитата⋅⋅   
 +Состоящая из двух строк 
 +</code> 
 + 
 +    Это простая цитата 
 +    Состоящая из двух строк 
 + 
 +(напомню, для переноса строчки я использую два пробела в конце строчки) 
 +Цитаты можно вкладывать друг в друга: 
 + 
 +<code>&gt; Это просто цитата 
 +&gt; 
 +&gt; &gt; А это уже вложенная цитата 
 +</code> 
 + 
 +    Это просто цитата 
 + 
 +        А это уже вложенная цитата 
 + 
 +## Ссылки 
 + 
 +Существует два варианта оформления ссылок. Первый — обычная вставка в текст: 
 + 
 +<code> 
 +[Текст ссылки](адрес "Описание") 
 +[Google](http://google.com/ "To Google") 
 +</code> 
 + 
 +[Google](http://google.com/ "To Google") 
 + 
 +и второй вариант — оформление ссылки в виде сноски. Когда в текст вставляется конструкция вида: 
 + 
 +<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. 
 + 
 + 
 +## Сноски 
 + 
 +Сноски и примечания задаются так: 
 + 
 +<code> 
 +Сноски и примечания[^1] задаются так[^2]: 
 +// сноски указываются сразу по ходу текста, пустая строка перед сносками обязательна 
 +[^1]: Все сделанные в тексте сноски будут отображаться в конце страницы 
 +[^2]: Просто не так ли?) 
 +</code> 
 + 
 + 
 +## Изображения 
 + 
 +Изображения помещаются на страницу также, как и ссылки, с одним отличием: в начале записи используется знак ! 
 + 
 +<code> 
 +![Alt-текст](Путь к файлу "Подпись") 
 +</code> 
 + 
 +Вставка реального изображения может выглядеть как-то так: 
 + 
 +<code> 
 +![mountains](/img/mountan.png "Пейзаж с горами") 
 +![logo](http://www.google.com/images/logo.gif "Google logo") 
 +</code> 
 + 
 +![logo](http://www.google.com/images/logo.gif "Google logo") 
 + 
 + 
 +Создадим картинку, которая является еще и ссылкой на какую-нибудь страницу в сети: 
 + 
 +<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][logo]][google] 
 + 
 +[logo]: http://www.google.com/images/logo.gif 
 +[google]: http://www.google.com/ "щелкните, чтобы посетить Google.com" 
 + 
 + 
 +## Таблицы (работает не со всеми плагинами 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 вместо того, чтобы использовать его для форматирования, просто поставьте перед ним символ обратной косой черты `\`. Сама косая черта не отображается, однако следующий за ней символ (*) будет показан как есть: 
 +``` 
 +\*literal asterisks\* 
 +``` 
 + 
 +\*literal asterisks\* 
 + 
 +## Списки определений 
 + 
 +Списки определений содержат термины и их описания. Это выглядит подобно словарю. Ниже простой пример: 
 + 
 +<code> 
 + 
 +Moodle 
 +:   Хорошо известная платформа для онлайнового обучения 
 + 
 +PHP 
 +:   Язык программирования. 
 +    Часто используется для разработки интерактивных веб-приложений. 
 + 
 +</code> 
 + 
 +Moodle 
 +:   Хорошо известная платформа для онлайнового обучения 
 + 
 +PHP 
 +:   Язык программирования. 
 +    Часто используется для разработки интерактивных веб-приложений. 
 + 
 +## Спойлер (работает не со всеми плагинами wordpress) 
 + 
 +Скрываем большие объемы текстовой и графической информации с помощью Advanced Spoiler, который уже 2 года не обновляется и работает не везде. 
 + 
 +<code> 
 + 
 +[spoiler]тут текст[/spoiler] 
 + 
 +</code> 
 + 
 +[spoiler]тут текст[/spoiler] 
 + 
 + 
 +## Использование HTML 
 + 
 +Markdown не является заменой HTML и даже близко к нему.  Его синтаксис очень мал и соответствует только очень небольшому подмножеству тегов HTML.  Идея не в том, чтобы создать синтаксис, облегчающий вставку тегов HTML. А теги HTML вставлять уже легко. 
 + 
 +Идея Markdown состоит в том, чтобы упростить чтение, написание и редактирование прозы. HTML — это формат публикации;  Markdown — это формат письма. Таким образом, синтаксис форматирования Markdown решает только проблемы, которые могут быть переданы в виде простого текста. 
 + 
 +Для любой разметки, на которую не распространяется синтаксис Markdown, вы просто используете сам HTML.  Нет необходимости предварять его или разделять, чтобы указать, что вы переключаетесь с Markdown на HTML;  вы просто используете теги. 
 + 
 +Единственным ограничением является то, что ***HTML-элементы блочного уровня*** — например, <div>, <table>, <pre>, <p> и т. д. - __должны быть отделены от окружающего содержимого пустыми строками, а начальный и конечный теги блока не должны иметь отступы с табуляцией или пробелами__.   
 +Markdown достаточно умен, чтобы не добавлять дополнительные (ненужные) теги <p> вокруг HTML-тегов блочного уровня. 
 + 
 +Например, чтобы добавить HTML-таблицу в статью Markdown: 
 +``` 
 +This is a regular paragraph. 
 + 
 +<table> 
 +    <tr> 
 +        <td>Foo</td> 
 +        <td>Foo</td> 
 +        <td>Foo</td> 
 +    </tr> 
 +    <tr> 
 +        <td>Foo</td> 
 +        <td>Foo</td> 
 +        <td>Foo</td> 
 +    </tr> 
 +</table> 
 + 
 +This is another regular paragraph. 
 +``` 
 +* * * 
 +## Онлайн редактор Markdown 
 + 
 +http://dillinger.io/ 
 + 
 + 
 +## Официальный сайт Markdown 
 + 
 +http://daringfireball.net/projects/markdown/ 
 + 
 +EOF 
/var/www/html/dokuwiki/data/attic/html/markdown.1650573039.txt.gz · Последнее изменение: (внешнее изменение)