Вставка и подсветка кода в Joomla – скрипт highlight

В одной из предыдущих статей («Текстовые редакторы в Joomla») я вкратце описывал использование текстовых редакторов. Возможности этих редакторов на 99% покрывают потребности пользователей Joomla. Но иногда их возможностей не хватает или лучше воспользоваться специальными расширениями. Допустим, что в статью нужно вставить код одного из конфигурационных файлов Linux-сервера или фрагменты кода на PHP, например изменения в одном из файлов Joomla. И не просто вставить, а сделать так, чтобы он удачно вписался в материал, чтобы был подсвечен код. О том, как это сделать мы и поговорим в этой статье.
Специальные расширения хороши не только тем, что легко позволяют вставить код, но и тем, что позволяют его подсветить. Давайте, в качестве примера, вставим в статью фрагменты: одного из файлов Joomla и настроечного файла pptp.

HS Highlighter

Чтобы реализовать это воспользуемся специальным расширением - HS Highlighter. Оно состоит из двух плагинов: один отвечает за подсветку кода, другой добавляет кнопку вставки кода в материал. HS Highlighter поддерживает огромное количество языков программирования и разметки, а благодаря его интеграции в Joomla вставлять код сможет даже ребёнок.
Скачиваем пакет расширения с сайта АйтишникРу . На момент написания статьи была доступна версия 1.0.7. Устанавливаем HS Highlighter стандартным способом, через «Менеджер расширений». После установки перейдём в менеджер плагинов и найдём в списке плагин «Content - Hs Syntax Highlighter» - это плагин подсветки кода. Плагин выключен, включим его и откроем для редактирования настроек.

В блоке «Основные параметры» можно выбрать стиль отображения фрагментов кода и их подсветки. Мне нравится «Midnight» - его и выбираю.

В блоке дополнительных настроек («Advance Setting») можно настроить дополнительные параметры такие как: добавление после кода пустой строки, подключение своей таблицы стилей и т. д. Новичку лучше оставить параметры по умолчанию. Сохраняем изменения, убеждаемся, что плагин включен и находим в списке плагинов ещё одну строку «Button - Hs Highlighter Button» - это та самая кнопка. Включаем этот плагин и открываем его для редактирования.

В настройках плагина можно указать ставить ли какой-либо тег после вставки кода или нет. Я указал ничего не ставить. Сохраняемся и переходим непосредственно к вставке кода.
Откроем статью, в которую будем вставлять код.

В нижней части окна редактора видим, что появилась кнопка для вставки кода - «Highlight Code». Теперь совсем всё просто: нажимаем эту кнопку и вставляем нужный код.

Вставим в первом абзаце фрагмент кода из индексного файла шаблона «Beez5», при этом выделим четырнадцатую строку и установим начало нумерации строки с 9.

class="eliadunit">

От автора

Что вы будете делать, если нужно показать код в своей статье на Joomla? Воспользуетесь тегом Вряд ли у вас это получится на Joomla. Будете искать плагин Syntax Highlighter для Joomla? Так он давно «умер». Рекомендую, для этих целей использовать кастомный скрипт highlight.js .

Скрипт highlight.js

Использование скрипта highlight.js хороший повод разобраться, как применять костомные скрипты на Joomla!CMS. Понятие костомный означает, что этот скрипт написан специально для решения определенных задач. Кроме этого его можно использовать не только на CMS Joomla. Он универсален и будет работать на других системах.

Скачать скрипт highlight.js нужно только на официальном сайте. Вот ссылка https://highlightjs.org/ . Скачивается скрип легко, без регистрации. Вот как авторы описывают его возможности:

Скрип поддерживает синтаксис 176 языков и имеет 79 различных стилей css;

• Есть функция автоматического определения языка;
• Универсальное выделение кода;
• Доступно для node.js;
• Работает с любой разметкой;
• Совместим с любой js-структурой.

Как установить и настроить работу скрипта highlight.js

Для установки и настройки скрипта воспользуйтесь маленькой инструкцией.

Шаг 1.

Скачать скрип с официального сайта (highlightjs.org).

Шаг 2.

По FTP залейте каталог скрипта в каталог вашего рабочего шаблона, .

