Pull Request

Description

This PR migrates the VS Code extension from a custom WebView preview to native Markdown preview integration (markdown.markdownItPlugins + extendMarkdownIt).

All wiremd fenced blocks are now parsed/rendered inside the standard Markdown preview, with per-block support for html/json output and styles (sketch, clean, wireframe, none, tailwind, material, brutal), including CSS scoping to prevent style leakage across blocks.

Type of Change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation update
• Refactoring (no functional changes)
• Performance improvement
• Test updates
• Build/tooling changes

Related Issues

• VS Code Extension: Add syntax highlighting VS Code Extension: Add syntax highlighting #27
• VS Code Extension: Add autocomplete/IntelliSense VS Code Extension: Add autocomplete/IntelliSense #28

Changes Made

• Replaced WiremdPreviewProvider and custom preview commands with a Markdown-It plugin (extendMarkdownIt) in src/extension.ts.
• Added rendering for multiple wiremd fences in the same document, with per-fence options (html/json + style).
• Added per-block CSS isolation using classPrefix and scoped CSS rewrites to avoid global pollution (body, *, etc.).
• Simplified extension package.json: new activationEvents, contributes.markdown.markdownItPlugins, esbuild-based scripts, and vitest.
• Added tests (tests/extension.test.ts, tests/security-config.test.ts) and updated extension docs.

Testing

Test Coverage

• Added new tests for new functionality
• Updated existing tests
• All tests pass locally (npm test)
• No decrease in code coverage

Manual Testing

1. cd vscode-extension && npm run lint
2. npm run compile
3. npm test (13 tests passed)
4. npm run package (successfully generated wiremd-preview-0.1.0.vsix)

Examples

Input

# Demo

```wiremd clean
## Hero
[Get Started]*
```

```wiremd json
## Debug AST
[Button]
```

Output

<style>/* block-scoped CSS */</style>
<div class="wiremd-preview wiremd-preview-1 wmd-1-root wmd-1-clean">
  <!-- HTML rendered by wiremd -->
</div>

```json
{
  "type": "document",
  ...
}

Checklist

• My code follows the project's coding standards
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings or errors
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged and published

Breaking Changes

• Removed custom commands: wiremd.openPreview, wiremd.openPreviewToSide, wiremd.refreshPreview, wiremd.changeStyle, wiremd.changeViewport.
• Removed previous wiremd.* settings (defaultStyle, autoRefresh, refreshDelay, showErrorOverlay) and custom WebView preview model.

Migration Guide

1. Open preview using native VS Code commands:

   • Markdown: Open Preview
   • Markdown: Open Preview to the Side

2. Use wiremd fenced blocks directly in Markdown:

   ```wiremd
   ## Card
   [Click]
   ```

4. Use per-fence options (order-independent):

   • wiremd clean
   • wiremd html material
   • wiremd json

5. Remove old wiremd.* settings from workspace/user settings; they are no longer used.

Screenshots/Recordings

N/A

Performance Impact

• No performance impact
• Performance improved
• Performance may be affected (explain below)

Rendering now runs through native Markdown-It pipeline. Operational complexity is reduced by removing the custom WebView, but this branch does not include formal performance benchmarks.

Documentation

• README.md updated
• CHANGELOG.md updated
• API documentation updated (JSDoc)
• Example files added/updated
• Syntax specification updated (if syntax changes)

Additional Notes

• package-lock.json has major changes due to new tooling/dependencies (esbuild, vitest).
• Added LICENSE.txt under vscode-extension/ and updated packaging ignore rules for .vsix.

Reviewer Checklist

• Code quality and style
• Tests are adequate
• Documentation is complete
• No security concerns
• Performance is acceptable
• Breaking changes are justified and documented