Редактор Markdown

Редактор Markdown

Редактор Markdown самый простой из трех редакторов, доступных в Publii; недостаток функций в нем компенсируется простотой работы. Используя сокращенные символы, такие как хэши, вы можете вставлять различные HTML элементы без необходимости беспокоиться об открытии и закрытии тегов. Этот процесс позволяет быстро создавать контент; отлично, если вы пишете контент, который не требует большого количества расширенных опций, таких как документация или инструкции.

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

<p>This is a paragraph</p>

С Markdown теги абзацев автоматически вставляются в содержимое, а также более сложные теги, такие как Заголовки и Ссылки добавляются с помощью ярлыков. Какие HTML-теги имеют ярлыки, зависит от используемого редактора markdown; в случае Publii используется движок Markdown SimpleMDE который, как следует из названия, предлагает простой и быстрый движок для написания. В следующих разделах мы рассмотрим различные ярлыки markdown, доступные в Publii.

Добавление заголовка публикации

При первом открытии редактора Markdown для создания публикации вам будет представлено пустое пространство с двумя доступными полями, одно из которых помечено как Добавить заголовок публикации, а другое - как Написать здесь....

[изображение= пустой пост редактора markdown]

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

Раздел, отмеченный как Написать здесь , предназначен для основного содержания вашего поста, и мы расскажем, как можно использовать ярлыки Markdown, чтобы упростить написание этого контента.

Ярлыки Markdown

Чтобы использовать эти сочетания клавиш, добавьте указанный символ в начале строки; это гарантирует, что он будет правильно преобразован в HTML. В качестве альтернативы вы также можете использовать указанное сочетание клавиш для вставки требуемого символа:

# (Ctrl+H)Одиночный хэш перед предложением присваивает тексту значение H1, или Заголовок 1, HTML-элемента.
## (Ctrl+ HH)Два хэша перед предложением определяют текст как HTML-элемент H2, или Заголовок 2.
### (Ctrl+HHH)Три хэша перед предложением создают HTML-элемент H3, или Заголовок 3.
#### (Ctrl+HHHH)Четыре хэша создают элемент h3, или Заголовок 4.
##### (Ctrl+HHHHH)Пять хэшей создают элемент H5, или Заголовок 5.
###### (Ctrl+ХХХХХХ)Шесть хэшей создают элемент H6, или Заголовок 6.
1. (Ctrl+ Alt +L)Число "1" и точка, за которой следует пробел, создают HTML-элемент OL, или Упорядоченный список.
- , +, * (Ctrl+L)Звездочка, дефис (иначе известный как тире) или знак плюс, за которыми следует пробел, создают HTML-элемент UL, или неупорядоченный список.
*текст* (Ctrl+I)Вставка звезды до и после блока текста, получится, что текст курсив.
**текст** (Ctrl+B)Вставив два старта до и после блока текста, получится, что текст смелый.
`код`Вставка Серьезного ударения перед и после блока текста изменит его на Встроенный код; при этом текст будет отображаться в неформатированном стиле с цветным фоном.
`код`Вставка двух Серьезных ударений до и после блока текста изменит этот текст на Код; он оформлен аналогично Встроенному коду, но сохраняет форматирование, такое как переносы строк, для больших блоков кода.
---ЧИТАТЬ ДАЛЕЕ---'READMORE', окруженный тремя дефисами с каждой стороны, создаст точку Readmore , которая указывает, где должен заканчиваться любой текст для предварительного просмотра. Пользователям нужно будет нажать на кнопку Readmore перейти к основному сообщению, чтобы ознакомиться с полным содержанием.
(Ctrl+Q)Знак "больше, чем", за которым следует пробел, создаст элемент Blockquote ; текст, введенный после этого элемента (но только в той же строке), будет оформлен как увеличенный текст цитаты.
[заголовок] (URL ссылки) (Ctrl +K)Создает ссылку; текст в Название В разделе будет определен текст ссылки, а URL-адрес в разделе URL-адрес ссылки будет определен целевой объект, на который ссылка должна направлять браузер.
~~текст ~~ (Ctrl+U)Вставка двух Тильд до и после фрагмента текста изменит его на Зачеркнутый текст.

Вставка заголовков с помощью Markdown

Элементы заголовка в HTML (H1-H6) используются для создания заголовков для вашего контента. Каждый "уровень" заголовка используется, чтобы показать, где находится конкретный заголовок в иерархии публикаций; например, основной заголовок страницы или статьи будет использовать заголовок H1, в то время как каждый подраздел статьи будет использовать заголовок H2. Если у каждого раздела есть свои подразделы, то они обычно будут использовать следующий заголовок вниз; подраздел под заголовком H2 будет использовать заголовок H3, и так далее. Это создает структуру вашего контента, которая легко понятна как людям, так и компьютерам! В Publii основной заголовок H1 создается полем "Заголовок" в редакторе публикаций, а другие заголовки могут быть добавлены вручную по мере создания вашего контента. С помощью ярлыков markdown это можно сделать очень быстро и легко. При желании вы, конечно, можете добавить несколько элементов H1, но обычно это не рекомендуется для целей SEO.

