Информация для тех, кто хочет завести блог или сайт с документацией на MODX, где нужно выводить код, как в данном блоге.
Включаем кнопку добавления кода в TinyMCE (RTE)
Чтобы включить возможность добавления кода в TinyMCE (RTE), нужно включить плагин CodeSample и добавить его кнопку на панели редактора. Для этого идем в системные настройки:
- В настройку tinymcerte.plugins добавляем плагин codesample.
- Далее точно таким же способом добавляем его кнопку в тулбар, делается это в настройке 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 кода:
После этого заглянем в исходный код и увидим вот такую вставку:
Наш код немного видоизменился, некоторые элементы изменены на спец символы + весть код стал обвернут в:
<pre class="language-язык-вставки"><code>здесь код</code></pre>Отображается по умолчанию он без какой либо подсветки:
исправим это.
Подсветка вставленного кода во фронтенд
Для подсветки кода, я обычно использую небольшую настраиваемую JS библиотеку под названием prism.
Идем на страницу [mask_link href=»https://prismjs.com/download.html» target=»_blank»]https://prismjs.com/download.html[/mask_link], выбираем тему, нужные языки и плагины.
Ну и скачиваем JS и CSS Prism
Заливаем файлы на сервер и подключаем к нужным шаблонам) Получаем подсвеченный код.
Все. Теперь вы можете создать сайт с документаций.
