Syntax highlighting, IntelliSense, and Live Preview for Scalable Document (SDOX) — a structured, semantic, AI-friendly document language.
Features
🎨 Syntax Highlighting
Rich, category-aware colorization for all SDOX tags:
- Structure & Navigation —
#title, #paragraph, #section, #divider, #toc, #ref
- Text & Semantics —
#text, #quote, #note, #term, #definition
- Lists —
#list, #item
- Links & Media —
#url, #image, #video, #audio
- Visualization —
#chart, #data, #timeline, #event
- Mathematics & Diagrams —
#math (LaTeX), #diagram (Mermaid)
- Code —
#code, #output
- Tables —
#table, #row, #cell
- Components —
#card, #tab, #accordion, #badge, #changelog
- Modularization —
#include, #template, #use
- AI-Native —
#metadata, #dataset, #instruction, #response, #example, #embedding, #chunk, #context, #completion
- Integrations —
#html, #markdown
🧠 IntelliSense
Smart auto-completion powered by the SDOX v0.2.0 tag schema:
- Type
# to see all available tags with descriptions
- Type
( after a tag to get attribute suggestions
- Type
= to get enum and boolean value options
- Snippets with smart tabstops for quick tag insertion
📖 Hover Documentation
Hover over any #tag to see:
- Full description
- Attributes table (name, type, required, description)
- Code example
👁️ Live Preview
Side-by-side rendered preview of your SDOX documents:
- Click the preview icon in the editor title bar
- Or use keyboard shortcuts:
Ctrl+Shift+V — Open previewCtrl+K V — Open preview to the side
- Real-time updates as you type (300ms debounce)
- Premium dark theme with semantic styling
- Native rendering for Mermaid.js, KaTeX/LaTeX, marked Markdown, and data Charts directly in the editor preview.
Usage
- Create or open a
.sdox file
- Start typing
# to get IntelliSense suggestions
- Click the preview button (or
Ctrl+K V) to see the live preview
Example SDOX Document
#title(level=1) Hello SDOX v0.2.0
#paragraph {
Scalable Document is a structured, semantic,
AI-friendly document language.
}
#grid(columns=2) {
#column {
#chart(title="Data View") {
#data(label="A", value=60)
#data(label="B", value=100)
}
}
#column {
#math(display="block") {
\int x^2 \, dx = \frac{x^3}{3} + C
}
}
}
Supported File Extensions
Requirements
Release Notes
0.2.0 (Stable)
- Integrated KaTeX, Mermaid, and marked JS for rich rendering directly in Live Preview.
- Added syntax highlighting and completions for
#chart, #data, #timeline, #event, #math, #diagram, #grid, #column, #badge, #toc, #ref, #term, #definition, #changelog, #html, and #markdown.
- Standalone
#item visual styling added.
- Updated to v0.2.0 AST specification rules.
0.1.0
- Initial release
- Syntax highlighting for all SDOX v0.1.0 tags
- IntelliSense with tag, attribute, and value completions
- Hover documentation
- Live Preview panel
License
MIT
| |
