{"_id":"microlighter","_rev":"7-e4778f5be7d428f9e42afe9c7487afba","name":"microlighter","dist-tags":{"latest":"2.2.0"},"versions":{"1.0.0":{"name":"microlighter","version":"1.0.0","keywords":["syntax-highlighting","highlighter","textmate","css-custom-highlight","code"],"author":{"url":"https://daverupert.com","name":"Dave Rupert","email":"rupato@gmail.com"},"license":"MIT","_id":"microlighter@1.0.0","maintainers":[{"name":"davatron5000","email":"rupato@gmail.com"}],"homepage":"https://github.com/davatron5000/microlighter#readme","bugs":{"url":"https://github.com/davatron5000/microlighter/issues"},"dist":{"shasum":"281d02429f9bd1d707889fcb5f4dd869e5fac26f","tarball":"https://registry.npmjs.org/microlighter/-/microlighter-1.0.0.tgz","fileCount":29,"integrity":"sha512-vZPLBtPHRWsNmHuJajObZCsP/AbyhSJXm/sKkwQHYIz3wJ/QhkZx00H3NrlbVN9saFYtopqGjkunw9VI62jHzQ==","signatures":[{"sig":"MEYCIQCCudmd0bz9+iyIJeSFCKjhqvlujqRK2lsaM7APh/ZUTgIhAOxA+GP+qkALocW5Iqnrh/zg0oqlE+3ZKBY9UZ545mC7","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":87500},"main":"./dist/index.js","type":"module","module":"./dist/index.js","engines":{"node":">=18"},"exports":{".":"./dist/index.js","./*":"./dist/*"},"gitHead":"d48e2f824b77bdd1b6ebcf261558896a5732a294","scripts":{"size":"node scripts/report-size.mjs","test":"node --test test/*.spec.js && playwright test","build":"./build.sh","prepack":"./build.sh","pretest":"./build.sh","docs:update-homepage-stats":"./build.sh && node scripts/report-size.mjs --update-homepage"},"_npmUser":{"name":"davatron5000","email":"rupato@gmail.com"},"sizeLimit":{"dist/microlighter.min.js":3000},"repository":{"url":"git+https://github.com/davatron5000/microlighter.git","type":"git"},"_npmVersion":"11.17.0","description":"A tiny, dependency-free syntax highlighter built on the CSS Custom Highlight API and TextMate grammars.","directories":{},"sideEffects":["./dist/microlighter.js","./dist/microlighter.min.js"],"_nodeVersion":"24.14.0","_hasShrinkwrap":false,"devDependencies":{"@playwright/test":"^1.48.0"},"_npmOperationalInternal":{"tmp":"tmp/microlighter_1.0.0_1786676721007_0.301703483759731","host":"s3://npm-registry-packages-npm-production"}},"2.0.0":{"name":"microlighter","version":"2.0.0","keywords":["syntax-highlighting","highlighter","textmate","css-custom-highlight","code"],"author":{"url":"https://daverupert.com","name":"Dave Rupert","email":"rupato@gmail.com"},"license":"MIT","_id":"microlighter@2.0.0","maintainers":[{"name":"davatron5000","email":"rupato@gmail.com"}],"homepage":"https://github.com/davatron5000/microlighter#readme","bugs":{"url":"https://github.com/davatron5000/microlighter/issues"},"dist":{"shasum":"1f17ae1f3ec4d70dd17a158d74e09b6be500f0ca","tarball":"https://registry.npmjs.org/microlighter/-/microlighter-2.0.0.tgz","fileCount":57,"integrity":"sha512-jhpGy8Q+V5wFrRE078ultl7fcFxuWCh3XErKsP10dFwALzhjKhCZF5S3p1HJu+BoEhxp5EGQs0u6NKYmuMAN3Q==","signatures":[{"sig":"MEUCIFV93MpuYdF/Rn7miNBbvPxOih/sO+R1F3CGqUtvYnH7AiEA7LgfCD3keco3+IvOQxb+4/Khbpa3m74Ef928tS+EcgE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":180011},"main":"./dist/index.js","type":"module","module":"./dist/index.js","engines":{"node":">=18"},"exports":{".":"./dist/index.js","./*":"./dist/*"},"gitHead":"eb04326d43d6bde20298560af52ceb55069b16a6","scripts":{"size":"node scripts/report-size.mjs","test":"node --test test/*.spec.js && playwright test","build":"./build.sh","prepack":"./build.sh","prepare":"git config core.hooksPath .githooks","pretest":"./build.sh","docs:update-homepage-stats":"./build.sh && node scripts/report-size.mjs --update-homepage"},"_npmUser":{"name":"davatron5000","email":"rupato@gmail.com"},"sizeLimit":{"dist/microlighter.min.js":2100},"repository":{"url":"git+https://github.com/davatron5000/microlighter.git","type":"git"},"_npmVersion":"11.17.0","description":"A tiny, dependency-free syntax highlighter built on the CSS Custom Highlight API and TextMate grammars.","directories":{},"sideEffects":["./dist/microlighter.js","./dist/microlighter.min.js","./dist/micro-lighter-element.js","./dist/micro-lighter-element.min.js"],"_nodeVersion":"24.14.0","_hasShrinkwrap":false,"devDependencies":{"@playwright/test":"^1.48.0"},"_npmOperationalInternal":{"tmp":"tmp/microlighter_2.0.0_1786821966704_0.4674689575130242","host":"s3://npm-registry-packages-npm-production"}},"2.0.1":{"name":"microlighter","version":"2.0.1","keywords":["syntax-highlighting","highlighter","textmate","css-custom-highlight","code"],"author":{"url":"https://daverupert.com","name":"Dave Rupert","email":"rupato@gmail.com"},"license":"MIT","_id":"microlighter@2.0.1","maintainers":[{"name":"davatron5000","email":"rupato@gmail.com"}],"homepage":"https://github.com/davatron5000/microlighter#readme","bugs":{"url":"https://github.com/davatron5000/microlighter/issues"},"dist":{"shasum":"ecc4858640ff24db631f456ac25082b67c681823","tarball":"https://registry.npmjs.org/microlighter/-/microlighter-2.0.1.tgz","fileCount":56,"integrity":"sha512-Dd2ILAE63kP6tFieHXemOhMKQ5+ngJnEA+edd6Fz417colY/gi98auIg5q18ZK3RJFdO5dPpQ/21ym/WyY8sIg==","signatures":[{"sig":"MEYCIQDeXu3AWGTAvd6NDY7ZB3u2Zqjxt1ebnYK/5M0r8i0ZRwIhAJzgCvMxFuJekVa4dLMy8MnBnJvrqI1VQ6AFRKQTNgzg","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":155025},"main":"./dist/index.js","type":"module","module":"./dist/index.js","engines":{"node":">=18"},"exports":{".":"./dist/index.js","./*":"./dist/*"},"gitHead":"f8fde8fc028d243158ab2cc9f5b67927ef954eac","scripts":{"size":"node scripts/report-size.mjs","test":"node --test test/*.spec.js && playwright test","build":"./build.sh","prepack":"./build.sh","prepare":"git config core.hooksPath .githooks","pretest":"./build.sh","docs:update-homepage-stats":"./build.sh && node scripts/report-size.mjs --update-homepage"},"_npmUser":{"name":"davatron5000","email":"rupato@gmail.com"},"sizeLimit":{"dist/microlighter.min.js":2100},"repository":{"url":"git+https://github.com/davatron5000/microlighter.git","type":"git"},"_npmVersion":"11.17.0","description":"A tiny, dependency-free syntax highlighter built on the CSS Custom Highlight API and TextMate grammars.","directories":{},"sideEffects":["./dist/microlighter.js","./dist/microlighter.min.js","./dist/micro-lighter-element.js","./dist/micro-lighter-element.min.js"],"_nodeVersion":"24.14.0","_hasShrinkwrap":false,"devDependencies":{"@playwright/test":"^1.48.0"},"_npmOperationalInternal":{"tmp":"tmp/microlighter_2.0.1_1786915569129_0.36140804921336667","host":"s3://npm-registry-packages-npm-production"}},"2.0.2":{"name":"microlighter","version":"2.0.2","keywords":["syntax-highlighting","highlighter","textmate","css-custom-highlight","code"],"author":{"url":"https://daverupert.com","name":"Dave Rupert","email":"rupato@gmail.com"},"license":"MIT","_id":"microlighter@2.0.2","maintainers":[{"name":"davatron5000","email":"rupato@gmail.com"}],"homepage":"https://github.com/davatron5000/microlighter#readme","bugs":{"url":"https://github.com/davatron5000/microlighter/issues"},"dist":{"shasum":"db90b9f3bc44815bfe6d9f19f9c4eed7c5eeb2af","tarball":"https://registry.npmjs.org/microlighter/-/microlighter-2.0.2.tgz","fileCount":56,"integrity":"sha512-tqKAyxBJTVGB+N6LsnQoYxKJtaSHcxu2Fi2j1N+Ukz5I8+jbRDSyrnGjnoPgPLvWNpLXVQZvYkyxn9fua2/baQ==","signatures":[{"sig":"MEQCIDBJNSEm51NrB76o097kStsXfzz4dRSM1Fo79iwjJ7i8AiAG7Vml0KuRpCeKgfmnm/AYOIWo7x17I68n7n7qWjlAEA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":152867},"main":"./dist/index.js","type":"module","module":"./dist/index.js","engines":{"node":">=18"},"exports":{".":"./dist/index.js","./*":"./dist/*"},"gitHead":"e041c8ee738570a546751c69dbb7a997f24b3e65","scripts":{"size":"node scripts/report-size.mjs","test":"node --test test/*.spec.js && playwright test","build":"./build.sh","prepack":"./build.sh","prepare":"git config core.hooksPath .githooks","pretest":"./build.sh","docs:update-homepage-stats":"./build.sh && node scripts/report-size.mjs --update-homepage"},"_npmUser":{"name":"davatron5000","email":"rupato@gmail.com"},"sizeLimit":{"dist/microlighter.min.js":2100},"repository":{"url":"git+https://github.com/davatron5000/microlighter.git","type":"git"},"_npmVersion":"11.17.0","description":"A tiny, dependency-free syntax highlighter built on the CSS Custom Highlight API and TextMate grammars.","directories":{},"sideEffects":["./dist/microlighter.js","./dist/microlighter.min.js","./dist/micro-lighter-element.js","./dist/micro-lighter-element.min.js"],"_nodeVersion":"24.14.0","_hasShrinkwrap":false,"devDependencies":{"@playwright/test":"^1.48.0"},"_npmOperationalInternal":{"tmp":"tmp/microlighter_2.0.2_1786979942787_0.8856434470252039","host":"s3://npm-registry-packages-npm-production"}},"2.0.3":{"name":"microlighter","version":"2.0.3","keywords":["syntax-highlighting","highlighter","textmate","css-custom-highlight","code"],"author":{"url":"https://daverupert.com","name":"Dave Rupert","email":"rupato@gmail.com"},"license":"MIT","_id":"microlighter@2.0.3","maintainers":[{"name":"davatron5000","email":"rupato@gmail.com"}],"homepage":"https://github.com/davatron5000/microlighter#readme","bugs":{"url":"https://github.com/davatron5000/microlighter/issues"},"dist":{"shasum":"c7fe0d72332bed39055c1e130062dc588c395ade","tarball":"https://registry.npmjs.org/microlighter/-/microlighter-2.0.3.tgz","fileCount":56,"integrity":"sha512-g6q1HCTZBcdpJcMailVcnjBRBiz67UYA/bTSjBoH/eymNolUJ6AGspPjgNQF9klYqYKrWwlbUbp5SSMfE6KLcQ==","signatures":[{"sig":"MEQCIGHaYZ4u/JsPwWF38mhIqdSdlo1wmyTAOZMKsnU5xs8iAiBM4gYyidZwZZs4jW+Jwz2CAZEPPH4xS40+T7oTUoh2TQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":152867},"main":"./dist/index.js","type":"module","module":"./dist/index.js","engines":{"node":">=18"},"exports":{".":"./dist/index.js","./*":"./dist/*"},"gitHead":"050abc3cec3af1204b7fa682b0da680717952549","scripts":{"size":"node scripts/report-size.mjs","test":"node --test test/*.spec.js && playwright test","build":"./build.sh","prepack":"./build.sh","prepare":"git config core.hooksPath .githooks","pretest":"./build.sh","docs:update-homepage-stats":"./build.sh && node scripts/report-size.mjs --update-homepage"},"_npmUser":{"name":"davatron5000","email":"rupato@gmail.com"},"sizeLimit":{"dist/microlighter.min.js":2100},"repository":{"url":"git+https://github.com/davatron5000/microlighter.git","type":"git"},"_npmVersion":"11.17.0","description":"A tiny, dependency-free syntax highlighter built on the CSS Custom Highlight API and TextMate grammars.","directories":{},"sideEffects":["./dist/microlighter.js","./dist/microlighter.min.js","./dist/micro-lighter-element.js","./dist/micro-lighter-element.min.js"],"_nodeVersion":"24.14.0","_hasShrinkwrap":false,"devDependencies":{"@playwright/test":"^1.48.0"},"_npmOperationalInternal":{"tmp":"tmp/microlighter_2.0.3_1787012241241_0.29719388523075363","host":"s3://npm-registry-packages-npm-production"}},"2.1.0":{"name":"microlighter","version":"2.1.0","keywords":["syntax-highlighting","highlighter","textmate","css-custom-highlight","code"],"author":{"url":"https://daverupert.com","name":"Dave Rupert","email":"rupato@gmail.com"},"license":"MIT","_id":"microlighter@2.1.0","maintainers":[{"name":"davatron5000","email":"rupato@gmail.com"}],"homepage":"https://github.com/davatron5000/microlighter#readme","bugs":{"url":"https://github.com/davatron5000/microlighter/issues"},"dist":{"shasum":"f1d11a4d75ba3b927e4d0d82378d39b24012557f","tarball":"https://registry.npmjs.org/microlighter/-/microlighter-2.1.0.tgz","fileCount":58,"integrity":"sha512-lngSOqDbT7IuNV1OekRp0zRCOlhVEuSdQdbEZbkXfmQPYpeIArk5wyrUQTvBmeCqiy/ZDW/RLmbopI74JBnCIg==","signatures":[{"sig":"MEYCIQD+euVPGZNTWWvdzknPBQhxm/djDDO0FwVfx4hsiCebhAIhAMCPd5/Qs7Dx7q5pSIlw4kpoz3qaQBDfPPWL5/q+dkcj","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":157095},"main":"./dist/index.js","type":"module","module":"./dist/index.js","engines":{"node":">=18"},"exports":{".":"./dist/index.js","./*":"./dist/*"},"gitHead":"d7fec9e69c38166924294b26fac8e2fedd935013","scripts":{"size":"node scripts/report-size.mjs","test":"node --test test/*.spec.js && playwright test","build":"./build.sh","prepack":"./build.sh","prepare":"git config core.hooksPath .githooks","pretest":"./build.sh","docs:update-homepage-stats":"./build.sh && node scripts/report-size.mjs --update-homepage"},"_npmUser":{"name":"davatron5000","email":"rupato@gmail.com"},"sizeLimit":{"dist/microlighter.min.js":2100},"repository":{"url":"git+https://github.com/davatron5000/microlighter.git","type":"git"},"_npmVersion":"11.17.0","description":"A tiny, dependency-free syntax highlighter built on the CSS Custom Highlight API and TextMate grammars.","directories":{},"sideEffects":["./dist/microlighter.js","./dist/microlighter.min.js","./dist/micro-lighter-element.js","./dist/micro-lighter-element.min.js"],"_nodeVersion":"24.14.0","_hasShrinkwrap":false,"devDependencies":{"@playwright/test":"^1.48.0"},"_npmOperationalInternal":{"tmp":"tmp/microlighter_2.1.0_1787152820121_0.3222139208853767","host":"s3://npm-registry-packages-npm-production"}},"2.2.0":{"name":"microlighter","version":"2.2.0","description":"A tiny, dependency-free syntax highlighter built on the CSS Custom Highlight API and TextMate grammars.","type":"module","main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":"./dist/index.js","./*":"./dist/*"},"sideEffects":["./dist/microlighter.js","./dist/microlighter.min.js","./dist/micro-lighter-element.js","./dist/micro-lighter-element.min.js"],"sizeLimit":{"dist/microlighter.min.js":2150},"scripts":{"build":"./build.sh","typecheck":"tsc --noEmit","size":"node scripts/report-size.mjs","prepare":"git config core.hooksPath .githooks","pretest":"./build.sh","test":"node --test test/*.spec.js && playwright test","docs:update-homepage-stats":"./build.sh && node scripts/report-size.mjs --update-homepage","prepack":"./build.sh"},"devDependencies":{"@playwright/test":"^1.48.0","typescript":"^7.0.2"},"engines":{"node":">=18"},"keywords":["syntax-highlighting","highlighter","textmate","css-custom-highlight","code"],"author":{"name":"Dave Rupert","email":"rupato@gmail.com","url":"https://daverupert.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/davatron5000/microlighter.git"},"homepage":"https://github.com/davatron5000/microlighter#readme","bugs":{"url":"https://github.com/davatron5000/microlighter/issues"},"gitHead":"0e6956e0a9e9628652af12d2debf5f9bb5c5b614","_id":"microlighter@2.2.0","_nodeVersion":"24.14.0","_npmVersion":"11.17.0","dist":{"integrity":"sha512-XFUHmKclX4taKWVpYkqJ/GlfUS27FzQTCph1u3v9OwkmQJGXry3Pk1e7SivLz6xGOCxRVyi3DSrztF3e460jrg==","shasum":"c40f99cd420c26bb39bb5797c2e4e90e2f3b73c2","tarball":"https://registry.npmjs.org/microlighter/-/microlighter-2.2.0.tgz","fileCount":112,"unpackedSize":183779,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIA0HFgDXnpEMLKH8oPo1h26tIjDR8gqIoHK8GqIas0ypAiEA7raRemP3TPQ62Yepe5xYivS8QINygdyUJ2kwM7OR1DE="}]},"_npmUser":{"name":"davatron5000","email":"rupato@gmail.com"},"directories":{},"maintainers":[{"name":"davatron5000","email":"rupato@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/microlighter_2.2.0_1789138073476_0.5820730372890972"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-14T03:05:20.799Z","modified":"2026-09-11T14:47:53.751Z","1.0.0":"2026-08-14T03:05:21.151Z","2.0.0":"2026-08-15T19:26:06.837Z","2.0.1":"2026-08-16T21:26:09.270Z","2.0.2":"2026-08-17T15:19:02.985Z","2.0.3":"2026-08-18T00:17:21.413Z","2.1.0":"2026-08-19T15:20:20.279Z","2.2.0":"2026-09-11T14:47:53.617Z"},"bugs":{"url":"https://github.com/davatron5000/microlighter/issues"},"author":{"name":"Dave Rupert","email":"rupato@gmail.com","url":"https://daverupert.com"},"license":"MIT","homepage":"https://github.com/davatron5000/microlighter#readme","keywords":["syntax-highlighting","highlighter","textmate","css-custom-highlight","code"],"repository":{"type":"git","url":"git+https://github.com/davatron5000/microlighter.git"},"description":"A tiny, dependency-free syntax highlighter built on the CSS Custom Highlight API and TextMate grammars.","maintainers":[{"name":"davatron5000","email":"rupato@gmail.com"}],"readme":"# MicroLighter\n\n[![CI](https://github.com/davatron5000/microlighter/actions/workflows/ci.yml/badge.svg)](https://github.com/davatron5000/microlighter/actions/workflows/ci.yml)\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](./LICENSE)\n\nA tiny, dependency-free syntax highlighter for the web.\n\nMicroLighter uses the [CSS Custom Highlight API][highlight-api] and TextMate\ngrammars. It highlights code without adding a `<span>` around every token, so\nyour markup stays clean and editable.\n\n## Features\n\n- About 2 KiB compressed\n- No runtime dependencies\n- 37 languages, loaded on demand\n- 10 bundled themes\n- Clean DOM with no token markup\n- Programmatic, automatic, and web component APIs\n- Editable code block support\n\n## Install\n\n```sh\nnpm install microlighter\n```\n\n## Quick start\n\nAdd a language class to your code:\n\n```html\n<pre><code class=\"language-javascript\">const answer = 42;</code></pre>\n```\n\nImport a theme and run the highlighter:\n\n```js\nimport \"microlighter/themes/github.css\";\nimport { highlightAll } from \"microlighter\";\n\ndocument.body.dataset.syntaxTheme = \"github\";\nawait highlightAll();\n```\n\nThat's it. MicroLighter finds every `pre > code` block with a supported\nlanguage and highlights it.\n\n## Usage\n\n### Programmatic API\n\nThe main package exports `highlightAll()`. Importing it has no side effects.\n\n```js\nimport { highlightAll } from \"microlighter\";\n\nawait highlightAll();\n```\n\nPass options to limit the scan or add project-specific language aliases:\n\n```js\nawait highlightAll({\n  root: document.querySelector(\"#docs\"),\n  selector: \"pre.code > code\",\n  languageAliases: {\n    ecmascript: \"javascript\",\n    shellsession: \"bash\"\n  }\n});\n```\n\n| Option | Default | Description |\n| --- | --- | --- |\n| `root` | `document` | Element or document to search |\n| `selector` | `\"pre > code\"` | Selector used to find code blocks |\n| `languageAliases` | `{}` | Extra aliases mapped to bundled grammars |\n\n`highlightAll()` returns a promise containing the highlighted code elements.\n\n### Automatic highlighting\n\nImport the auto runner to highlight the page as soon as the module loads:\n\n```html\n<link rel=\"stylesheet\" href=\"./node_modules/microlighter/themes/github.css\">\n<script type=\"module\" src=\"./node_modules/microlighter/microlighter.min.js\"></script>\n\n<body data-syntax-theme=\"github\">\n```\n\nAfter adding or changing code, dispatch this event to highlight again:\n\n```js\ndocument.dispatchEvent(new Event(\"syntax-highlight\"));\n```\n\nThe event can also bubble from a code block or one of its parents.\n\n### CDN\n\nUse the auto runner directly from a CDN:\n\n```html\n<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/microlighter@2/themes/github.css\">\n<script type=\"module\" src=\"https://cdn.jsdelivr.net/npm/microlighter@2/microlighter.min.js\"></script>\n\n<body data-syntax-theme=\"github\">\n  <pre><code class=\"language-javascript\">const answer = 42;</code></pre>\n</body>\n```\n\n### Web component\n\nImport the optional `<micro-lighter>` custom element:\n\n```html\n<link rel=\"stylesheet\" href=\"./node_modules/microlighter/themes/github.css\">\n<script type=\"module\" src=\"./node_modules/microlighter/micro-lighter-element.min.js\"></script>\n\n<body data-syntax-theme=\"github\">\n  <micro-lighter language=\"javascript\" controls=\"copy\" line-numbers>\n    <pre><code>const answer = 42;</code></pre>\n  </micro-lighter>\n</body>\n```\n\n| Attribute | Description |\n| --- | --- |\n| `language` | Language to use. Overrides language metadata on `<pre>` or `<code>` |\n| `controls=\"copy\"` | Adds a copy button |\n| `line-numbers` | Adds a line number gutter without changing copied code |\n\nStyle the controls with `::part(copy-button)` and `::part(line-numbers)`.\n\n### TypeScript\n\nDeclarations ship with the package, including for the grammar and auto-run\nentry points. They are generated from the JSDoc types in `src/`, so the source\nand the published types cannot drift.\n\n```ts\nimport { highlightAll, type HighlightAllOptions } from \"microlighter\";\nimport javascript from \"microlighter/grammars/javascript.js\";\n```\n\nImporting `microlighter/micro-lighter-element.js` also registers\n`<micro-lighter>` in `HTMLElementTagNameMap`, so `querySelector`\nreturns a typed element.\n\n## Language detection\n\nThe recommended format is a `language-*` class:\n\n```html\n<pre><code class=\"language-typescript\">const answer: number = 42;</code></pre>\n```\n\nYou can also use `data-language` on `<code>` or `<pre>`:\n\n```html\n<pre data-language=\"typescript\"><code>const answer: number = 42;</code></pre>\n```\n\nAvoid `<pre lang=\"typescript\">` in new code. MicroLighter supports it for\ncompatibility, but the HTML `lang` attribute should describe human language.\n\nCommon aliases work automatically:\n\n| Aliases | Language |\n| --- | --- |\n| `js`, `jsx` | `javascript` |\n| `ts` | `typescript` |\n| `sh`, `shell`, `zsh` | `bash` |\n| `yml` | `yaml` |\n| `md` | `markdown` |\n| `sass` | `scss` |\n| `docker` | `dockerfile` |\n| `py` | `python` |\n| `rb` | `ruby` |\n| `gql` | `graphql` |\n\nCustom aliases passed to `highlightAll()` must point to a bundled language.\n\n## Languages\n\nMicroLighter includes these grammars:\n\n`assembly`, `astro`, `bash`, `c`, `cpp`, `csharp`, `css`, `dart`, `dockerfile`, `elixir`,\n`git-diff`, `go`, `graphql`, `heex`, `html`, `ini`, `java`, `javascript`, `json`,\n`kotlin`, `lua`, `markdown`, `nginx`, `objective-c`, `perl`, `php`, `powershell`,\n`python`, `r`, `ruby`, `rust`, `scss`, `sql`, `svelte`, `swift`, `toml`, `tsx`,\n`typescript`, `vue`, and `yaml`.\n\nGrammars are ES modules and load on demand.\n\n## Themes\n\nLoad one theme and set the matching `data-syntax-theme` value on `<body>` or\nany container:\n\n```html\n<link rel=\"stylesheet\" href=\"./node_modules/microlighter/themes/night-owl.css\">\n\n<section data-syntax-theme=\"night-owl\">\n  <!-- code blocks -->\n</section>\n```\n\nBundled themes:\n\n- `cobalt2`\n- `dracula`\n- `github`\n- `gruvbox`\n- `min`\n- `monokai`\n- `night-owl`\n- `solarized-light`\n- `tokyo-night`\n- `vesper`\n- `vscode-plus`\n\nThemes use CSS custom properties for a small color palette:\n\n| Property | Token categories |\n| --- | --- |\n| `--syntax-comment` | Comments and quotes |\n| `--syntax-keyword` | Keywords, storage, at-rules, and sections |\n| `--syntax-operator` | Operators and punctuation |\n| `--syntax-string` | Strings, regular expressions, links, and attribute values |\n| `--syntax-constant` | Numbers, booleans, constants, symbols, and entities |\n| `--syntax-function` | Functions, decorators, and animations |\n| `--syntax-type` | Types and support tokens |\n| `--syntax-variable` | Variables and interpolation |\n| `--syntax-property` | Properties, keys, and attribute names |\n| `--syntax-tag` | Tags |\n| `--syntax-selector` | Selectors |\n| `--syntax-inserted` | Inserted text |\n| `--syntax-deleted` | Deleted text |\n\n## Editable code\n\nMicroLighter keeps code as plain text, so code blocks can remain editable. Call\nthe highlighter after each change:\n\n```html\n<editable-code>\n  <pre><code class=\"language-javascript\">const answer = 42;</code></pre>\n</editable-code>\n\n<script type=\"module\">\n  import \"microlighter/microlighter.min.js\";\n\n  class EditableCode extends HTMLElement {\n    connectedCallback() {\n      const code = this.querySelector(\"pre > code\");\n      if (!code) return;\n\n      code.contentEditable = \"plaintext-only\";\n      code.spellcheck = false;\n      code.setAttribute(\"aria-label\", \"Editable code\");\n      this.addEventListener(\"input\", () => {\n        this.dispatchEvent(new Event(\"syntax-highlight\", { bubbles: true }));\n      });\n    }\n  }\n\n  customElements.define(\"editable-code\", EditableCode);\n</script>\n```\n\nKeep `<pre><code>` in the light DOM so MicroLighter can find it.\n\n## How it works\n\nMicroLighter reads TextMate grammars with the browser's native `RegExp`. It\nturns matching token ranges into `Highlight` objects and styles them with\n`::highlight()`. It does not use Oniguruma, WebAssembly, or generated token\nmarkup.\n\nThis keeps the library small. The trade-off is less language coverage and\ngrammar accuracy than larger tools such as [Shiki][shiki].\n\nThe low-level tokenizer is available from `microlighter/highlight.js` for\nadvanced integrations.\n\n## Development\n\nRequires Node.js 18 or newer.\n\n```sh\nnpm install\nnpm run build\nnpm test\n```\n\nUseful commands:\n\n| Command | Description |\n| --- | --- |\n| `npm run build` | Build `dist/`, update the local demo package, and report sizes |\n| `npm test` | Build and run Node.js and Playwright tests |\n| `npm run size` | Print the size report without changing files |\n| `npm run docs:update-homepage-stats` | Update the homepage bundle size |\n| `npx serve docs` | Serve the demo at `http://localhost:3000` |\n\nThe build fails when the minified bundle exceeds the gzip size limit in\n`package.json`.\n\nSee [CONTRIBUTING.md](./CONTRIBUTING.md) for the project structure and guides\nfor adding grammars and themes.\n\n## Prior art\n\nMicroLighter builds on [TextMate grammars][tm] and work across the syntax\nhighlighting community:\n\n- [Prism.js][prism] inspired the semantic CSS categories.\n- [Shiki][shiki] is the full-featured TextMate highlighter for the web.\n- [Bramus Van Damme's Custom Highlight API article][bramus] popularized this\n  rendering technique.\n- Related projects include [textmate-highlighter][tmh],\n  [syntax-highlight-element][she], [shiki-highlight-api][sha], and\n  [syntaxp][syntaxp].\n\n## License\n\n[MIT](./LICENSE) © Dave Rupert\n\n[highlight-api]: https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API\n[tm]: https://macromates.com/manual/en/language_grammars\n[prism]: https://prismjs.com/\n[shiki]: https://shiki.style/\n[bramus]: https://www.bram.us/2024/02/18/custom-highlight-api-for-syntax-highlighting/\n[tmh]: https://github.com/fabiospampinato/textmate-highlighter\n[she]: https://github.com/andreruffert/syntax-highlight-element\n[sha]: https://github.com/shiki-highlights/shiki-highlight-api\n[syntaxp]: https://github.com/j9t/syntaxp\n","readmeFilename":"README.md"}