ФОРУМ PS-Studio.Info

  • Страница 1 из 1
  • 1
Форум » Форум по uCoz: работа с сайтом - дополнения и изменения » Общий форум » Подсветка листинга кода для uCoz (Разнообразное оформление, найди по душе)
Подсветка листинга кода для uCoz
Дата: Сб, 07.04.2018, 22:28 Сообщение # 1
ps-studio
Администраторы


Сегодня будем подключать различные варианты подсветки кода для сайтов на uCoz, причём, для того, чтобы подсветка заработала, вам не придётся закачивать на свой сайт никаких файлов, скриптов и прочего!
Установка быстрая и простая. А для оформления листингов кода вы по-прежнему будете пользоваться системными кодами uCoz.

Итак, начнём.

Допустим, вам нужно сменить оформление листинга кода, который вы добавили в каких-то материалах (или комментариях) на странице материала новостей. Как это сделать?
Переходим в Панель управления сайтом, в Редактор страниц - Управление дизайном модуля, выбираем в списке шаблон "Новости сайта - Страница материала и комментариев к нему" , в самом низу кода шаблона, перед закрывающим тегом body, вставляем:

Код

<script>
$(function () { $('.codeMessage').each(function(i, block) { hljs.highlightBlock(block); }); });  
</script>
<script src='https://highlightjs.org/static/highlight.pack.js'/></script>
<script type='text/javascript'>hljs.initHighlightingOnLoad();</script>


Главное сделано! Теперь нам лишь остаётся в таблице стилей CSS (в самой нижней части её кода) добавить стили оформления подсветки.

Где брать стили для подсветки?

Заходим сюда, слева видим список с названием "Styles", выбираем в нём название схемы подсветки, справа вы можете сразу увидеть результат, каким будет оформление вашего кода)

Например, выбрали в списке схему Agate. Вам она понравилась. Где взять CSS-стили для этой схемы? Стили для схем берём отсюда. Находим в списке стили схемы Agate, это файл agate.css, жмём на него и откроется окно css-стилей, копируем стили из этого окна и вставляем их в в шаблон "Таблица стилей (CSS)" своего сайта, в самый конец. Любуемся результатом.

P.S.: чтобы код выглядел более эстетично, я дополнительно добавил в файл стилей следующее:

Код

.hljs {
font-size: medium;
font-family: monospace;
}


Вот и всё подключение подсветки.

Один момент: файл скрипта highlight.pack.js , хоть вам и не приходится при установке закачивать его на свой сайт, весит, сам по себе, 514 кб. Если вы хотите уменьшить размер этого файла, кастомизируйте его (проще говоря, подгоните под свои нужды).
Кастомизацию файла скрипта можно сделать на официальном сайте скрипта. Зайдите по ссылке, отметьте необходимое галочками, после чего скачайте приготовленный именно под ваши запросы файл скрипта и подключите его на своём сайте .
Прикрепления: 3338504.jpg(123.7 Kb)
профиль www Вверх
Форум » Форум по uCoz: работа с сайтом - дополнения и изменения » Общий форум » Подсветка листинга кода для uCoz (Разнообразное оформление, найди по душе)
  • Страница 1 из 1
  • 1
Поиск: