Визуальные улучшения, дизайн, Расширения, виджеты

Подсветка кода в Yii2 с помощью highlight.js

Все программные редакторы используют подсветку кода. В блогах о веб-разработке тоже имеет смысл для ясности подсветить код.

Подсветка кода в Yii2 с помощью highlight.js

Приглянулась библиотека highlightjs.org для подсветки кода. Можно выбрать стиль подсветки, а также язык программирования, код которого хотим подсветить (вообще библиотека сама что за код и подсвечивает как надо).

Вот короткая документация, как прицепить highlight.js к любому сайту.

Применительно к Yii2, удобно использовать расширение yii2-highlightjs. Настройки задаём в конфигурационном массиве. Все возможные опции смотрите здесь.

Примеры подсветки разных кодов на этом сайте (yiico.ru)

PHP

'components' => [
        ...
        'assetManager' => [
            'bundles' => [
                'nezhelskoy\highlight\HighlightAsset' => [
                    'selector' => 'pre',
                    'options' => [
                        'classPrefix' => 'custom-',
                        'useBR' => true,
                    ],
                    'css' => ['dist/styles/github.css'],
                ],
            ]
        ],
        ...
    ],

CSS

.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  background: #474949;
  color: #d1d9e1;
  -webkit-text-size-adjust: none;
}
.hljs-body,
.hljs-collection {
   color: #d1d9e1;
}
.hljs-comment,
.diff .hljs-header,
.hljs-doctype,
.lisp .hljs-string {
  color: #969896;
  font-style: italic;
}

HTML

<div class="center-blackout">
<header class="intro-header mb0" themes="" inspire="" img="" about-bg.jpg"="" ?=">')" ><br="">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
            </div>
        </div>
    </div></header>
</div>

Из аналогичных решений интересна библиотека Google-code-prettify (http://www.sooource.net/bootstrap-podsvetka-koda-s...). Меня пока устроило решение с highlight.js


Читайте также