Skip to main content

Syntax Highlighting

Wvlet provides syntax highlighting support for popular code highlighting libraries, making it easier to display Wvlet code with proper syntax coloring in documentation, websites, and development tools.

Available Packages​

Prism.js Support​

Package: @wvlet/prismjs-wvlet
NPM: https://www.npmjs.com/package/@wvlet/prismjs-wvlet

Prism.js is a lightweight, extensible syntax highlighter used by many documentation sites including Docusaurus.

Installation​

npm install @wvlet/prismjs-wvlet prismjs

Usage​

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');

ES6 Modules:

import Prism from 'prismjs';
import '@wvlet/prismjs-wvlet';

const highlightedCode = Prism.highlight(code, Prism.languages.wvlet, 'wvlet');

Browser (CDN):

<!-- Prism.js core and theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1/themes/prism.min.css">
<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@latest/dist/prism-wvlet.min.js"></script>

<!-- Your code blocks -->
<pre><code class="language-wvlet">
model User = {
  from 'users.json'
  select name, age, email
}
</code></pre>

<script>
  Prism.highlightAll();
</script>

Highlight.js Support​

Package: @wvlet/highlightjs-wvlet
NPM: https://www.npmjs.com/package/@wvlet/highlightjs-wvlet

Highlight.js is a popular syntax highlighter with automatic language detection.

Installation​

npm install @wvlet/highlightjs-wvlet highlight.js

Usage​

Node.js:

const hljs = require('highlight.js');
const wvlet = require('@wvlet/highlightjs-wvlet');

hljs.registerLanguage('wvlet', wvlet);

const code = `from orders
where status = 'completed'
group by customer_id
agg total_amount = sum(amount)`;

const result = hljs.highlight(code, { language: 'wvlet' });

Browser:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@11/styles/default.min.css">
<script src="https://cdn.jsdelivr.net/npm/highlight.js@11/highlight.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@wvlet/highlightjs-wvlet@latest/dist/wvlet.min.js"></script>

<pre><code class="language-wvlet">
from orders
where status = 'completed'
group by customer_id
agg total_amount = sum(amount)
</code></pre>

<script>
  hljs.highlightAll();
</script>

Language Aliases​

Both packages support multiple language aliases for flexibility:

  • wvlet (primary)
  • wv (short alias)

You can use either class="language-wvlet" or class="language-wv" in your HTML.

Integration Examples​

Docusaurus Integration​

If you're using Docusaurus, you can integrate Wvlet syntax highlighting by swizzling the prism-include-languages component. For more details, see the Docusaurus code blocks documentation.

  1. Install the package:

    npm install @wvlet/prismjs-wvlet

  2. Swizzle the component:

    npx docusaurus swizzle @docusaurus/theme-classic prism-include-languages --wrap

  3. Update src/theme/prism-include-languages.ts:

    // Add after the additionalLanguages.forEach loop
    // eslint-disable-next-line global-require
    require('@wvlet/prismjs-wvlet');

  4. Use in your markdown files:

    ```wvlet
    model Sales = {
      from 'sales.parquet'
      where date >= '2024-01-01'
      group by product_category
      agg total_revenue = sum(amount)
    }
    ```

Development​

Both packages are open source and maintained in the Wvlet repository:

Building from Source​

# Clone the repository
git clone https://github.com/wvlet/wvlet.git
cd wvlet

# Build Prism.js package
cd prismjs-wvlet
npm install
npm run build

# Build Highlight.js package  
cd ../highlightjs-wvlet
npm install
npm run build

Contributing​

Contributions are welcome! If you find syntax highlighting issues or want to add support for new Wvlet language features:

  1. Fork the repository
  2. Create a feature branch
  3. Update the grammar definitions in the respective packages
  4. Add test cases
  5. Submit a pull request

Resources​