Сайт ищет нового владельца по разумной цене :) По всем вопросам: promonik1@ya.ru, skype: nik-luck007, https://vk.com/promonik
2
Вы не авторизованы!
Присоединяйтесь к нашему сообществу :)
авторизация
Вакансии
На сайт требуется контент-менеджер
смотреть вакансии
HighLight.js — Подсветка синтаксиса кода для uCoz

HighLight.js — Подсветка синтаксиса кода для uCoz

Скрипты для uCoz 2017-Мар-07 proucoz 239 6 0

Для порталов подобно нашему, да и вообще любому порталу, где требуется публиковать код, необходим качественный плагин для подсветки синтаксиса кода. При этом он должен отвечать следующим основным требованиям:

  • малый вес
  • поддержка большого количества языков
  • гибкая настройка тем оформления
  • простота подключения и использования

Всем этим требованиям отвечал плагин HighLight.js. В рамках этой статьи рассмотрим пример, когда подсветка кода будет использоваться для стандартных системных BB-кодов, в частности, CODE.

Установка

Итак, сперва загрузите архив со скриптом и загрузите файл highlight.pack.js в папку js. Затем в шаблоне «Страница материала и комментариев к нему» в самый низ установите следующий код:

Код
<script type="text/javascript" src="/js/highlight.pack.js"></script>  <script>  $(function () {   $('.codeMessage').each(function(i, block) {  hljs.highlightBlock(block);  });  }); </script>

Осталось разместить стили CSS цветовой схемы. Перейдите в шаблон «Таблица стилей (CSS)» и разместите следующий код:

Код
.hljs {  display: block;  overflow-x: auto; }  .hljs-comment, .hljs-quote {  color: #5c6370;  font-style: italic; }  .hljs-doctag, .hljs-keyword, .hljs-formula {  color: #c678dd; }  .hljs-section, .hljs-name, .hljs-selector-tag, .hljs-deletion, .hljs-subst {  color: #e06c75; }  .hljs-literal {  color: #56b6c2; }  .hljs-string, .hljs-regexp, .hljs-addition, .hljs-attribute, .hljs-meta-string {  color: #98c379; }  .hljs-built_in, .hljs-class .hljs-title {  color: #e6c07b; }  .hljs-variable, .hljs-template-variable, .hljs-type, .hljs-selector-class, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-number {  color: #d19a66; }  .hljs-symbol, .hljs-bullet, .hljs-link, .hljs-meta, .hljs-selector-id, .hljs-title {  color: #61aeee; }  .hljs-emphasis {  font-style: italic; }  .hljs-strong {  font-weight: bold; }  .hljs-link {  text-decoration: underline; }

На этом установка завершена. Можно добавить выделение всего кода по клику, для этого в шаблоне «Страница материала и комментариев к нему» также в самом низу установите следующий код:

Код
<script>  $(function () {  $('.codeMessage').click(function() {  var e = this;  if (window.getSelection) {  var s = window.getSelection();  if (s.setBaseAndExtent) {  s.setBaseAndExtent(e, 0, e, e.innerText.length - 1);  } else {  var r = document.createRange();  r.selectNodeContents(e);  s.removeAllRanges();  s.addRange(r);  }  } else if (document.getSelection) {  var s = document.getSelection();  var r = document.createRange();  r.selectNodeContents(e);  s.removeAllRanges();  s.addRange(r);  } else if (document.selection) {  var r = document.body.createTextRange();  r.moveToElementText(e);  r.select();  }  });  });  </script>
Источник: https://proucoz.site/
0 комментариев
avatar