Для порталов подобно нашему, да и вообще любому порталу, где требуется публиковать код, необходим качественный плагин для подсветки синтаксиса кода. При этом он должен отвечать следующим основным требованиям:
- малый вес
- поддержка большого количества языков
- гибкая настройка тем оформления
- простота подключения и использования
Всем этим требованиям отвечал плагин 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>
2017-Мар-18 730 0
2017-Мар-17 651 4
2017-Мар-12 629 0
2017-Фев-22 1117 2