10:46 Четверг 2025
Статистика Форума
Последние обновленные темы Самые популярные темы Самые активные Новые участники
Время в профиле прош... (0)
КПК - персональная с... (0)
Вид цитаты и code st... (0)
СТАЛКЕРСКИЙ МИНИ-ПРО... (0)
БЛОК ИНТЕРЕСНЫХ ФАКТ... (0)
Гид по Народной Соля... (27)
Бар «От заката до ра... (18)
Гид по прохождению м... (16)
Азы модостроения (14)
Баги и ошибки на сай... (8)
XemorDio(died) (626)
Бармен (146)
ExGooD (48)
habib (37)
Rayviner (19)
maksimstebnovskij5 (02.03.2023)
slitkovets (30.10.2022)
ianoiano62 (29.01.2022)
Timkalv (20.09.2021)
Myloisonau (03.09.2021)

  • Страница 1 из 1
  • 1
Отличная подсветка синтаксиса кода «PRISM»
XemorDio(died)Дата: Суббота, 09.01.2016, 20:29 | Сообщение # 1
Генерал-лейтенант
Группа: Свобода
Сообщений: 626
Награды: 3
Репутация: 4
Статус:

В данном материале рассмотрим установку отличного плагина для подсветки кода под названием «PRISM».

Сейчас на любом сайте, в котором описываются алгоритмы на каких-либо языках программирования, присутствуют фрагменты кода. А выделение синтаксиса намного облегчает понимание написанного. Сегодня доступно немало способов добавления подсветки синтаксиса на свой портал, в зависимости от того, какие языки вы используете и как именно вам нужно отображать свой код.
Скачать "Отличная подсветка синтаксиса кода «PRISM»" [4.9Kb]
Этот чудесный плагин очень миниатюрен (всего 1.5КБ в сжатом виде), с легкостью может быть установлен на любую страницу (нужно просто вставить файлы CSS и JS), стабилен, да и работает невероятно быстро.

В «PRISM» можно с легкостью добавлять новые языки, а сам функционал может быть обновлен посредством архитектуры плагина. Для редактирования внешнего вида достаточно изменить CSS-файл.

Установка:
Итак, скачиваем архив, прикрепленный к материалу, и заливаем к себе на сайт. Далее, на страницах, где вы хотели видеть данную подсветку, необходимо подключить сам jQuery-скрипт и файл со стилями (светлая и темная темы):


Перед тегом вставляем скрипт:
Код
<link rel="stylesheet" href="/prism/light.css">  
<script src="/prism/prism.js" type="text/javascript" charset="utf-8"></script>

Для светлой темы измените light.css на dark.css

Для каждого языка нужно использовать свой класс:

1. HTML, XML, PHP ⇒ Язык разметки
2. CSS ⇒ Язык CSS
3. JavaScript ⇒ Язык JS

Код заключаем в теги следующим образом:
Код
<pre><code class="language-markup"> ...Ваш код HTML, XML, PHP здесь ... </code></pre>
<pre><code class="language-css"> ...Ваш код CSS здесь ... </code></pre>
<pre><code class="language-javascript"> ...Ваш код JavaScript здесь ... </code></pre>


Установка завершена!
 
  • Страница 1 из 1
  • 1
Поиск: