vscode-umd

A VS Code syntax highlighter and code formatter extension for Universal Markdown (UMD) format for comfortable and productive editing.

Features

1. Syntax Highlighting

• Comprehensive syntax highlighting for all major UMD language constructs
• Visual distinction for headers, lists, tables, code, links, plugins, and more
• Full support for frontmatter (YAML/TOML), plugins, and Spoiler syntax

2. Code Formatting

• Automatic document-wide formatting
• Table cell alignment adjustment
• List item indentation normalization
• Automatic removal of trailing whitespace

3. Preview Function

• Real-time preview of UMD documents in editor panel
• Live HTML conversion display

4. Language Support

• Full support for .umd and .md file extensions
• Auto-paired bracket insertion and code folding

Supported UMD Syntax

• Frontmatter: YAML/TOML format metadata
• Headers: # through ######, with custom ID support
• Text Formatting: bold, italic, underline, strikethrough
• Lists: unordered lists, numbered lists, and nested lists
• Tables: GFM-compliant tables with UMD extensions (cell merging, decoration)
• Definition Lists: :term|definition syntax
• Plugins: inline type (&function()) and block type (@function())
• Spoiler: ||text|| syntax for spoiler protection
• Block Decoration: COLOR(), SIZE(), LEFT:, CENTER:, etc.
• Footnotes: Standard footnote syntax support
• Media: Auto-detection of videos, audio, and images

Usage

Installation

Install from the VS Code Extensions marketplace, or run in development mode with:

pnpm install
pnpm run watch

Commands

• Format Document (UMD): Format the entire active document
• Preview UMD: Display UMD document preview in side panel

Keyboard Shortcuts

• Format: Shift+Alt+F (VS Code standard)

Extension Dependencies

• TypeScript: Language support
• ESBuild: Bundling
• ESLint: Code quality checking

Development

Project Structure

src/
extension.ts - Main extension implementation
formatter.ts - Formatter implementation
syntaxes/
umd.tmLanguage.json - TextMate grammar definition
language-configuration.json - Language configuration

Build

# Build in watch mode

pnpm run watch

# Production build

pnpm run package

# Run tests

pnpm test

Debugging

Press F5 in VS Code or use the "Run Extension" configuration to start debugging.

Example

sample.umd - Comprehensive demonstration of UMD syntax

Known Issues

• Preview feature is basic (simple HTML conversion only)
• Complex table structures (rowspan/colspan) are not fully represented in preview

Planned Improvements

• Enhanced syntax highlighting with more detailed rules
• Advanced preview with Bootstrap 5 integration
• Code snippet support
• Integration with umd-core WASM implementation

License

MIT

Repository

umd-core - Universal Markdown specification implementation

---

Following extension guidelines

Ensure that you've read through the extensions guidelines and follow the best practices for creating your extension.

• Extension Guidelines

Working with Markdown

You can author your README using Visual Studio Code. Here are some useful editor keyboard shortcuts:

• Split the editor (`Cmd+\ on macOS or \Ctrl+\` on Windows and Linux).
• Toggle preview (`Shift+Cmd+V` on macOS or `Shift+Ctrl+V` on Windows and Linux).
• Press `Ctrl+Space` (Windows, Linux, macOS) to see a list of Markdown snippets.

For more information

• Visual Studio Code's Markdown Support
• Markdown Syntax Reference

Enjoy!