[Программный код] Разметка страницы на STEEM


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

Пример 

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

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

Представляю вашему вниманию плагин Wp-syntax. Плагин который предназначен для вставки и подсветки различных программных кодов (HTML, PHP, JavaScript) в тело Вашей статьи. Установка плагина ничем не отличается от всех остальных, после установки активируем и можем пользоваться. Для этого в том месте статьи, где Вы хотите видеть выделенный блок кода, необходимо вставить такую строку:

<pre lang="language" line="1"> программный код</pre>

Получим:

 программный код

Все элементарно, но согласитесь,  не удобно! Что бы еще более упростить эту задачу устанавливаем плагин WP-Syntax Button Это расширение вставляет в визуальный редактор кнопку code.

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

Вот и все, элементарно! теперь вы знаете как вставить блок программного кода в тело статьи. Это не единственные в своем роде плагины вставки кода, как альтернативу можно использовать SyntaxHighlighter Evolved или CodeCitation, это может понадобиться в случае если выше перечисленные плагины не совместимы с Вашей версией WordPress.

 

Мои статьи:

1. Принципы построения модели данных 

Семантика данных
Поддержание производительности

2. Методология десяти шагов для Разработки IT-Архитектуры

3. Принципы построения сервиса интеграции данных

4. Интеграционные системы

5. Построение сервиса качества данных 

6. Master Data Managemnt

7. Создаем презентацию проекта

Резюме проекта
Анализ рынка
Стратегия Финансовые
показатели
Команда проекта

8. Курс ITIL 

9. Что такое Блокчейн?

10. Шифрование


Comments 20


17.11.2017 07:53
0

Ок, @kito-boy!

роботы @gemini, @btc-e и @upbot проголосовали за пост: [Программный код] Разметка страницы на STEEM

17.11.2017 07:53
0

П.С.О.

17.11.2017 07:53
0

*************

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

17.11.2017 07:54
0

Вы получили 0.46 % голосов от @Booster. Работает на @Coinbank

You have received 0.46 % vote from @Booster. Powered by @Coinbank

17.11.2017 09:08
0