Skip to content

w3suli/highlight.js

 
 

Repository files navigation

Highlight.js

Build Status Greenkeeper badge

Highlight.js is a syntax highlighter written in JavaScript. It works in the browser as well as on the server. It works with pretty much any markup, doesn’t depend on any framework, and has automatic language detection.

Getting Started

The bare minimum for using highlight.js on a web page is linking to the library along with one of the styles and calling initHighlightingOnLoad:

<link rel="stylesheet" href="/path/to/styles/default.css">
<script src="/path/to/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

This will find and highlight code inside of <pre><code> tags; it tries to detect the language automatically. If automatic detection doesn’t work for you, you can specify the language in the class attribute:

<pre><code class="html">...</code></pre>
The list of supported languages and corresponding classes.
Language Classes Package
1C 1c
ABNF abnf
Access logs accesslog
Ada ada
ARM assembler armasm, arm
AVR assembler avrasm
ActionScript actionscript, as
Alan alan, i highlightjs-alan
AngelScript angelscript, asc
Apache apache, apacheconf
AppleScript applescript, osascript
Arcade arcade
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
Cypher (Neo4j) cypher highlightjs-cypher
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
Dylan dylan highlight-dylan
EBNF ebnf
Elixir elixir
Elm elm
Erlang erlang, erl
Excel excel, xls, xlsx
Extempore extempore, xtlang, xtm highlightjs-xtlang
F# fsharp, fs
FIX fix
Fortran fortran, f90, f95
G-Code gcode, nc
Gams gams, gms
GAUSS gauss, gss
GDScript godot, gdscript highlightjs-gdscript
Gherkin gherkin
GN for Ninja gn, gni highlightjs-GN
Go go, golang
Golo golo, gololang
Gradle gradle
Groovy groovy
HTML, XML xml, html, xhtml, rss, atom, xjb, xsd, xsl, plist, svg
HTTP http, https
Haml haml
Handlebars handlebars, hbs, html.hbs, html.handlebars
Haskell haskell, hs
Haxe haxe, hx
Hy hy, hylang
Ini, TOML ini, toml
Inform7 inform7, i7
IRPF90 irpf90
JSON json
Java java, jsp
JavaScript javascript, js, jsx
Kotlin kotlin, kt
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, wl
Matlab matlab
Maxima maxima
Maya Embedded Language mel
Mercury mercury
mIRC Scripting Language mirc, mrc highlightjs-mirc
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
Plaintext: no highlight plaintext
Pony pony
PostgreSQL & PL/pgSQL pgsql, postgres, postgresql
PowerShell powershell, ps, ps1
Processing processing
Prolog prolog
Properties properties
Protocol Buffers protobuf
Puppet puppet, pp
Python python, py, gyp
Python profiler results profile
Q k, kdb
QML qml
R r
Razor CSHTML cshtml, razor, razor-cshtml highlightjs-cshtml-razor
ReasonML reasonml, re
RenderMan RIB rib
RenderMan RSL rsl
Roboconf graph, instances
Robot Framework robot, rf highlightjs-robot
RPM spec files rpm-specfile, rpm, spec, rpm-spec, specfile highlightjs-rpm-specfile
Ruby ruby, rb, gemspec, podspec, thor, irb
Rust rust, rs
SAS SAS, sas
SCSS scss
SQL sql
STEP Part 21 p21, step, stp
Scala scala
Scheme scheme
Scilab scilab, sci
Shape Expressions shexc highlightjs-shexc
Shell shell, console
Smali smali
Smalltalk smalltalk, st
Solidity solidity, sol highlightjs-solidity
Stan stan
Stata stata
Structured Text iecst, scl, stl, structured-text highlightjs-structured-text
Stylus stylus, styl
SubUnit subunit
Supercollider supercollider, sc highlightjs-supercollider
Swift swift
Tcl tcl, tk
Terraform (HCL) terraform, tf, hcl highlightjs-terraform
Test Anything Protocol tap
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 xquery, xpath, xq
YAML yml, yaml
Zephir zephir, zep

Languages with the specified package name are defined in separate repositories and not included in highlight.pack.js.

Classes can also be prefixed with either language- or lang-.

