Arx Syntax

A lightweight jQuery syntax highlighter for code blocks. Detects language automatically or set it explicitly.

jQuery Auto-detect 6 Languages

JavaScript

function fibonacci(n) {
    if (n <= 1) return n;
    return fibonacci(n - 1) + fibonacci(n - 2);
}

// Generate first 10 numbers
const results = [];
for (let i = 0; i < 10; i++) {
    results.push(fibonacci(i));
}
console.log(results);
// [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]

CSS

:root {
    --bg:      #070a0e;
    --accent:  #00c8ff;
    --radius:  0.375rem;
}

.card {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    /* subtle hover lift */
    transition: transform 0.2s ease;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 24px rgba(0, 200, 255, 0.12);
}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Arx Syntax</title>
    <link rel="stylesheet" href="arx.css">
</head>
<body>
    <div class="container">
        <h1>Hello World</h1>
        <p>Syntax highlighting made easy.</p>
        <!-- self-closing example -->
        <img src="logo.svg" alt="Logo">
    </div>
</body>
</html>

JSON

{
    "name": "Arx Syntax",
    "version": "1.0.0",
    "languages": ["html", "css", "js", "json", "bash"],
    "options": {
        "autoDetect": true,
        "lineNumbers": false,
        "showLang": false
    },
    "dependencies": {
        "jquery": ">=3.7.0"
    }
}

Bash

#!/usr/bin/env bash
# Build and deploy script

set -euo pipefail

APP="arx-syntax"
VERSION=$(node -p "require('./package.json').version")
BUILD_DIR="./dist"

echo "Building $APP v$VERSION..."

# Install dependencies
npm ci --silent

# Run build
if [ "$1" = "--minify" ]; then
    npm run build:min
    echo "Minified build complete"
else
    npm run build
    echo "Unminified build complete"
fi

# Copy assets
mkdir -p "$BUILD_DIR/css" "$BUILD_DIR/js"
cp css/*.css "$BUILD_DIR/css/"
cp js/*.js   "$BUILD_DIR/js/"

echo "Done. Output in $BUILD_DIR"

Line Numbers

$('pre.code-line').syntax({
    lineNumbers: true,
    language: null
});

Copy Button

#!/usr/bin/env bash
echo "Hello World"
npm install && npm run build