Подсветка синтаксиса на сайте — Highlight.js

    Разное    150
Подсветка синтаксиса на сайте — Highlight.js

Все способы установки указаны на этой странице: https://highlightjs.org/download

Demo: https://highlightjs.org/static/demo

Подключаем скрипт highlight.min.js и любую тему из папки styles

<link rel="stylesheet" href="css/github.min.css">
<script src="js/highlight.min.js"></script>

Запускаем скрипт:

<script>hljs.highlightAll();</script>

Нумерацию строк можно сделать с помощью ещё одного плагина highlightjs-line-numbers.js

Сайт: http://wcoder.github.io/highlightjs-line-numbers.js

Из папки dist берём файл highlightjs-line-numbers.min.js, подключаем его и запускаем скрипт:

<script src="js/highlightjs-line-numbers.min.js"></script>
<script>hljs.initLineNumbersOnLoad();</script>

Немного поправим стили:

<link rel="stylesheet" href="css/github-custom.css">
pre {
  position: relative;
  border: none!important;
  padding: 0!important;
  margin-bottom: 15px!important;
  font-size: 14px!important;
}
pre code {
  background: #FBFBFB!important;
  font-size: 13.5px!important;
  white-space: pre;
}
.hljs{display:block;overflow-x:auto;padding:10px;background:white;color:black;-moz-tab-size: 3;-o-tab-size: 3;tab-size: 3;}
.hljs-comment,.hljs-quote{color:#008000;}
.hljs-variable{color:#000042;}
.hljs-keyword,.hljs-selector-tag,.hljs-built_in,.hljs-name,.hljs-tag{color:#00f;}
.hljs-string,.hljs-title,.hljs-section,.hljs-attribute,.hljs-literal,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-addition{color:#a31515;}
.hljs-deletion,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-meta{color:#2b91af;}
.hljs-doctag{color:#808080;}
.hljs-attr{color:#f00;}
.hljs-symbol,.hljs-bullet,.hljs-link{color:#00b0e8;}
.hljs-emphasis{font-style:italic;}
.hljs-strong{font-weight:bold;}

.hljs-ln-numbers{text-align:right;border-right: 1px solid #ccc;padding:0 5px 0 0!important;color:#999;-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
.hljs-ln-code{padding:0 0 0 10px!important;}

Проверяем работу плагина:

<pre><code class="lang-js">$.post('/index.php', {text: 'Текст'}, function(data){
	alert(data);
});</code></pre>

Другие записи по теме Разное