MODX: подсветка кода во фронтенд (на страницах)

MODX: подсветка кода во фронтенд (на страницах) MODX Revo
MODX — это мощная система управления контентом, которая позволяет разработчикам создавать динамичные веб-сайты. Однако, часто необходимо сделать сайт более функциональным: вставлять и подсвечивать код. В этой статье мы рассмотрим, как это сделать.

Информация для тех, кто хочет завести блог или сайт с документацией на MODX, где нужно выводить код, как в данном блоге.

Включаем кнопку добавления кода в TinyMCE (RTE)

Чтобы включить возможность добавления кода в TinyMCE (RTE), нужно включить плагин CodeSample и добавить его кнопку на панели редактора. Для этого идем в системные настройки:

  1. В настройку tinymcerte.plugins добавляем плагин codesample.
    добавляем плагин codesample
  2. Далее точно таким же способом добавляем его кнопку в тулбар, делается это в настройке tinymcerte.toolbar1

После этого у вас появится кнопка добавления кода.

Кнопка добавления кода

Нажав на которую вы увидите вот такое выплывающее окно.

Добавить/Изменить пример кода

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

  • HTML/XML
  • JavaScript
  • CSS
  • PHP
  • Ruby
  • Python
  • Java
  • C
  • C#
  • C++

Данный набор языков можно предопределить подключив свой конфигурационный файл к редактору. К примеру я создаю сайт с документацией по Bootstrap (вернее уже сделал) и мне нужны только языки: HTML/XML, CSS и Sass (SCSS).

Для этого создаем external-config.json со следующим содержимым:

{
	"codesample_languages": [{
			"text": "HTML/XML", "value": "markup"
		}, {
			"text": "JavaScript", "value": "javascript"
		}, {
			"text": "CSS", "value": "css"
		}, {
			"text": "Sass (SCSS)", "value": "scss"
		}]
}

Закидываем файл в assets/components и затем подключаем в системной настройке tinymcerte.external_config.

Подключаем внешний конфиг

Теперь у нас будет свой набор нужных нам языков:

Свой набор языков

Давайте попробуем вставить туда кусочек HTML кода:

Вставляем html

После этого заглянем в исходный код и увидим вот такую вставку:

Исходный код

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

<pre class="language-язык-вставки"><code>здесь код</code></pre>

Отображается по умолчанию он без какой либо подсветки:

Отображение данного кода в браузере

исправим это.

Подсветка вставленного кода во фронтенд

Для подсветки кода, я обычно использую небольшую настраиваемую JS библиотеку под названием prism.

Идем на страницу https://prismjs.com/download.html, выбираем тему, нужные языки и плагины.

Customize your download prism

Ну и скачиваем JS и CSS Prism

Скачиваем JS и CSS Prism

Заливаем файлы на сервер и подключаем к нужным шаблонам) Получаем подсвеченный код.

Отображение кода с подсветкой в браузере

Все. Теперь вы можете создать сайт с документаций.

Поделиться с друзьями
Алексей

Веб-дизайнер и SEO оптимизатор. Занимаюсь созданием сайтов с 2010 года и их продвижение с 2012 года!

Оцените автора
( Пока оценок нет )
Web-Revenue.ru
Добавить комментарий