Различия

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

--- playground:playground [2022/04/04 22:17] – [Спецсимволы] so_v_a
+++ playground:playground [2022/04/21 20:32] (текущий) – удалено so_v_a
@@ Строка 1: / Строка 1: @@
-# MarkDown
-## Шпаргалка по синтаксису markdown (маркдаун) со всеми самыми популярными тегами
-**Markdown** (маркдаун) — облегчённый язык разметки созданный с целью написания максимально читабельного и удобного для правки текста, но пригодного для преобразования в языки для продвинутых публикаций (HTML, Rich Text и др.).
-Ниже будет приведена шпаргалка по синтаксису markdown со всеми самыми популярными тегами маркдаун.
-### СОДЕРЖАНИЕ
- * Содержание в виде ссылок по тексту (якоря)
- * Якоря в Markdown (маркдаун)
- * Тэг читать далее (cut) в Markdown (маркдаун)
- * Заголовки
- * Списки
- * Горизонтальные линии
- * Абзацы, параграфы
- * Перенос строки
- * Курсивное и жирное выделение текста
- * Выделение текст или код
- * Отмена форматирования
- * Цитаты
- * Ссылки
- * Сноски
- * Изображения
- * Таблицы
- * Спецсимволы
- * Списки определений
- * Спойлер
- * Использование HTML
- * Рекомендуемый мной онлайн редактор Markdown
- * Рекомендуемый плагин для wordpress
- * Официальный сайт Markdown
-## Содержание в виде ссылок по тексту (якоря) (работает не со всеми плагинами wordpress)
-Маркдаун может генерировать содержание статьи автоматически основываясь на заголовках, при этом якоря создаются также автоматически. В месте вывода содержания укажите тег [TOC]. В результате, вы получите список как сверху (в этой статье содержание реализовано другим способом)
-## Якоря в Markdown (маркдаун)
-Поместите в нужном месте якорь: `<a name="abcd"></a>`, и, там где это необходимо, ссылку на этот якорь: Текст ссылки.
-Пример использования таких якорей видно в содержании этой статьи.
-## Тэг читать далее (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 поддерживает два вида списков: маркированный и нумерованный. Для организации маркированного списка используются знаки *, + и -. От них зависит вид маркеров.
-Чтоб сделать многоуровневый список, нужно будет сделать отступы.
-```
-Далее важно количество пробелов слева:
-. Первый элемент нумерованного
-. Второй элемент нумерованного
-  * "Подсписок" (в) - элемент списка второго уровня, ненумерованный.
-. Третий элемент верхнего уровня, номер тут не имеет значения - лишь был  (заменится на 3-ий)
-. первый элемент нумерованного подсписка -нумерованный
-. Ещё один нумерованный элемент верхнего уровня.
-Пропускаем одну строку от списка и пишем какой-то текст (этот),
- ну а ненумерованные элементы тоже можно выводить целыми тремя способами:
-* Звездочкой, как выще
--  Минусом в начале строки
-+  Или плюсом
-можно также регулировать уровни иерархии с помощью отступов, например:
-* Звездочкой, как выше
- -  Минусом в начале строки
-       +  Или плюсом
-     +  Или плюсом
- -  Минусом в начале строки
- -  Минусом в начале строки
- -  Минусом в начале строки
-```
-Далее важно количество пробелов слева:
-. Первый элемент нумерованного
-. Второй элемент нумерованного
-  * Подсписок (в) - элемент списка второго уровня, ненумерованный.
-. Третий элемент верхнего уровня, номер тут не имеет значения - лишь был  (заменится на 3-ий)
-. первый элемент нумерованного подсписка -нумерованный
-. Ещё один нумерованный элемент верхнего уровня.
-Пропускаем одну строку от списка и пишем какой-то текст (этот),
- ну а ненумерованные элементы тоже можно выводить целыми тремя способами:
-* Звездочкой, как выще
--  Минусом в начале строки
-+  Или плюсом
-можно также регулировать уровни иерархии с помощью отступов, например:
-* Звездочкой, как выше
- -  Минусом в начале строки
-       +  Или плюсом
-     +  Или плюсом
- -  Минусом в начале строки
- -  Минусом в начале строки
- -  Минусом в начале строки
-## Горизонтальные линии
-Создать горизонтальную линию можно поместив три или больше звездочек *, минусов — или подчеркиваний _ на отдельной строке.
-```
-***
-```
-но вы можете разделять символы пробелами, чтобы сделать линию более очевидной в процессе редактирования документа.
-```
-* * * * *
--------------------------
-_ _ _ _ _
-```
-Каждая из приведенных выше строк даст одинаковый результат. Вот такой:
-* * * * * *
-## Абзацы, параграфы
-В маркдаун все блочные элементы (заголовки, списки, абзацы и т.д.) — все, что визуально начинается с новой строки отбивается пустой строкой. Для вставки пустой строки необходимо два раза поставить символ переноса строки (нажать на Enter)
-## Перенос строки
-Перенос строки всегда игнорируется. Это делается для того, чтобы, например, была возможность при наборе держать определенную длину строки, скажем в 80 символов.
-Т.к. маркдаун создавался с целью быть удобночитаемым, его нередко используют в текстовых документах и для комфорта читателя лучше не давать тексту расплываться соплёй по экрану.
-Для переноса строки внутри абзаца нужно использовать два пробела ⋅⋅ в конце строки.
-## Курсивное и жирное выделение текста
-Для курсива необходимо поставить знаки * вокруг текста. Для жирного начертания обрамим текст двумя звездочками, а для жирного курсива — тремя. Алтернативный синтаксис — использование знака _ по тем же правилам.
-<code>***жирный курсив***
-</code>
-## Выделение текст или код
-Выделить текст или часть кода можно с помощью символа гравис (обратный апостроф) <pre>&lt;code&gt;Выделитьтекстиличасть кодаможно с помощью символа гравис (обратный апостроф)
-</code>
-Для выделения блока кода используют три символа в строчке до и после блока кода:
-<code>```
-$a = 5;
-$b = 3;
-$c = $a + $b;
-```
-</code>
-## Отмена форматирования
-Если вы хотите, чтобы введенные теги HTML, код, теги маркдауна отображались в точности как вы их написали, то начните каждую строку с четырех пробелов.
-<code>⋅⋅⋅⋅тут должен быть **жирный текст**, но я поставил 4 пробела в начале стрки
-</code>
-## Цитаты
-Для обозначения цитат достаточно поставить знак > в начале строки
-<code>&gt; Это простая цитата⋅⋅
-Состоящая из двух строк
-</code>
-    Это простая цитата
-    Состоящая из двух строк
-(напомню, для переноса строчки я использую два пробела в конце строчки)
-Цитаты можно вкладывать друг в друга:
-<code>&gt; Это просто цитата
-&gt;
-&gt; &gt; А это уже вложенная цитата
-</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>
-Такое совмещение создает картинку, щелчок по которой переместит вас на указанную ссылку:
-Логотип Google
-## Таблицы (работает не со всеми плагинами 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>
-## Спойлер (работает не со всеми плагинами wordpress)
-Скрываем большие объемы текстовой и графической информации с помощью Advanced Spoiler, который уже 2 года не обновляется и работает не везде.
-<code>[spoiler]тут текст[/spoiler]
-</code>
-[spoiler]тут текст[/spoiler]