Выделите синтаксис вашего кода с помощью PrismJS
Чтобы улучшить читаемость кода, добавляемого в публикацию в процессе написания, мы можем использовать подсветку синтаксиса, которая, как следует из названия, выделяет специальные ключевые слова, строковые значения, числа и т.д. определенными цветами, как в настольном редакторе кода, таком как Sublime Text.
![Реализация Prism.js на статическом веб-сайте](https://getpublii.com/docs/media/posts/38/prism-js-static-website.png)
Для реализации этой функции в некоторых наших темах мы решили использовать Prism.js, который написан на JavaScript и CSS и является очень удобным, легким и быстрым с красивой, четкой подсветкой.
Как добавить Prism.js подсветку синтаксиса на любой веб-сайт?
Реализация PrismJS действительно очень проста и не требует особых усилий или специальных знаний. Все, что вам нужно сделать, это:
- Перейдите на домашнюю страницу проекта PrismJS и нажмите большую кнопку ‘Загрузить’ в верхней части сайта, чтобы перейти на страницу загрузки. Вам нужно будет сгенерировать скрипт и CSS-файлы для реализации, предварительно добавив галочки ко всем языкам программирования, которые вы хотите, чтобы Prism распознавала при добавлении в публикацию, а также ко всем дополнительным плагинам Prism, которые вы хотели бы использовать; плагины не обязательны, но вы можете найти что-то интересное, что хотели бы попробовать.
- Подготовив скрипт, нажмите обе кнопки "Загрузить" внизу страницы, чтобы загрузить сгенерированные файлы prism.js и prism.css.
- Теперь вам нужно добавить оба загруженных файла на свою страницу:
- Вот и все, файлы теперь добавлены. Теперь, чтобы применить это на практике: используйте класс CSS, чтобы добавить один из выбранных вами поддерживаемых языков с первого шага в тег <code> в вашем сообщении (Prism поддерживает только тег code; это связано со спецификациями языка HTML5) в следующем формате: "language-{*язык*}".
Например, если вы хотите выделить css-код, то вашим классом CSS будет "язык-css". Для PHP это будет "язык-php". Список всех классов для каждого из доступных языков программирования можно найти здесь: https://prismjs.com/#languages-list
Информация: Полный пример того, как это работает Prism.js вы можете увидеть на этой странице, которая создана с помощью ProDocs Theme и создана с помощью Publii.
![Создайте веб-сайт документации с помощью PrismJs](https://getpublii.com/docs/media/files/create-website-prism-480.webp)
Как это можно Prism.js реализовать в теме без встроенной поддержки?
Добавление Prism.js в темы Publii ничем не отличается от добавления на любую другую страницу.
- Загрузите файлы Prism.js, следуя шагам, описанным выше (пункты 1, 2).
- Перейдите в папку "Темы" на вашем локальном компьютере (Documents-Publii-Your_Website-input-Your_themes) и скопируйте prism.js файл в папку assets/js и файл prism.css в папку assets/css.
- Теперь вам нужно загрузить эти файлы на свой веб-сайт:
- Откройте файл head.hbs (partials/head.hbs) и добавьте следующий код:
- и в footer.hbs (partials/footer.hbs) добавьте следующий код:
- Откройте файл head.hbs (partials/head.hbs) и добавьте следующий код:
- Вот и все. Теперь мы готовы использовать Prism. Просто выполните шаги 4 выше, чтобы увидеть, как это использовать в вашем посте.
Как изменить или добавить дополнительные языки Prism.js языки для темы, которая уже поддерживает PrismJS?
Все наши встроенные темы Prism.js поставляются с некоторыми более продвинутыми методами реализации. Например, они используют пользовательский стиль Prism CSS или плагины, которые при необходимости подключаются отдельно - это позволяет вам точно настроить Prism независимо от того, хотите ли вы полностью отключить функциональность Prism или только отдельные плагины / css (мы всегда ищем новые способы оптимизации скорости веб-сайта!)
По умолчанию, темы со встроенными Prism.js поддержка нескольких важных языков: language-markup, language-html, language-css, language-javascript, language-handlebars, language-less, language-php, language-scss
Также по умолчанию мы внедрили два плагина: номера строк и Копировать в буфер обмена. Первый отвечает за нумерацию строк кода, а второй позволяет легко копировать код в буфер обмена.
Что важно отметить при использовании плагина Line numbers, так это то, что языковые классы должны быть добавлены только в тег <code>, но класс Line numbers должен быть добавлен в тег <pre>. Не волнуйтесь, если вы забудете об этом правиле; редактор Publii не позволяет вам добавлять эти классы в неправильные теги, и он автоматически добавит их правильно.
Чтобы сэкономить время, вы можете использовать редактор WYSIWYG для быстрого добавления правильного CSS-класса в тег <code>:
![Редактор WYSIWYG с Prism.js](https://getpublii.com/docs/media/posts/38/wysiwyg-editor-prism.png)
Как добавить дополнительные языки:
После внедрения Prism.js Позже вы можете решить, что хотите добавить поддержку еще большего количества языков программирования из обширного списка, доступного на веб-сайте Prism.js. К счастью, это можно сделать, не начиная заново с нуля. Чтобы добавить языки, выполните следующие действия:
- Перейдите на домашнюю страницу проекта Prism (https://prismjs.com /), затем, как и раньше, на страницу загрузки и сгенерируйте файл сценария, выбрав только интересующие вас языки программирования; не выбирайте повторно никаких плагинов. Затем загрузите файл JavaScript.
Помните: не загружайте файл CSS, только файл prism.js.
- Скопируйте этот файл в папку js вашей темы (Documents/Publii /Your_Website /input / Your_Theme /assets /scripts /)
- Теперь язык необходимо добавить в редактор WYSIWYG. Откройте файл config.json (корень вашей темы), перейдите в нижнюю часть файла и теперь добавьте новый язык, используя следующий код, где ‘newlanguage-x’ - это код языка из списка на Prism.js веб-сайт:
Помните, что в последней записи не должно быть запятой в конце.
- Запустите Publii, и теперь вы сможете увидеть ваши новые языки в списке редакторов WYSIWYG.
Наслаждайтесь!