Arx Syntax — Documentation

Installation

Link the CSS in <head>, jQuery, and the plugin before </body>.

HTML

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

Basic Usage

Call .syntax() on <pre><code> blocks. The plugin reads the raw text content and wraps tokens in <span> elements.

HTML

<pre><code class="language-js">
function greet(name) {
    return `Hello, ${name}!`;
}
</code></pre>

JavaScript

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

Specify a language explicitly with the language option or via data-lang:

JavaScript

<!-- Per-element override -->
<pre><code data-lang="bash">
npm install && npm run build
</code></pre>

<!-- Global override -->
$('pre code').syntax({ language: 'js' });

Auto-Detection

If no language is specified, the plugin guesses from class names, content patterns, or data-lang.

Detection method	Example
`class="language-js"`	Uses `language-` or `lang-` on the `<code>` or `<pre>`
`data-lang="bash"`	Explicit `data-lang` attribute
JSON	Starts with `{` or `[`
Bash	Starts with `#!` or common shell commands
HTML	Contains `<tag` patterns
JavaScript	Contains `function`, `var`, `=>`, etc.
CSS	Contains selectors, properties, `@rules`

Line Numbers

Enable with lineNumbers: true. Line numbers are rendered as .arx-syn-ln spans with user-select: none — they are visible but excluded from copy-paste. The gutter width auto-sizes to fit the widest line number.

JavaScript

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

Supported Languages

Language	Key	Tokens highlighted
HTML	`html`	Tags, attributes, values, comments, entities, doctype
CSS	`css`	Selectors, properties, values, units, at-rules, pseudo-classes, colors, `var()`
JavaScript	`js`	Keywords, built-ins, strings (all quote types), numbers, regex, comments
JSON	`json`	Strings, numbers, booleans, null, punctuation
Bash	`bash`	Commands, keywords, flags, variables, strings, comments

List available languages at runtime:

JavaScript

ArxSyntax.languages();
// ["html", "css", "js", "json", "bash"]

Options

Pass an object to .syntax(options).

Option	Type	Default	Description
`language`	`string`	`null`	Force language (`html`, `css`, `js`, `json`, `bash`). `null` = auto-detect.
`lineNumbers`	`boolean`	`false`	Show line numbers. Uses `user-select: none` — excluded from copy-paste.
`showLang`	`boolean`	`false`	Add `data-lang` attribute to highlighted blocks.
`copyButton`	`boolean`	`false`	Add a Copy button to the top-right of the code block. Uses `navigator.clipboard.writeText`.

API

The global ArxSyntax object provides direct access.

Method	Description
`ArxSyntax.highlight(el, lang)`	Highlight a single element with an explicit language.
`ArxSyntax.languages()`	Returns array of available language keys.

Styling

The wrapper gets class .arx-syntax (uses arx CSS variables for theming). Token spans use .arx-syn-* classes. Override after importing syntax.css.

Class	Token type
`.arx-syntax`	Wrapper on highlighted code block
`.arx-syntax-ln`	Variant wrapper when line numbers are enabled
`.arx-syn-ln`	Line number gutter span (unselectable)
`.arx-syn-keyword`	Keywords (`function`, `return`, `if`)
`.arx-syn-builtin`	Built-in objects (`console`, `Math`)
`.arx-syn-string`	String literals
`.arx-syn-number`	Numeric literals
`.arx-syn-comment`	Comments (line and block)
`.arx-syn-boolean`	Booleans, `null`, `undefined`
`.arx-syn-tag`	HTML tags
`.arx-syn-attr`	HTML attributes
`.arx-syn-entity`	HTML entities (`&`)
`.arx-syn-doctype`	DOCTYPE declarations
`.arx-syn-selector`	CSS selectors (`.class`, `#id`)
`.arx-syn-property`	CSS properties
`.arx-syn-pseudo`	CSS pseudo-classes / elements
`.arx-syn-punct`	Punctuation (`{}`, `;`)
`.arx-syn-atrule`	CSS at-rules (`@media`)
`.arx-syn-regex`	Regular expression literals
`.arx-syn-variable`	Bash variables (`$PATH`)
`.arx-syn-flag`	Bash flags (`--verbose`)

Download

Download individual plugin files or grab the full package as a ZIP from the Library page.

File	Description
`README.md`	Installation, usage, language reference	Download
`css/syntax.css`	Code block and token color styles	Download
`js/syntax.js`	jQuery plugin — tokenizer and highlight engine	Download