Звезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активна
 

Как включить подсветку кода highlight.js на сайте

Есть масса расширений (плагинов и модулей), которые включают подсветку кода на разных языках программирования на сайтах. Код подсветки, который можно просто внедрить с помощью highlight.js практически на любую страницу, будь то одностраничный лендинг написанный на HTML или навороченная CMS-ка, буквально за 10 минут, и он будет работать по всех современных браузерах и на всех устройствах (при условии, что у пользователя не отключена работа скриптов на JavaScript, но таких параноиков всё меньше и меньше). В этой статье рассмотрим пошаговую инструкцию того, как включить подсветку кода highlight.js на сайте.



Что нужно прописать в заголовке страницы для подключения подсветки кода highlight.js на сайте

Итак, для того, чтобы библиотека highlight.js заработала и стала подсвечивать код на разных языках программирования нужно

  • или прописать подключение JavaScript-файла и css-стилей шаблона с удалённого сервера. То как то сделать подробно описано в → этой статье.
    • Плюсы этого решения в том, что ничего не нужно заливать на сервер.
    • Минусы — ограниченный стандартный выбор языков программирования, код которых будет подсвечиваться на сайте, список подключенных языков может быть длиннее (а занчит, код больше). чем требуется и то, что всегда есть риск того, что сервер, на котором хранятся эти файлы, упадёт, закроется или просто владелец удалит эти файлы... и всё отвалится.
  • или собрать собственную библиотеку, выбрать шаблон подсветки кода и установить у себя на сайте, залив два (или три) файла к себе на сервер. Как это сделать, подробно описано в → этой статье.
    • Плюсы этого решения — это отсутствие минусов предыдущего способа + полное управление и контроль над файлами библиотеки и стилей, которые можно уже допиливать, если захочется.
    • Минусов я особо не вижу, при условии, что ваш сервер быстро отдаёт статику и правильно прописывает кэширование (время жизни) в браузере пользователя, но это уже тема настроек Apache и Nginx, которые рассмотрены в целом цикле статей на эту тему.

Как использовать библиотеку highlight.js для подсветки кода на сайте

После того, как требуемые файлы подключены в HTML-документ страницы сайта, остаётся применить библиотеку highlight.js в вёрстке. Для этого используется конструкция:

<pre><code class="обозначение_языка">
    тут собственно код
    на языке программирования,
    который нужно подсвечивать
</code></pre>

То есть, когда требуется подсветка кода, его (код) нужно обрамлять в контейнер <pre><code>...</code></pre>, и для того, чтобы управлять тем, синтаксис какого языка подсвечивается, нужно правильно использовать класс тега <code class="обозначение_языка">. Для этого нужно сопоставить название языка программирования с его обозначением в таблице ниже. При вставке класса, нужно использовать обозначение языка программирования (или одно из обозначений) из правого столбца. Названия языков находятся в левом столбце.

Языки, подсветка кода которых поддерживается библиотекой highlight.js

Название языка Код класса языка для вставки
1C 1c
ABNF abnf
Access logs accesslog
Ada ada
ARM assembler armasm, arm
AVR assembler avrasm
ActionScript actionscript, as
Apache apache, apacheconf
AppleScript applescript, osascript
AsciiDoc asciidoc, adoc
AspectJ aspectj
AutoHotkey autohotkey
AutoIt autoit
Awk awk, mawk, nawk, gawk
Axapta axapta
Bash bash, sh, zsh
Basic basic
BNF bnf
Brainfuck brainfuck, bf
C# cs, csharp
C++ cpp, c, cc, h, c++, h++, hpp
C/AL cal
Cache Object Script cos, cls
CMake cmake, cmake.in
Coq coq
CSP csp
CSS css
Cap’n Proto capnproto, capnp
Clojure clojure, clj
CoffeeScript coffeescript, coffee, cson, iced
Crmsh crmsh, crm, pcmk
Crystal crystal, cr
D d
DNS Zone file dns, zone, bind
DOS dos, bat, cmd
Dart dart
Delphi delphi, dpr, dfm, pas, pascal, freepascal, lazarus, lpr, lfm
Diff diff, patch
Django django, jinja
Dockerfile dockerfile, docker
dsconfig dsconfig
DTS (Device Tree) dts
Dust dust, dst
EBNF ebnf
Elixir elixir
Elm elm
Erlang erlang, erl
Excel excel, xls, xlsx
F# fsharp, fs
FIX fix
Fortran fortran, f90, f95
G-Code gcode, nc
Gams gams, gms
GAUSS gauss, gss
Gherkin gherkin
Go go, golang
Golo golo, gololang
Gradle gradle
Groovy groovy
HTML, XML xml, html, xhtml, rss, atom, xjb, xsd, xsl, plist
HTTP http, https
Haml haml
Handlebars handlebars, hbs, html.hbs, html.handlebars
Haskell haskell, hs
Haxe haxe, hx
Hy hy, hylang
Ini ini
Inform7 inform7, i7
IRPF90 irpf90
JSON json
Java java, jsp
JavaScript javascript, js, jsx
Leaf leaf
Lasso lasso, ls, lassoscript
Less less
LDIF ldif
Lisp lisp
LiveCode Server livecodeserver
LiveScript livescript, ls
Lua lua
Makefile makefile, mk, mak
Markdown markdown, md, mkdown, mkd
Mathematica mathematica, mma
Matlab matlab
Maxima maxima
Maya Embedded Language mel
Mercury mercury
Mizar mizar
Mojolicious mojolicious
Monkey monkey
Moonscript moonscript, moon
N1QL n1ql
NSIS nsis
Nginx nginx, nginxconf
Nimrod nimrod, nim
Nix nix
OCaml ocaml, ml
Objective C objectivec, mm, objc, obj-c
OpenGL Shading Language glsl
OpenSCAD openscad, scad
Oracle Rules Language ruleslanguage
Oxygene oxygene
PF pf, pf.conf
PHP php, php3, php4, php5, php6
Parser3 parser3
Perl perl, pl, pm
Pony pony
PowerShell powershell, ps
Processing processing
Prolog prolog
Protocol Buffers protobuf
Puppet puppet, pp
Python python, py, gyp
Python profiler results profile
Q k, kdb
QML qml
R r
RenderMan RIB rib
RenderMan RSL rsl
Roboconf graph, instances
Ruby ruby, rb, gemspec, podspec, thor, irb
Rust rust, rs
SCSS scss
SQL sql
STEP Part 21 p21, step, stp
Scala scala
Scheme scheme
Scilab scilab, sci
Shell shell, console
Smali smali
Smalltalk smalltalk, st
Stan stan
Stata stata
Stylus stylus, styl
SubUnit subunit
Swift swift
Test Anything Protocol tap
Tcl tcl, tk
TeX tex
Thrift thrift
TP tp
Twig twig, craftcms
TypeScript typescript, ts
VB.Net vbnet, vb
VBScript vbscript, vbs
VHDL vhdl
Vala vala
Verilog verilog, v
Vim Script vim
x86 Assembly x86asm
XL xl, tao
XQuery xpath, xq
Zephir zephir, zep

Заберите ссылку на статью к себе, чтобы потом легко её найти ;)

Выберите, то, чем пользуетесь чаще всего:

Спасибо за внимание, оставайтесь на связи! Ниже ссылка на форум и обсуждение ; )


Обсудить эту статью

INFO: Вы отправляете сообщение как 'Гость'