Есть масса расширений (плагинов и модулей), которые включают подсветку кода на разных языках программирования на сайтах. Код подсветки, который можно просто внедрить с помощью 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 |
Заберите ссылку на статью к себе, чтобы потом легко её найти!
Раз уж досюда дочитали, то может может есть желание рассказать об этом месте своим друзьям, знакомым и просто мимо проходящим?
Не надо себя сдерживать! ;)
