md2x 0.7.0 → 0.7.2

package/README.md

@@ -1,9 +1,54 @@
 # md2x
 
-Markdown → PDF/DOCX/HTML/Image converter (local, no server). Supports Mermaid/Graphviz/Infographic/Vega/HTML/SVG rendering, math, and code highlighting.
+Markdown → PDF/DOCX/HTML/Image converter (local, no server). Supports Mermaid/Graphviz/Infographic/Vega/Template(vue/svelte/html) rendering, math, and code highlighting.
+
+> Supports MCP tools and md2x skill. 🎉
 
 [![npm version](https://img.shields.io/npm/v/md2x.svg?style=flat-square)](https://www.npmjs.com/package/md2x)
 
+## CLI Usage
+
+Export to PDF:
+```bash
+npx md2x input.md
+```
+
+Export to DOCX:
+
+```bash
+npx md2x input.md -f docx
+```
+
+Export to HTML:
+
+```bash
+npx md2x input.md -f html
+```
+
+Export to PNG:
+
+```bash
+npx md2x input.md -f png -o output.png
+```
+
+List themes:
+
+```bash
+npx md2x --list-themes
+```
+
+Use a theme:
+
+```bash
+npx md2x input.md -o output.pdf --theme academic
+```
+
+Help:
+
+```bash
+npx md2x -h
+```
+
 ## CLI Options
 
 | Option | Alias | Description | Default | Values |
@@ -81,6 +126,11 @@ baseTag: true       # emit <base href="file://.../"> for resolving relative path
 diagramMode: live   # img | live | none
 cdn:                # optional: override CDN URLs (used when diagramMode: live)
   mermaid: "https://cdn.jsdelivr.net/npm/mermaid@11.12.2/dist/mermaid.min.js"
+  # Template blocks:
+  vue: "https://unpkg.com/vue@3/dist/vue.global.js"
+  vueSfcLoader: "https://cdn.jsdelivr.net/npm/vue3-sfc-loader/dist/vue3-sfc-loader.js"
+  svelteCompiler: "https://esm.sh/svelte@5/compiler"
+  svelteBase: "https://esm.sh/svelte@5/"
 ---
 ```
 
@@ -122,8 +172,8 @@ Besides diagram blocks (mermaid/dot/vega-lite/infographic), `md2x` also supports
 ````md
 ```md2x
 {
-  type: 'vue',          // "vue" | "html"
-  template: 'example.vue',
+  type: 'vue',          // "vue" | "html" | "svelte"
+  template: 'example.vue', // or "example.html" / "example.svelte"
   data: [{ title: 't', message: 'm' }]
 }
 ```
@@ -150,16 +200,45 @@ const data = templateData;
 </style>
 ```
 
+```svelte
+<!-- example.svelte (Svelte 5) -->
+<script>
+  const data = templateData;
+</script>
+
+<div class="my-component">Hello md2x! This is svelte template</div>
+{#each data as item, index}
+  <div>
+    <h2>{item.title}</h2>
+    <p>{item.message}</p>
+  </div>
+{/each}
+
+<style>
+  .my-component { color: red; }
+</style>
+```
+
 ### Config Fields
 
-- `type`: `"vue"` or `"html"`
+- `type`: `"vue"`, `"html"`, or `"svelte"` (Svelte 5)
 - `template`: template file name/path
   - if you only pass a filename (e.g. `example.vue`), it is treated as `${type}/${template}` (e.g. `vue/example.vue`)
 - `data`: arbitrary JSON-serializable data (injected by replacing the `templateData` placeholder)
+- `allowTemplateAssets` (optional, **unsafe**): when `true`, allow templates to load extra JS/CSS URLs declared in the template file header:
+  - `<!-- TemplateConfig: {"assets":{"scripts":["..."],"styles":["..."]}} -->`
+  - Useful for UMD/IIFE globals (e.g. `window.dayjs`), not npm-style `import`.
+  - Backward compat: `allowCdn` is accepted as an alias.
 - `allowScripts` (optional, **unsafe**, html only): when exporting **images** in `diagramMode: "img"`, set `allowScripts: true` to execute inline `<script>` blocks before rendering to PNG.
   - not supported: `<script type="module">`
   - external `<script src="...">` is not supported for image rendering (use inline scripts)
 
+### Svelte Notes (Svelte 5 + esm.sh)
+
+- Svelte templates are compiled at runtime using the Svelte compiler, loaded from **esm.sh** via `import()`.
+- This means Svelte template rendering requires network access (even in `diagramMode: "img"`), unless you override `cdn.svelteCompiler`/`cdn.svelteBase` to another ESM CDN that works in your environment.
+- Templates are expected to be self-contained `.svelte` files (no preprocessors like TypeScript/Sass, and avoid local relative imports unless you provide an ESM-resolvable URL).
+
 ### Template Resolution (External Templates)
 
 To load templates from outside the built-in `dist/templates`, use either:
@@ -167,48 +246,32 @@ To load templates from outside the built-in `dist/templates`, use either:
 - CLI: `--templates-dir /path/to/templates` (repeatable)
 - Front matter: `templatesDir: /path/to/templates` (string or list)
 
+### CDN Overrides (Live Mode)
 
-## Usage
+When exporting **HTML/Image** with `diagramMode: live`, you can override CDN URLs in front matter:
 
-Export to PDF:
-```bash
-npx md2x input.md
-```
-
-Export to DOCX:
-
-```bash
-npx md2x input.md -f docx
-```
-
-Export to HTML:
-
-```bash
-npx md2x input.md -f html
-```
-
-Export to PNG:
-
-```bash
-npx md2x input.md -f png -o output.png
+```yaml
+cdn:
+  vue: "https://unpkg.com/vue@3/dist/vue.global.js"
+  vueSfcLoader: "https://cdn.jsdelivr.net/npm/vue3-sfc-loader/dist/vue3-sfc-loader.js"
+  svelteCompiler: "https://esm.sh/svelte@5/compiler"
+  svelteBase: "https://esm.sh/svelte@5/"
 ```
 
-List themes:
+## md2x Skill
 
-```bash
-npx md2x --list-themes
-```
+This repo also includes a skill for driving `md2x` from an agent:
 
-Use a theme:
+- Skill: `skills/md2x/SKILL.md`
+- What it does: guides an agent to run `npx md2x ...`, pick formats/themes, and use front matter correctly.
+- Install (example):
 
 ```bash
-npx md2x input.md -o output.pdf --theme academic
-```
+npx skills add larchliu/md2x
 
-Help:
+or
 
-```bash
-npx md2x -h
+npx add-skill larchliu/md2x
 ```
 
 ## MCP server (Model Context Protocol)