Чтобы вставить заголовок с помощью markdown, вы добавляете хэши (#), соответствующие заголовку, который вы хотите вставить, перед своим заголовком. Итак, чтобы вставить элемент заголовка 2 (H2), вы должны написать:

## My heading 2 title

...затем нажмите enter. Это содержимое будет автоматически преобразовано в элемент заголовка 2 в HTML. Если вы хотите вставить элемент заголовка 3 (H3), просто добавьте три хэша перед заголовком и так далее.

Вставка списков с помощью Markdown

Существует два типа списков, которые распространены в HTML и в письменной форме в целом; упорядоченные списки, или списки с нумерованными элементами, и неупорядоченные списки, в которых вместо цифр для каждого элемента используются маркеры. Вставить их с помощью markdown чрезвычайно быстро и просто. Для неупорядоченного списка введите звездочку (*) или дефис / тире (-), за которыми следует пробел перед текстом первого элемента в списке. Когда вы нажмете Enter, текст автоматически изменится на маркированный элемент. Например, ввод:

* The first item in my unordered list.

... нажатие клавиши enter добавит маркер перед текстом и автоматически создаст второй маркер для вашей новой строки текста, чтобы вы могли добавить следующий элемент. Просто добавьте следующий товар, затем снова нажмите Enter, чтобы создать третий товар и т.д...Как только вы добавите все нужные товары, нажатие enter на пустом товаре завершит список.

Вставка упорядоченных списков работает точно так же, но вместо использования звезды или дефиса вы можете просто начать писать список с помощью "1. ". Товар будет автоматически отформатирован в виде списка. После того, как вы добавите достаточное количество товаров, просто нажмите enter на пустой товар, чтобы завершить список.

Добавление жирного, курсивного или зачеркнутого текста с помощью Markdown

Markdown может автоматически изменить ваш текст на жирный или курсивный, выделив текст соответствующим символом, в данном случае звездочкой (*) для курсива, двумя звездочками (**) для жирного шрифта и двумя тильдами (~~) для зачеркивания. Чтобы выделить предложение жирным шрифтом, вам следует добавить две звездочки до и после текста. Для курсива добавьте по одной звездочке до и после текста, а для зачеркивания - две тильды до и после текста:

**This text will be bold**. 
*This text will be italic*.
~~This text will be strikethrough~~
This text will be unchanged.

Редактор Markdown изменит текст, как только вы добавите символы перед словом, так что вы сразу поймете, что это сработало. The Тильда Клавиша обычно расположена в верхнем левом углу стандартной QWERTY-клавиатуры; если у вас возникли проблемы с поиском, вы можете использовать сочетание клавиш для зачеркивания текста (Ctrl + U) или вы можете использовать Alt Код; удерживая нажатой клавишу Alt , затем нажмите цифры 126, затем отпустите клавишу Alt , чтобы вставить тильду.

Вставка ссылок с помощью Markdown

Ссылки легко вставлять в свой контент с помощью Markdown. Во-первых, вы можете установить текст ссылки с помощью квадратных скобок [ ] вокруг слова, с которым вы хотите создать ссылку, а затем обычные квадратные скобки ( ) вокруг ссылки, на которую вы хотите перейти:

[link text](link URL)

Вы также можете создать ссылку, нажав на кнопку CTRL + K или Command + K клавиши на клавиатуре, чтобы открыть ссылку Вставить / отредактировать всплывающее окно.

[изображение] Вставить всплывающее окно ссылки в редакторе markdown[/изображение]

В этом всплывающем окне первым вариантом, который вы увидите, является:

  • Выберите тип ссылки - Задает тип контента, на который вы хотите создать ссылку; выберите из Ссылка на публикациюСсылка на тегСсылка на автораСсылка на главную страницуПользовательская ссылка или Файл из файлового менеджера.

Этот параметр определяет, на какой тип контента вы хотите создать ссылку. ПубликацияТеги и Ссылки на авторов позволяют создавать ссылки на конкретную публикацию, тег или страницу автора на вашем сайте Publii. Ссылки на главную страницу. указывает только на домашнюю страницу сайта. Пользовательские ссылки указывает на URL, который не является частью вашего сайта Publii, и Файл из файлового менеджера позволяет вам ссылаться на файл в файлах вашего сайта, который пользователи могут просматривать или загружать.

После выбора типа ссылки, которую вы хотите вставить, следующее поле изменится в зависимости от типа ссылки. Для ПубликацияТег или Автор Ссылки второе поле будет содержать раскрывающийся список, в котором вы можете выбрать ПубликацияТег, или Автор Страница , на который вы хотите создать ссылку. Если у вас в списке много элементов, вы можете начать вводить их в поле для динамической фильтрации списка.

Для Пользовательских ссылок второе поле будет использоваться для вставки URL , на который вы хотите перейти. Обязательно введите полный адрес, чтобы избежать создания неработающей ссылки.

Для Файла из файлового менеджера второе поле будет функционировать так же, как ПубликацияТег, или Страница автора поле; раскрывающийся список, содержащий все файлы, которые в данный момент хранятся в файловом менеджере Publii. Опять же, вы можете динамически фильтровать список, введя в поле имя файла, который вы хотите найти.

Установив адрес ссылки, последнее поле, Метка ссылки позволяет вам задать текст ссылки в том виде, в каком он будет отображаться в вашем контенте. Заполнив все поля, нажмите ОК кнопка для создания ссылки.

Вставка кода

Когда мы говорим о вставке кода в наш контент, мы не имеем в виду код, который будет запускаться браузером. Вместо этого это относится к способу стилизации текста, чтобы он отличался от остального содержимого страницы; вы можете видеть, как он используется на протяжении всей этой страницы при демонстрации того, что вводить в редактор markdown, чтобы изменить стиль текста, фактически, мы будем использовать его прямо сейчас, чтобы показать вам, как вставлять код в ваш контент:

`This text will be displayed as code content`

Однако на самом деле можно вводить содержимое кода двух разных типов, которые мы называем Встроенный код и, просто, Код. Разница минимальна на практике, но важна для пользователей, которые хотят вставлять большие блоки кода.

Встроенный код, который вставляется, как в приведенном выше примере, используется для отображения одной строки кода; длина не имеет значения, но содержимое будет перенесено в новую строку. Для вставки Встроенный код нам нужно добавить Серьезный акцент до и после текста нашего кода:

`This is an example of inline code in markdown; note that this long sentence wraps to a new line without any additional line breaks or other separators`

Для справки, ударение Grave не является апострофом, хотя и выглядит похоже. Обычно он находится на верхней левой клавише стандартной QWERTY-клавиатуры, хотя в зависимости от языка, используемого вашей операционной системой, вам может потребоваться удерживать клавишу Shift , чтобы получить к нему доступ.

В отличие от встроенного кода, Код вставка сохранит форматирование, такое как разрывы строк. Это особенно полезно при отображении кода, состоящего из нескольких отдельных строк, которые не будут работать корректно, если их вставить в одну строку. Для создания Код блок, просто добавьте три Серьезных акцента перед текстом или на строке над текстом и еще три в отдельной строке после конца текста, который вы хотите преобразовать в блок кода:

```

This is an example of Code in markdown.

Line breaks, including blank lines, are maintained in this block.

This makes it easier users to read more extensive code listings.

```

Если у вас возникнут проблемы с поиском клавиши Grave Accent на вашей клавиатуре, вы также можете ввести ее (в большинстве европейских и американских операционных систем), удерживая нажатой клавишу Alt или Команда Клавиша и нажатие цифр 96, затем отпуская клавишу Alt Клавиша.

Вставка цитат из блоков

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

[изображение= пример цитаты из блока]

Чтобы вставить блок-кавычку, вставьте символ , больший, чем , перед строкой, которую вы хотите преобразовать в блок-кавычку, а затем пробел:

> This will be the blockquote text

Нажатие enter продолжит цитирование блока; содержимое, добавленное в новую строку, будет обернуто существующими строками, образуя одну непрерывную строку текста:

> These two lines will appear
> as a single line of text in the blockquote

Чтобы завершить цитирование блока, дважды нажмите enter, как при завершении упорядоченного или неупорядоченного списка.

Вставка изображений

Добавление изображений к вашему контенту работает аналогично добавлению ссылок в Markdown. Сначала вы заключаете описание изображения в квадратные скобки, перед которыми ставится восклицательный знак ![ ]. Затем вы устанавливаете изображение, используя URL изображения в обычных скобках ( ). Например, чтобы вставить изображение с именем image1 и дать ему описание 'картинка' в тексте, мы бы написали:

![picture](mytest.com/image1.png)

Кроме того, вы можете перетаскивать изображения со своего компьютера непосредственно в редактор Markdown в Publii, и он автоматически добавит изображение к файлам веб-сайта и создаст ссылку для отображения изображения. На этом этапе вы можете изменить текст "описание изображения" на свой собственный текст описания.

Subscribe

Get the latest news, updates and more delivered directly to your email inbox

...