|
||||||||||||
Шпаргалка по синтаксису markdown (маркдаун) со всеми самыми популярными тегами
СОДЕРЖАНИЕ
Содержание в виде ссылок по тексту (якоря) (работает не со всеми плагинами wordpress)Маркдаун может генерировать содержание статьи автоматически основываясь на заголовках, при этом якоря создаются также автоматически. В месте вывода содержания укажите тег Якоря в Markdown (маркдаун)Поместите в нужном месте якорь: Тэг читать далее (cut) в Markdown (маркдаун)Чтобы в маркдауне поставить тэг Читать далее, достаточно в строчке написать ЗаголовкиДля того чтобы написать заголовок в Markdown, необходимо использовать знак # (хэш). Если необходимо несколько уровней заголовков, h1 - h6, нужно изменить количество хэшей (#) перед текстом заголовка. <code># H1 ## H2 ### H3 #### H4 ##### H5 ###### H6 Альтернативные теги для H1 и H2 (знаки равно или минусы под заголовком + пустая строчка над загаловком): Альтернативный-H1 ====== Альтернативный-H2 ------ </code> H1H2H3H4H5H6Альтернативные теги для H1 и H2 (знаки равно или минусы под заголовком + пустая строчка над загаловком): Альтернативный-H1Альтернативный-H2СпискиMarkdown поддерживает два вида списков: маркерованный и нумерованный. Для организации маркерованного списка используются знаки *, + и -. От них зависит вид маркеров. Чтоб сделать многоуровневый список, нужно будет сделать отступы (4 или 8 пробелов). <code>1. Первый пункт списка 2. Второй пункт ⋅⋅⋅* Немаркерованный вложенный подпункт. 1. Номер не имеет значения, нужно чтобы это была просто любая цифра ⋅⋅⋅1. Маркерованный вложенный подпункт. 4. Тут другой пункт. ⋅⋅⋅Можно вставлять в список отдельный абзац. Но, обратите внимание на пустую строчку сверху и пробелы перед строчкой. ⋅⋅⋅Чтобы вставить абзац без пустой строчки сверху, нужно в конце строки поставить два пробела.⋅⋅ ⋅⋅⋅Обратите внимания что эта строчка отдельная, хотя находится в том же абзаце.⋅⋅ ⋅⋅⋅В этой строчке пробелы в конце строчки не требуются. * Для ненумерованных списков можно использовать звёздочки - Или минусы + Или плюсы </code>
Горизонтальные линииСоздать горизонтальную линию можно поместив три или больше звездочек *, минусов - или подчеркиваний _ на отдельной строке. <code>*** </code> но вы можете разделять символы пробелами, чтобы сделать линию более очевидной в процессе редактирования документа. <code>* * * * * ------------------------- _ _ _ _ _ </code> Каждая из приведенных выше строк даст одинаковый результат. Вот такой: Абзацы, параграфыВ маркдаун все блочные элементы (заголовки, списки, абзацы и т.д.) — все, что визуально начинается с новой строки отбивается пустой строкой. Для вставки пустой строки необходимо два раза поставить символ переноса строки (нажать на Enter) Перенос строкиПеренос строки всегда игнорируется. Это делается для того, чтобы, например, была возможность при наборе держать определенную длину строки, скажем в 80 символов. Т.к. маркдаун создавался с целью быть удобночитаемым, его нередко используют в текстовых документах и для комфорта читателя лучше не давать тексту расплываться соплёй по экрану. Для переноса строки внутри абзаца нужно использовать два пробела ⋅⋅ в конце строки. Курсивное и жирное выделение текстаДля курсива необходимо поставить знаки * вокруг текста. Для жирного начертания обрамим текст двумя звездочками, а для жирного курсива - тремя. Алтернативный синтаксис - использование знака _ по тем же правилам. <code>___жирный курсив___ </code> Выделение текст или кодВыделить <code>``` $a = 5; $b = 3; $c = $a + $b; ``` </code> Отмена форматированияЕсли вы хотите, чтобы введенные теги HTML, код, теги маркдауна отображались в точности как вы их написали, то начните каждую строку с четырех пробелов. <code>⋅⋅⋅⋅тут должен быть **жирный текст**, но я поставил 4 пробела в начале стрки </code> ЦитатыДля обозначения цитат достаточно поставить знак <code>> Это простая цитата⋅⋅ Состоящая из двух строк </code> Это простая цитата Состоящая из двух строк (напомню, для переноса строчки я использую два пробела в конце строчки) Цитаты можно вкладывать друг в друга: <code>> Это просто цитата > > > А это уже вложенная цитата </code> Это просто цитатаА это уже вложенная цитата СсылкиСуществует два варианта оформления ссылок. Первый - обычная вставка в текст: <code>[Текст ссылки](адрес "Описание") </code> и второй вариант - оформление ссылки в виде сноски. Когда в текст вставляется конструкция вида: <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. СноскиСноски и примечания1 задаются так2: <code>Сноски и примечания[^1] задаются так[^2]: // пустая строка обязательно [^1]: Все сноски отображаются в конце страницы [^2]: Просто не так ли?) </code> ИзображенияИзображения помещаются на страницу также, как и ссылки, с одним отличием: в начале записи используется знак <code>![Alt-текст](Путь к файлу "Подпись") </code> Вставка реального изображения может выглядеть как-то так: <code>![mountains](/img/mountan.png "Пейзаж с горами") </code> Создадим картинку, которая является еще и ссылкой на какую-нибудь страницу в сети: <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> Такое совмещение создает картинку, щелчок по которой переместит вас на указанную ссылку: Таблицы (работает не со всеми плагинами wordpress)Создание таблиц с Markdown намного нагляднее, чем в HTML. Форматирование интуитивно понятно, добавлю только что для выравнивания текста внутри ячеек используются знаки : в строке, отделяющей заголовок от основной таблицы. <code>Item | Value | Quantity :-------- |:-----:| -------: Computer | 1600 | 3 Phone | 12 | 2 Pipe | 1 | 1 </code>
СпецсимволыЕсли вы хотите отобразить любой из специальных символов Markdown вместо того, чтобы использовать его для форматирования, просто поставьте перед ним символ обратной косой черты (). Сама косая черта не отображается, однако следующий за ней символ будет показан как есть: * Списки определенийСписки определений содержат термины и их описания. Это выглядит подобно словарю. Ниже простой пример: <code>Moodle : Хорошо известная платформа для онлайнового обучения PHP : Язык программирования. Часто используется для разработки интерактивных веб-приложений. </code>
Спойлер (работает не со всеми плагинами wordpress)Скрываем большие объемы текстовой и графической информации с помощью Advanced Spoiler, который уже 2 года не обновляется и работает не везде. <code>[spoiler]тут текст[/spoiler] </code> [spoiler]тут текст[/spoiler] Использование HTMLЕсли вы являетесь специалистом в HTML, то можете обнаружить, что Markdown не дает вам всех возможностей, которые вы бы хотели. К счастью Markdown разрабатывался с учетом этого и позволяет вставлять теги HTML непосредственно в форматируемый текст. <code>* <small>мелкий текст</small> * <big>крупный текст</big> </code>
Имейте в виду, что HTML-разметка сосуществует с разметкой Markdown. Это освобождает вас от необходимости использовать HTML для основных элементов оформления, таких как параграфы, списки и т.п., однако в необходимых случаях позволяет использовать все возможности HTML. Рекомендуемый мной онлайн редактор Markdownhttp://dillinger.io/ Рекомендуемый плагин для wordpress
Официальный сайт Markdownhttp://daringfireball.net/projects/markdown/ |
||||||||||||