Neorg processor for Vite - Transform .norg
files into HTML, React, or Svelte with full TypeScript support.
npm install -D vite-plugin-norg
import { norgPlugin } from 'vite-plugin-norg';
import { defineConfig } from 'vite';
export default defineConfig({
plugins: [
norgPlugin({
mode: 'html',
include: ['**/*.norg'],
}),
],
});
import { metadata, html } from './document.norg';
console.log(metadata.title); // "My Document"
document.body.innerHTML = html;
export default defineConfig({
plugins: [
norgPlugin({
mode: 'react',
include: ['**/*.norg'],
}),
],
});
import { metadata, Component } from './document.norg';
export default function App() {
return (
<div>
<h1>{metadata.title}</h1>
<Component />
</div>
);
}
export default defineConfig({
plugins: [
norgPlugin({
mode: 'svelte',
include: ['**/*.norg'],
}),
],
});
<script>
import Document, { metadata } from './document.norg';
</script>
<h1>{metadata.title}</h1>
<Document />
graph LR
A(📝 .norg files) ==> B(⚡ Rust Parser)
B ==> C(🔧 WASM Module)
C ==> D(🚀 Vite Plugin)
D ==> E{🎨 Generator}
E ==> F(📄 HTML)
E ==> G(⚛️ React)
E ==> H(🔥 Svelte)
F ==> I(💎 TypeScript Module)
G ==> I
H ==> I
linkStyle default stroke-width:3px
Built with:
import type { FilterPattern } from 'vite';
import type { BundledHighlighterOptions, BundledLanguage, BundledTheme } from 'shiki';
interface NorgPluginOptions {
mode: 'html' | 'react' | 'svelte';
include?: FilterPattern;
exclude?: FilterPattern;
shikiOptions?: BundledHighlighterOptions<BundledLanguage, BundledTheme>;
}
The plugin automatically applies syntax highlighting to code blocks using Shiki. You can customize the highlighting themes and languages:
norgPlugin({
mode: 'html',
shikiOptions: {
themes: {
// Optional, github theme applied if none specified
light: 'github-light',
dark: 'github-dark',
},
// Optional, all langs enabled by default
langs: ['javascript', 'typescript', 'python'],
},
});
Review the Shiki documentation for theme and configuration options.
Requirements:
This project uses Nix flakes and direnv for reproducible development environments.
# Install direnv (if not already installed)
curl -sfL https://direnv.net/install.sh | bash
# Enable direnv for this project
direnv allow
# Build the project
npm run build
npm run build
# Run tests
npm test
# Lint code
npm run lint
# Format code
nix fmt
The flake.nix
provides:
To enter the development shell if not using direnv:
nix develop
PRs and issues welcome! To open a PR please fork and ensure tests and linters pass.