XiNote
A VS Code / Cursor toolkit for Markdown notebooks: sidebar file views, clipboard & drop images, live preview, BibTeX citations, and HTML / PDF export.
Requirements: VS Code / Cursor ^1.93.0 · activate when editing Markdown.
Extension ID: Mrxixixixi.xinote (formerly Mrxixixixi.xitool-vscode).
Features
Open the XiNote activity-bar icon. Views:
| View |
Purpose |
| Note File |
Markdown notes (and related drawio / xicanvas). Status icons show HTML sync: checked / unchecked / conflict. |
| Code File |
Files matching codeExtension (default .m). |
| Unused Image |
Images under the note PIC folders that are not referenced in Markdown. |
| Bibtex File |
.bib libraries for citation insert / reload. |
| Other File |
Files matching otherExtension (default .hsnips). |
| Outline |
Heading outline for the active Markdown file. |
Note File extras:
- Work / Clean mode — toggle clutter vs. a quieter note list.
- Context actions: edit, rename, open HTML, open in browser, reveal PIC folder, copy relative path.
- Folder actions: add file / folder.
Images
- Paste from clipboard —
Ctrl+Alt+V (Mac: Cmd+Alt+V).
- Drag & drop into a Markdown editor (enabled by
enableDropImage). Hold Shift while dropping when the editor would otherwise open the file.
- Unused Image view — refresh and delete leftovers.
Path and insert text are configurable (imagePathPattern, imageInsertText). Placeholders:
| Token |
Meaning |
{filename} |
Stem of the Markdown file receiving the image |
{datetime:yyyy-LL-dd-hh-mm-ss} |
Timestamp (Luxon formats) |
{input} |
Optional prompt text from the user |
{imagePath} |
Resolved path in imageInsertText |
Image file names should avoid spaces and non-ASCII characters so links stay portable.
Preview
- Preview Note from the editor title bar (Markdown).
- Optional auto-open when opening a
.md file (autoOpenPreview).
- Scroll sync between editor and preview.
- Auto-refresh when images under the note’s PIC folder change (same path overwrite included).
Export (HTML / PDF)
Built-in Markdown → HTML pipeline (no Markdown Preview Enhanced required):
| Action |
What it does |
| Rerender |
Write/update sibling .html next to the note |
| Export Standalone HTML |
Self-contained HTML export |
| Export Pdf |
PDF via print of exported HTML |
| Auto on save |
Optional (autoCreateHtmlOnSave) |
Themes: crossnote, github-light, github-dark, minimal, sepia, academic. Math / Mermaid modes: svg-embed, offline-assets, cdn. Optional extra CSS via htmlExportStyleCss.
MathJaxPath can still rewrite MathJax script paths in existing HTML if you keep a shared library on disk.
Citations
- BibTeX autocomplete when
enableCite is on.
- Library path:
bibtexPath, or auto-discover under the working folder.
- Insert format:
citePattern ({title}, {author}, {journal}, {date}, {DOI}, volume, page, …).
- Reload from the Bibtex File view title bar.
Each BibTeX entry needs a citation key. For quick suggestions in Markdown, add to settings.json:
"[markdown]": {
"editor.quickSuggestions": true
}
Configuration
All keys are under xinote.* in Settings.
| Setting |
Default |
Description |
workingFolderLevel |
2 |
Depth used to resolve the working folder |
ignoreFolder |
[".git"] |
Folders skipped while scanning |
imagePathPattern |
./PIC/{filename}-pic/image-{datetime:yyyy-LL-dd-hh-mm-ss}{input}.png |
Save path for pasted / dropped images |
imageInsertText |
 |
Markdown inserted for an image |
enableDropImage |
true |
Drag-and-drop images into Markdown |
enableCite |
true |
Citation autocomplete |
bibtexPath |
"" |
Path to .bib (empty = search workspace) |
citePattern |
{title}, {author}, {journal}({date}) [DOI](https://github.com/Mrxixixixi/xitool-vscode/blob/HEAD/{DOI}) |
Citation insert template |
codeExtension |
[".m"] |
Extensions listed in Code File |
otherExtension |
[".hsnips"] |
Extensions listed in Other File |
MathJaxPath |
../ZResource/es5/tex-mml-chtml.js |
MathJax path for HTML rewrite |
autoCreateHtmlOnSave |
false |
Export HTML when saving .md |
autoOpenPreview |
true |
Open Preview Note when opening .md |
htmlExportTheme |
crossnote |
CSS theme for HTML export |
htmlExportStyleCss |
"" |
Extra .css merged after the theme |
htmlExportMathMermaidMode |
svg-embed |
Math + Mermaid embedding strategy |
htmlExportKrokiUrl |
https://kroki.io |
Kroki base URL (Mermaid SVG in svg-embed) |
Acknowledgments
- Clipboard paste inspired by Paste Image.
- HTML export uses MathJax, Mermaid, Shiki, and markdown-it plugins bundled with this extension.
Links