Шаг 3.

class="eliadunit">

В блокноте Notepad++ или аналогах, составьте три кодовые строки:

hljs.initHighlightingOnLoad();

Youtemplate название каталога вашего шаблона, куда вы закачали каталог скрипта .

Здесь используется стиль dark.css . Это один из 79 стилей используемых в скрипте. Название других стилей посмотрите в папке highlight/styles. Например, чтобы использовать стиль dracula, вместо dark.css впишите dark.css. Стиль по умолчанию (стандартный серый) носит название default.css.

• Идите в административную часть сайта на вкладку Расширения>>>Шаблоны;
• Откройте рабочий шаблон для редактирования кода;
• Нам нужен файл index.php, откройте его для редактирования;
• Сделайте его копию и перенесите её в Notepad++;
• Теперь вам нужно первую строку составленного кода добавить ДО тега , а две вторые строки кода добавить ДО тега .

Важно! Если у вас установлен настраиваемый шаблон, то в настройках, скорее всего, есть настройки «Custom Code», где есть блоки Before и Before , лучше вставить коды в эти блоки.

• Сохраните изменения.

Как использовать скрипт highlight

Теперь, чтобы «подсветить» код в статье сайта, достаточно использовать универсальный код, для всех языков:

...

Или применять выделение для каждого языка в отдельности, например, так для html кода:

...

Для продвинутых пользователей

Более широкие возможности для использования скрипт highlight посетите:

• Официальный сайт библиотеки: https://highlightjs.org/ .
• Документацию по API: http://highlightjs.readthedocs.io/ .

Визуальный редактор JCE (Joomla Content Editor) обладает широким функционалом благодаря которому Вы сможете легко добавлять и редактировать материалы сайта, изменять их стилевое оформление, при этом не обладая знаниями в CSS, HTML и PHP. Знание и умение работать со всеми инструментами редактора JCE существенно упростит Вашу работу, позволит создавать эстетично оформленный текст с гармонично расположенными изображениями, ссылками, таблицами, загружать и настраивать медиа-файлы разных типов и т.д.

После того, как вы скачали, установили и настроили на своём сайте визуальный , войдите в административную панель и нажмите кнопку "Создать материал". Перед вами откроется панель инструментов редактора JCE.

Большинство кнопок редактора JCE весьма схожи с инструментами популярных редакторов текста и являются интуитивно понятными.
И так, давайте рассмотрим основные инструменты визуального редактора.
- диалоговое окно редактора: Справка.
- очищает окно редактора для создания нового документа.
- отменить последнее действие (CTRL+Z).
- вернуть последнее действие (CTRL+Y).
- применить или удалить жирный шрифт к выделенному тексту.
- применить или удалить курсив к выделенному тексту.
- применить или удалить подчеркивание к выделенному тексту.
- применить или удалить зачеркиваие выделенного текста.
- Выравнивание выделенного текста или элементов по всей ширине, по центру, по левому краю и по правому краю соответственно.
- вставка и удаление блока цитаты.
- применить формат блока к выделенному тексту или элементу.
На этом инструменте редактора следует остановиться более подробно.
Этот инструмент позволяет обрамлять выделенный текст нужными тэгами, что является важным для SEO-оптимизации сайта. Из важных опций здесь:

