Выделите синтаксис вашего кода с помощью PrismJS

Чтобы улучшить читаемость кода, добавляемого в публикацию в процессе написания, мы можем использовать подсветку синтаксиса, которая, как следует из названия, выделяет специальные ключевые слова, строковые значения, числа и т.д. определенными цветами, как в настольном редакторе кода, таком как Sublime Text.

Реализация Prism.js на статическом веб-сайте

Для реализации этой функции в некоторых наших темах мы решили использовать Prism.js, который написан на JavaScript и CSS и является очень удобным, легким и быстрым с красивой, четкой подсветкой.

Как добавить Prism.js подсветку синтаксиса на любой веб-сайт?

Реализация PrismJS действительно очень проста и не требует особых усилий или специальных знаний. Все, что вам нужно сделать, это:

Перейдите на домашнюю страницу проекта PrismJS и нажмите большую кнопку ‘Загрузить’ в верхней части сайта, чтобы перейти на страницу загрузки. Вам нужно будет сгенерировать скрипт и CSS-файлы для реализации, предварительно добавив галочки ко всем языкам программирования, которые вы хотите, чтобы Prism распознавала при добавлении в публикацию, а также ко всем дополнительным плагинам Prism, которые вы хотели бы использовать; плагины не обязательны, но вы можете найти что-то интересное, что хотели бы попробовать.
Подготовив скрипт, нажмите обе кнопки "Загрузить" внизу страницы, чтобы загрузить сгенерированные файлы prism.js и prism.css.

Теперь вам нужно добавить оба загруженных файла на свою страницу:

  <!DOCTYPE html> 
  <html> 
  <head> 
     <link href="css/prism.css" rel="stylesheet" /> 
  </head> 
  <body> 
  
     <script src="scripts/prism.js"></script> 
  </body> 
  </html>

Вот и все, файлы теперь добавлены. Теперь, чтобы применить это на практике: используйте класс CSS, чтобы добавить один из выбранных вами поддерживаемых языков с первого шага в тег <code> в вашем сообщении (Prism поддерживает только тег code; это связано со спецификациями языка HTML5) в следующем формате: "language-{*язык*}".
Например, если вы хотите выделить css-код, то вашим классом CSS будет "язык-css". Для PHP это будет "язык-php". Список всех классов для каждого из доступных языков программирования можно найти здесь: https://prismjs.com/#languages-list
```
<pre>
   <code class="language-css">

      ::placeholder {
          color: var(--placeholder);
          opacity: 1;
      }

   </code>
</pre>
```
Копировать

Информация: Полный пример того, как это работает Prism.js вы можете увидеть на этой странице, которая создана с помощью ProDocs Theme и создана с помощью Publii.

Создайте веб-сайт документации с помощью PrismJs

Как это можно Prism.js реализовать в теме без встроенной поддержки?

Добавление Prism.js в темы Publii ничем не отличается от добавления на любую другую страницу.

Загрузите файлы Prism.js, следуя шагам, описанным выше (пункты 1, 2).
Перейдите в папку "Темы" на вашем локальном компьютере (Documents-Publii-Your_Website-input-Your_themes) и скопируйте prism.js файл в папку assets/js и файл prism.css в папку assets/css.
Теперь вам нужно загрузить эти файлы на свой веб-сайт:
1. Откройте файл head.hbs (partials/head.hbs) и добавьте следующий код:
```
<link rel="stylesheet" href="{{css "prism.css" }}">
```
2. и в footer.hbs (partials/footer.hbs) добавьте следующий код:
```
<script defer src="{{js "prism.js"}}"></script>
```
Вот и все. Теперь мы готовы использовать 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>:

Как добавить дополнительные языки:

После внедрения 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 веб-сайт:
```
  {
     "label": "Code-scss", 
     "cssClasses": "language-newlanguage-1", 
     "selector": "code" 
  },
  { 
     "label": "Code-scss", 
     "cssClasses": "language-newlanguage-2", 
     "selector": "code" 
  }
```
Помните, что в последней записи не должно быть запятой в конце.
Запустите Publii, и теперь вы сможете увидеть ваши новые языки в списке редакторов WYSIWYG.

Наслаждайтесь!

Как добавить Prism.js подсветку синтаксиса на любой веб-сайт?

Как это можно Prism.js реализовать в теме без встроенной поддержки?

Как изменить или добавить дополнительные языки Prism.js языки для темы, которая уже поддерживает PrismJS?

Как добавить дополнительные языки:

Subscribe