Все способы установки указаны на этой странице: 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>
Комментарии (0)
Пока еще не было комментариев ✍️