To make arbitrary text look like code, but without highlighting, use the plaintext class:

<pre><code class="plaintext">...</code></pre>

To disable highlighting altogether use the nohighlight class:

<pre><code class="nohighlight">...</code></pre>

Custom Initialization

When you need a bit more control over the initialization of highlight.js, you can use the highlightBlock and configure functions. This allows you to control what to highlight and when.

Here’s an equivalent way to calling initHighlightingOnLoad using vanilla JS:

document.addEventListener('DOMContentLoaded', (event) => {
  document.querySelectorAll('pre code').forEach((block) => {
    hljs.highlightBlock(block);
  });
});

You can use any tags instead of <pre><code> to mark up your code. If you don't use a container that preserves line breaks you will need to configure highlight.js to use the <br> tag:

hljs.configure({useBR: true});

document.querySelectorAll('div.code').forEach((block) => {
  hljs.highlightBlock(block);
});

For other options refer to the documentation for configure.

Web Workers

You can run highlighting inside a web worker to avoid freezing the browser window while dealing with very big chunks of code.

In your main script:

addEventListener('load', () => {
  const code = document.querySelector('#code');
  const worker = new Worker('worker.js');
  worker.onmessage = (event) => { code.innerHTML = event.data; }
  worker.postMessage(code.textContent);
});

In worker.js:

onmessage = (event) => {
  importScripts('<path>/highlight.pack.js');
  const result = self.hljs.highlightAuto(event.data);
  postMessage(result.value);
};

Node.js

You can use highlight.js with node to highlight content before sending it to the browser. Make sure to use the .value property to get the formatted html. For more info about the returned object refer to the api docs https://highlightjs.readthedocs.io/en/latest/api.html

// require the highlight.js library including all languages
const hljs = require('./highlight.js');
const highlightedCode = hljs.highlightAuto('<span>Hello World!</span>').value
// require the highlight.js library without languages
const hljs = require("highlight.js/lib/highlight.js");
// separately require languages
hljs.registerLanguage('html', require('highlight.js/lib/languages/html'));
hljs.registerLanguage('sql', require('highlight.js/lib/languages/sql'));
// highlight with providing the language
const highlightedCode = hljs.highlight('html', '<span>Hello World!</span>').value

Getting the Library

You can get highlight.js as a hosted, or custom-build, browser script or as a server module. Right out of the box the browser script supports both AMD and CommonJS, so if you wish you can use RequireJS or Browserify without having to build from source. The server module also works perfectly fine with Browserify, but there is the option to use a build specific to browsers rather than something meant for a server. Head over to the download page for all the options.

Don't link to GitHub directly. The library is not supposed to work straight from the source, it requires building. If none of the pre-packaged options work for you refer to the building documentation.

The CDN-hosted package doesn't have all the languages. Otherwise it'd be too big. If you don't see the language you need in the "Common" section, it can be added manually:

<script
 charset="UTF-8"
 src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.9/languages/go.min.js"></script>

On Almond. You need to use the optimizer to give the module a name. For example:

r.js -o name=hljs paths.hljs=/path/to/highlight out=highlight.js

CommonJS

You can import Highlight.js as a CommonJS-module:

npm install highlight.js --save

In your application:

import hljs from 'highlight.js';

The default import imports all languages! Therefore it is likely to be more efficient to import only the library and the languages you need:

import hljs from 'highlight.js/lib/highlight';
import javascript from 'highlight.js/lib/languages/javascript';
hljs.registerLanguage('javascript', javascript);

To set the syntax highlighting style, if your build tool processes CSS from your JavaScript entry point, you can import the stylesheet directly into your CommonJS-module:

import hljs from 'highlight.js/lib/highlight';
import 'highlight.js/styles/github.css';

License

Highlight.js is released under the BSD License. See LICENSE file for details.

Links

The official site for the library is at https://highlightjs.org/.

Further in-depth documentation for the API and other topics is at http://highlightjs.readthedocs.io/.

Authors and contributors are listed in the AUTHORS.en.txt file.

About

Javascript syntax highlighter

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 89.6%
  • CSS 9.8%
  • HTML 0.3%
  • Groovy 0.1%
  • Hy 0.1%
  • Scheme 0.1%