• Параграф – обрамление выделенного текста тегами , что означает - текст относится к текущему параграфу. Тегами автоматически обрамляются все параграфы текста, вставленного из редактора Word.
• Блочный элемент (Div) – блочный элемент html страницы, который предназначен для управления размещением и придания самых разнообразных свойств текстам, изображениям, ссылкам и др объектам.
• Адрес - тег предназначен для хранения информации об авторе и может включать в себя любые элементы HTML вроде ссылок, текста, выделений и др. Поисковые системы анализируют содержимое этого тега для сбора информации об авторе сайта. По умолчанию текст внутри контейнера отображается курсивом. Если эта особенность вам не требуется, то используйте стили для изменения начертания шрифта.
• Форматированный - тег Определяет предварительно отформатированный текст. Текст в элементе обычно отображается шрифтом с фиксированной шириной, а также он сохраняет пробелы и переносы строк.
• Заголовок – текст, к которому применена эта опция, обрамляется тегами h1, h2, h3 и.т.д. Теги h1-h6 сочетают в себе как функции оформления, так и функции оптимизации. С точки зрения оптимизации, заголовки h1-h6 – это теги акцентирования, задача которых обратить внимание поискового робота на наиболее важные с точки зрения определения тематики и темы участки текста и отдельные слова.
• Код - тег предназначен для отображения одной или нескольких строк текста, представляюего собой программный код. Сюда относятся переменные, ключевые слова, тексты функции и др. Браузеры, как правило, отображают содержимое контейнера как моноширинный текст уменьшенного размера.
• Пример кода - текст, к которому применена эта опция, обрамляется тегами . Тег используется для отображения текста, который является результатом вывода компьютерной программы или скрипта. Браузеры обычно отображают текст в контейнере в виде моноширинного шрифта. С помощью стилей вы можете задать свое собственное оформление.
• Строчный элемент (SPAN) – обрамление текста тегами . Тег предназначен для определения строчных элементов документа. В отличие от блочных элементов, таких как ,

  или

  , с помощью тега можно выделить часть информации внутри других тегов и установить для нее свой собственный стиль.
  Термин Определения – обрамление текста тегами . Тег входит в тройку элементов , , … , куда входит тег создающий термин и тег
  Описание Определения – обрамление текста тегами . Тег входит в тройку элементов , , , предназначенных для создания списка определений. Каждый такой список помещается в контейнер … , куда входит тег создающий термин и тег задающий определение этого термина.

  - выбор стилей из CSS текущего шаблона. Очень важный инструмент.
  - очистить стиль форматирования выделенного текста или элемента.
  - очистить выделенный текст от HTML-кода.
  – выбор шрифта для выделенного текста.
  - выбор размера шрифта для выделенного текста.
  - изменение цвета текста и цвета фона для выделенного текста.
  - вырезание выделенного текста (кнопка работает не во всех браузерах). Используйте вместо неё сочетание клавиш CTRL+X.
  - копирование текста в буфер обмена (работает не во всех браузерах). Используйте вместо неё сочетание клавиш CTRL+С.
  – используется для вставки текста из редактора Word и других текстовых редакторов. Вид редактора определяется автоматически. После выбора опции откроется окно.
  

  
  

  В это окно нужно вставить (Ctrl+V) текст из редактора Word или любого другого редактора в котором сохранен материал, и нажать кнопку "Вставить".
  После этого текст с максимальным сохранением стилей форматирования будет вставлен в текстовое поле JCE.
  - используется для вставки текста с одновременной очисткой его от стилей форматирования . При использовании этой опции получится просто сплошной текст, что-то вроде вставки из блокнота. При нажатии на кнопку откроется окно с надписью "Вставить как обычный текст".
  – увеличить/уменьшить отступ выделенного текста или элемента от левого края страницы.
  - создание упорядоченного списка (из выпадающего списка можно выбрать цифры, строчные или заглавные буквы и т.д.).
  - создать маркированный список (круг, диск, квадрат).
  - установка текста в нижнем или верхнем индексе.
  - изменение регистра выделенного текста (заглавные, строчные, каждое предложение с заглавной, горбатый регистр).
  - выберите специальный символ из выпадающего окна с символами. При наведении курсора на символ в правой части окна появляется "превью" символа, его HTML-Code и NUM-Code.
  
  - направленность отмеченного текста или элементов: слева-направо или справа-налево соответственно.
  - развернуть размер редактора во весь экран.
  
  - окно для вставки и редактирования кода. При клике по этой кнопке открывается редактор html-кода с подсветкой:
  

  

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

  – работа с таблицами.

  – показать или скрыть направляющие (неотображаемые элементы на странице сайта).
  – вкл/выкл отображение невидимых символов (форматирование, пробелы и т.п.).
  – показать или скрыть блочные элементы. При включении опции блоки с текстом и элементами будут выделены штрих-пунктирной линией для удобства работы с контентом.
  – вставить неразрывный пробел (абривеатура  ).
  - изменение стиля выбранного текста. Многофункциональный инструмент.
  - помечает текст как цитату или сноску на другой материал. Выделение текста через тег удобно для изменения стиля контента через CSS, а также применяется для разделения HTML- кода на структурные элементы. Обычно браузеры устанавливают текст внутри контейнера курсивом. При клике по кнопке всплывает модальное окно.
  

  
  

  • Заголовок (title) - описание содержимого элемента в виде всплывающей подсказки.
  • id - указывает имя стилевого идентификатора.
  • Класс (class) - имя класса, которое позволяет связать тег со стилевым оформлением.
  • Стиль (style) - применяется для определения стиля элемента с помощью CSS.
  • Направление текста (dir) - задает направление и отображение текста (слева направо или справа налево).
  • Язык (lang) - значение этого параметра используется браузером для правильного отображения некоторых национальных символов.

  Указывает, что последовательность символов является аббревиатурой (тег ). При клике по кнопке всплывает модальное окно аналогичное вышерассмотренному. Заголовок (title) добавляет всплывающую подсказку в которой можно дать расшифровку аббревиатуры. Кроме того, поисковые системы индексируют полнотекстовый вариант аббревиатуры, что может быть применено для повышения рейтинга документа.
  - указывает на то, что текст является акронимом. От аббревиатуры отличается тем, что акроним это общепринятое сокращение и является самостоятельным словом. К акронимам можно отнести следующие слова: США, DOS, ЦУМ, ООН, ликбез и др.
  По умолчанию текст, помещенный внутрь контейнера , подчеркивается пунктирной линией. В модальном окне для акронима можно заполнить универсальные атрибуты точно такие же, как и для аббревиатуры.
  - используется для выделения текста, который был удален в новой версии документа. Текст в контейнере обычно отображается браузерами как перечеркнутый. Подобное отображение позволяет отследить, какие в тексте документа изменения были сделаны. При клике по кнопке всплывает модальное окно
  

  
  

  • Дата/Время (datetime) - дата и время редактирования текста.
  • Цитата (cite) - указывает ссылку на документ, в котором приведена причина редактирования текста и прочие подробности.

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

  Вкладка "Стандартные" содержит знакомые нам атрибуты.
  

  
  

  Вкладка "События"
  

  
  

  Во вкладке "События" (Events) назначаются события, которые будут происходить при наведении, нажатии и т.д. курсора на элемент.

  Возможные значения:
  onblur - потеря фокуса. Событие onBlur возникает при потере объектом фокуса при переходе по клику мыши или с помощью клавиатуры. Это обычно происходит, если щелкнуть мышкой на другой элемент текущего текста. Событие onblur противоположно событию onfocus.
  onchange - изменение значения элемента формы. Событие onchange возникает, когда элемент управления формы меняет свое значение.
  onclick - событие возникает при щелчке левой кнопкой мыши на элементе, к которому добавлен атрибут onclick.
  ondblclick - двойной щелчок левой кнопкой мыши на элементе.
  onfocus - получение элементом фокуса. К примеру, для текстового поля фокусом называется возможность вводить текст (мигающий курсор).
  onkeydown - клавиша нажата, но не отпущена. Событие cрабатывает в момент нажатия клавиши, но когда она еще не отпущена.
  onkeypress - клавиша нажата и отпущена. Событие срабатывает, когда клавиша на клавиатуре нажата и уже отпущена.
  onkeyup - клавиша отпущена. Событие возникает в тот момент, когда нажатая клавиша отпускается.
  onload - документ загружен. Событие указывает, что страница полностью загружена, включая содержание, картинки, CSS-файлы, а также внешние скрипты.
  onmousedown - нажата левая кнопка мыши. Событие по действию напоминает onclick и отличается от него тем, что возникает в момент нажатия на кнопку мыши.
  onmousemove - перемещение курсора мыши. Событие применяется для создания разных эффектов, связанных с курсором мыши, например: всплывающие подсказки.
  onmouseout - курсор покидает элемент. Событие возникает при перемещении указателя мыши за границы объекта.
  onmouseover - курсор наводится на элемент. Событие возникает при наведении курсора мыши на элемент.
  onmouseup - левая кнопка мыши отпущена. Событие возникает при отпускании нажатой левой кнопки мыши.
  onreset - форма очищена. Событие возникает при очистке формы, происходящей при нажатии на кнопку типа Reset.
  onselect - выделен текст в поле формы. Событие применяется в текстовых полях и происходит, когда выделяется текст с помощью мышки или клавиатуры.
  onsubmit - форма отправлена. Событие возникает при отправке формы, это происходит, когда пользователь нажимает кнопку типа Submit, графическую кнопку (типа image).
  onunload - закрытие окна. Событие срабатывает в том случае, когда страница не загрузилась по каким-либо причинам, либо при удалении страницы из окна или фрейма.

  
  

  • Название страницы - название страницы, создаваемой в результате разделения материала.
  • Псевдоним Содержания - название ссылки на страницу, отображаемой в мини- меню.

  Помимо ссылки перехода по станицам, расположенной внизу каждой страницы (), справа в верхней части первой страницы появится мини- меню, со списком ссылок на вторую и последующие страницы материала. Благодаря мини-меню можно легко переходить со страницы на страницу используя их названия (псевдоним), а выбор пункта "Все страницы" позволяет вывести весь материал на одну страницу. Для удобства иконка разбиения материала на страницы дублируется кнопкой "Разрыв страницы", расположенной в нижней части редактора.
  - вставить/изменить изображение. Данная иконка появится в панели инструментов редактора после установки плагина Image Manager Extended, который существенно сэкономит Вам время и с его помощью Вы сможете: загружать изображения и изменять их размер при загрузке в менеджер изображений, создавать папки, переименовать, вырезать, копировать, вставлять и удалять папки и изображения, создавать и удалять изображения-миниатюры, создавать альтернативные изображения "Rollover Image", редактировать изображения в в встроенном редакторе изображений, создать всплывающие окна с изображениями, галереями и подсказками др.
  - вставить/изменить медиа-файл. Данная иконка появится в панели инструментов редактора после установки плагина Media Manager, который предназначен для загрузки и вставки в статьи сайта медиа-файлов (Flash, Windows Media, QuickTime и др.), позволяет легко вставлять фильмы с Youtube и имеет широкий спектр настроек.
  

  После обновления с Joomla! 1.5 до Joomla! 3.0 Я столкнулся с проблемой, которая заключается в выводе кода в статьи Joomla!. Так как известные мне плагины, такие как Source от NoNumber, еще не обновили для работы с новой версией движка нужно было искать методы для вывода и подсветки кода в статьи стандартными средствами. Я уже давно знал о родном плагине подсветки кода GeSHi, однако после неудачного с ним опыта практически никогда им и не пользовался. Но вопрос нужно было решать и Я, набравшись терпения, решил осилить этот плагин, и, как оказалось не зря. К тому же это оказалось сделать проще чем казалось...

  GeSHi оказался ничуть не хуже альтернатив, которых для Joomla! 3.0 сейчас нет, а для 2.5 не так и много. Работать с ним конечно не так удобного как например с Sourcer, приходится отключать редактор, но его возможности оказались далеко не скудными, как Я думал. Плагин GeSHi поддерживает следующие синтаксисы языков программирования:

  • html4strict
  • javascript
  • mysql
  • php-brief

  Довольно неплохой список, учитывая что плагин то стандартный. Найти их можно в папке plugins/content/geshi/geshi/geshi .

  Вызвать плагин можно следующей конструкцией: . Просто подставьте в параметр lang= нужный вам язык программирования и он обеспечит необходимую подсветку и вывод кода. Примеров работы сайта достаточно на моем сайте, например в этой статье о доработке категорий Joomla! 2.5 наглядно видно, как выводится и подсвечивается код. Так же увидите пример работы плагина ниже в этой статье.

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

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

  var $line_numbers = GESHI_NO_LINE_NUMBERS;

  Заменить на следующую:

  var $line_numbers = GESHI_NORMAL_LINE_NUMBERS;

  Все, у вас выводится еще и нумерация в выводе кода. Мне кажется, это лишнее, по крайней мере для моего сайта, поэтому Я нумерацию не включал.

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

  Pre { font-size : 9px ; background-color : #F6F6F6 ; width : 550px ; overflow : auto ; }

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

  Еще одна немаловажная деталь плагина GeSHi для Joomla это то, что он генерирует прямо в коде ссылки на документацию по определенным ключевым словам. Это с одной стороны очень удобно, но что если вы участвуете в биржах ссылок? Да и вообще много внешних ссылок на страницах это не есть хорошо по отношению к SEO. Для того, чтобы отключить добавление внешних ссылок по ключевым словам в GeSHi для Joomla нужно в файле plugins/content/geshi/geshi/geshi.php найти эту строчку:

  var $keyword_links = true ; И заменить ее на следующую: var $keyword_links = false ;

  Выше, как Я уже говорил, можно увидеть сразу два применения плагина GeSHi. Выводил и PHP и CSS, при этом не отключая редактора, а просто вставив через редактор HTML.

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

  Система Joomla 1.5 имеет поддержку отображения исходных кодов с помощью плагина «Content - Code Hightlighter (GeSHi) », который отображает отформатированный код в материалах и основан на движке GeSHi.
  Но для форматированного отображения исходного кода удобно использовать специальный плагин для его подсветки. Одним из таких плагинов есть Joomler SyntaxHighlighter , который прост в установки и использовании. Для своей работы этот плагин использует Javascript библиотеку SyntaxHighlighter 2.0.
  Скачать последнюю версию плагина можно на сайте разработчика по этой ссылке: http://www.joomler.net/download/81-joomla15-plugin.html

  Перед установкой на сайт плагин SyntaxHighligher 2.0.1 нужно сначала разархивировать на локальном компьютере, потому что он скачивается у двух архивах (архив в архиве).

  Чтобы установить плагин, в админ-панели заходим в меню «Расширения» и выбираем пункт «Установить/удалить», потом выбираем архив плагина и нажимаем кнопку «Загрузить файл & Установить».
  

  Теперь нужно активировать плагин. Для этого заходим в меню «Расширения» и выбираем пункт «Менеджер плагинов». В «Менеджере плагинов» ищем плагин «Content – SyntaxHighlighter» и включаем его, кликнув на белый крестик на красном кружке (рис. 2). Также можно зайти в настройки плагина и выбрать тему, которая будет определять стиль отображения исходного кода в статьях.
  
  

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

  Где параметр для brush определяет язык программирования, на котором Вы хотите выводить исходной код. Например, если Вы хотите выводить РНР код, то нужно указать brush: php.

  Этот параметр поддерживает такие языки программирования:
  as3, actionscript3, bash, shell, c-sharp, csharp, cpp, c, css, delphi, pas, pascal, diff, patch, groovy, js, jscript, javascript, java, jfx, javafx, perl, pl, php, plain, text, ps, powershell, py, python, rails, ror, ruby, scala, sql, vb, vbnet, xml, xhtml, xslt, html, xhtml.

  Также можно задать другие параметры:

  Параметры плагина

  Параметр	Значение по умолчанию	Описание
  auto-links	true	Определяет, нужно ли подсвечивать ссылки в коде и делать их кликабельными
  class-name	" "	Позволяет добавить класс пользователя
  collapse	false	Свернутый код
  first-line	1	Определяет номер первой строки
  gutter	true	Включает/выключает вертикальную линейку
  highlight	null	Подсвечивает одну или несколько строчек кода
  html-script	false	Позволяет подсветку разного HTML/XML кода
  light	false	Включает/выключает вертикальную и горизонтальную линейки
  smart-tabs	true	Функция wrap - включить полосу прокрутки (если длинный код)
  tab-size	4	Размер табуляции
  toolbar	true	Включает/выключает панель помощи
  wrap-lines	true	Включает smart-табуляцию
  ruler	false	Вставляет горизонтальную линейку

  Например, код
  ...
  Используется для отображения кодов языка Javascript, где подсвечены 2-я, 4-я и 6-я строчки, а также код начинается с 10 строчки.

  Добавлять этот код в статью нужно в режиме html (без графического редактора). Для этого в редакторе TinyMCE есть кнопка «Edit html source» (рис. 3).
  
  
  На сайте наш исходной код будет иметь такой красивый и читабельный вид (рис. 4):