Wvlet Language Support for Prism.js
Syntax highlighting for Wvlet, a cross-SQL flow-style query language for functional data modeling and interactive data exploration.
Features
This package provides syntax highlighting for:
- Wvlet keywords (
from,select,where,group by,model,def, etc.) - SQL-like operations and joins
- String literals (single, double, and triple-quoted)
- String interpolation with
${...} - Numeric literals (integers, decimals, floats, longs)
- Comments (single-line
--and doc comments---) - Backquoted identifiers
- Test assertions
- Operators and special symbols
- Function definitions and calls
Installation
Using npm
npm install @wvlet/prismjs-wvlet prismjsUsing CDN
<!-- Using specific version (recommended for production) -->
<script src="https://cdn.jsdelivr.net/npm/@wvlet/prismjs-wvlet@2025.1.13/dist/prism-wvlet.min.js"></script>
<!-- Using latest version -->
<script src="https://cdn.jsdelivr.net/npm/@wvlet/prismjs-wvlet@latest/dist/prism-wvlet.min.js"></script>Usage
With Node.js / CommonJS
const Prism = require('prismjs');
require('@wvlet/prismjs-wvlet');
const code = `model User = {
from 'users.json'
select name, age, email
}`;
const highlightedCode = Prism.highlight(code, Prism.languages.wvlet, 'wvlet');With ES6 Modules
import Prism from 'prismjs';
import '@wvlet/prismjs-wvlet';
const highlightedCode = Prism.highlight(code, Prism.languages.wvlet, 'wvlet');In the Browser
<!DOCTYPE html>
<html>
<head>
<!-- Prism.js theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1/themes/prism.min.css">
</head>
<body>
<!-- Your code blocks -->
<pre><code class="language-wvlet">
model User = {
from 'users.json'
select name, age, email
}
</code></pre>
<!-- Prism.js core -->
<script src="https://cdn.jsdelivr.net/npm/prismjs@1/components/prism-core.min.js"></script>
<!-- Wvlet language support -->
<script src="https://cdn.jsdelivr.net/npm/@wvlet/prismjs-wvlet@2025.1.13/dist/prism-wvlet.min.js"></script>
<script>
// Apply highlighting
Prism.highlightAll();
</script>
</body>
</html>For a complete example, see examples/cdn-test.html.
Language Aliases
Both wvlet and wv are supported:
<code class="language-wvlet">(primary)<code class="language-wv">(alternative)
Building
This package is part of the wvlet pnpm workspace. To build the distribution files:
pnpm install
pnpm --filter @wvlet/prismjs-wvlet run buildThis will create dist/prism-wvlet.js and dist/prism-wvlet.min.js.
Testing
Run the tests with:
pnpm --filter @wvlet/prismjs-wvlet testLicense
Apache License 2.0
Contributing
Contributions are welcome! Please feel free to submit a Pull Request.