Arx Syntax

A lightweight jQuery syntax highlighter for code blocks. Auto-detects language or set it explicitly. Supports HTML, CSS, JavaScript, JSON, and Bash.

jQuery Auto-detect 6 Languages Line Numbers

CDN

Add these tags to your page to use Arx Syntax hosted on library.darkvision.dev. Requires jQuery.

<link rel="stylesheet" href="https://library.darkvision.dev/syntax/css/syntax.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://library.darkvision.dev/syntax/js/syntax.js"></script>

https://library.darkvision.dev/syntax/css/syntax.css

https://library.darkvision.dev/syntax/js/syntax.js

Quick Start

One line enables everything

$('pre code').syntax();

With line numbers

$('pre code').syntax({ lineNumbers: true });

Features

Auto-detection — Detects language from class, data-lang, or content heuristics.

6 languages — HTML, CSS, JavaScript, JSON, Bash.

Line numbers — Render with a gutter column excluded from copy-paste.

Token-level classes — 19 named .arx-syn-* classes for full CSS control.

arx-themed — Uses --arx-* CSS variables for light/dark.

No dependencies — Pure JavaScript tokenizer, only needs jQuery.

Material palette — Carefully chosen token colours for readability.

Programmatic API — ArxSyntax.highlight(el, lang), ArxSyntax.languages().

Examples

See the syntax highlighter in action on HTML, CSS, JavaScript, JSON, and Bash code blocks.

Documentation

Full API reference — languages, auto-detection, options, styling tokens, and download.