Практически все блоггеры, создатели содержание или разработчикам технологий иногда необходимо отображать выделенные фрагменты кода в своем блоге. Это само по себе может быть головной болью. Однако выделение одной или нескольких строк в этом фрагменте также может оказаться необходимым, и эта функция, к сожалению, не является частью большинства интеграций кода. К счастью, существует плагин SyntaxHighlighter Evolved. Мы покажем вам, как его использовать, чтобы код был максимально чистым и читаемым.
Синтаксис Highlighter Evolved
Установка и активация плагина проста. Вы можете найти его в хранилище плагинов WP.org. но убедитесь, что это хорошо сделано Алекс Миллс (Viper007Bond), потому что результатов действительно много. Однако мы знаем, что он надежен и актуален. Более того, у этого есть специализированный блок для редактора Гутенберга. Не говоря уже о ряде параметров, которые позволяют персонализировать ваш опыт, что делает его нашим выбором для этого типа задач.
В меню Параметры вашей панели WordPress, вы найдете новый элемент под названием SyntaxHighlighter . Идите и нажмите на нее. Там вы можете настроить каждую мелочь, которая вам понадобится, чтобы встроить фрагменты в свой сайт WordPress.
Настройки SyntaxHighlighter
Страница настроек плагина относительно проста. Один конкретный элемент, который нам нравится в этом плагине, заключается в том, что вы получаете большое количество настроек относительно того, как код отображается на вашем сайте. Вы можете добавить классы CSS во встраивание, настроить заполнение номера строки, выбрать темы цвет, используйте интеллектуальные табуляции и разрывы строк, а также решайте, как будет загружаться подсветка отдельных языков кодирования для всего сайта.
Мы хотим определить три конкретных параметра, которые должны знать большинство людей.
Версия плагина, номера строк и размеры вкладок
Во-первых, какую версию плагина вы загружаете. Хотя плагин остается в репозитории в актуальном состоянии, вы можете выбирать между версиями плагина 2.x и 3.x , в зависимости от того, как вы хотите отображать свой код. Оба они безопасны, однако каждый из них предлагает определенные функции, которых нет у другого (на момент написания).
Если пользователи копируют ваш код, это наиболее важно, подойдет версия 3.x. Однако, если ваша утилита более полезна для отображения, чем фактическая утилита, то новая строка в версии 2.x может быть лучше для вас, поскольку она устраняет необходимость использования полос прокрутки. для больших фрагментов кода.
Тогда вам нужно отображать или нет номера строк. Для больших фрагментов кода и руководств номера строк неоценимы. Однако, когда у вас есть короткие фрагменты, нет необходимости постоянно маркировать их как строки 1 и 2. Их удаление может значительно улучшить внешний вид кода.
И тогда есть размер табуляции до сих пор спорный. Значение по умолчанию - 4, но вы можете изменить его на любое желаемое число. Включая правильное значение 2. (Да, мы понимаем, что правильного значения нет. Нам просто нравится 2 пробела для табуляции.)
Ваш код и шорткоды
Если вы прокрутите страницу вниз Параметры , вы увидите предварительный просмотр большого кода, а также большое количество параметров шорткода. Вы потратите время на их изучение, просто чтобы увидеть, на что способен весь плагин, чтобы продемонстрировать ваши фрагменты. Кроме того, здесь будут отражены любые изменения, внесенные вами в отображение кода в настройках выше. Поэтому не забудьте нажать «Сохранить» после изменения любого из параметров.
Хотя некоторые люди не являются большими поклонниками шорткодов, потому что они могут связывать вас с определенными плагинами, мы считаем, что их стоит использовать, потому что они умны и легко запоминаются. По крайней мере, вам нужно запомнить две вещи, и тогда плагин будет работать для вас наилучшим образом.
ou ou ou et...bien, vous obtenez</li><li>[highlight 5-9]</li></ul>
Или некоторые варианты. Если вы помните, вы уверены в том, что вы можете делать с этим плагином. Хотя вы можете использовать длинный идентификатор, плагин SyntaxHighlighter построен достаточно хорошо, чтобы упростить вашу работу.
Используйте короткие коды
Везде, где вы можете отобразить шорткод, вы можете использовать его. В Divi или классический редактор, вы можете использовать модуль Text или редактор TinyMCE и просто вставить код между шорткодами. Из-за того, как работает вкладка Visual, мы предлагаем использовать вкладку Текст сохранить эти форматирования специальные символы.
Если вы являетесь пользователем Gutenberg / Block Editor, все очень просто. Вы также можете использовать для этого текстовый блок. Еще проще - настраиваемый блок HTML. Как указано выше, вставьте код в теги шорткода.
Еще лучше, блок SyntaxHighlighter Evolved сам по себе. В установку плагина входит собственный блок Гутенберга; так что, если вы не являетесь шорткодом и не хотите возиться с настройками, вам не нужно. Просто найди блок под форматирование и вставьте его в ваше сообщение или страницу.
Независимо от того, как вы вставите код, вы увидите один и тот же рендеринг на внешнем интерфейсе вашего сайта WordPress.
Подводя итог
Вам может понадобиться представить фрагменты вашей аудитории по многим причинам. Может быть, вы пишете учебные пособия или публикуете решения общих проблем, которые аудитория может принять и использовать по своему усмотрению? Но иногда интеграция с GitHub просто не обеспечивает того опыта, который вы хотите для своих пользователей. Это когда вам нужен плагин, такой как SyntaxHighlighter Evolved.
Всего за несколько кликов, с небольшой настройкой и блоком или шорткодом Гутенберга, ваша аудитория без проблем изучит ваш код.
