Real-time math preview for LaTeX and markdown. Powered by MathJax and KaTeX.
Usage
Install this extension, and then put your cursor into math block in markdown(.md) or latex(.tex) file. Then you will get real-time preview:
And when you input math formula, the preview will update:
Enjoy and rate five-stars ⭐⭐⭐⭐⭐ ~
Configurations & Commands
You can define macros and ⚠ MANUALLY update by executing umath.preview.reloadMacros (Ultra Math Preview: Reload Macros). "Automatically updating macros" has been disabled, because it can affect peformance.
Or you can set macros in setting.json
You can use command umath.preview.toggleMathPreview(Ultra Math Preview: Toggle Math Preview) to enable or disable math preview.
Background color and foreground color will change with Theme. If it goes invalid, execute umath.preview.reloadPreview(Ultra Math Preview: Reload Preview) Command.
You can set preview panel on the top/bottom of math block by umath.preview.position (Umath > Preview: Position) option.
You can set whether you want to adjust the position of the math formula preview in real time by umath.preview.AutoAdjustPreviewPosition, and how fast the math formula preview is updated by umath.preview.DebounceTime.
You can set whether (umath.preview.EnableCursor) and how (umath.preview.CursorType) you want the mouse position to be displayed in the math formula preview. Currently, only hand-shaped emoji (👆) and black triangles ($\blacktriangleright$) are supported
You can set the renderer as MathJax/KaTeX by umath.preview.renderer (Umath > Preview: Renderer).
You can set Custom CSS in umath.preview.customCSS (Umath > Preview: Custom CSS).
now you can uninstall draivin.hscopes (HyperScopes) if no extension depends on that.
Known Isseus
Regarding the horizontal instability of the preview window.
When Automatically adjust preview position is enabled, the preview window can not not exceed the text position boundaries. In contexts with excessive indentation or empty lines, the preview window may exhibit lateral oscillations (left-right swaying). Setting position: absolute for the defaultCss variable in the file "./src/math-preview.js" fails to resolve this issue, while alternative configurations like fixed cannot guarantee stable preview performance under normal conditions.
When I enable cursor position (umath.preview.EnableCursor:true), why sometimes mathpreview doesn't show up?
The principle of inserting cursor positions in mathematical formulas is to insert specific symbols at the corresponding positions. In some places, carets cause formula compilation errors and do not output previews. Statements that are known to cause this error include \left and \right.
Todo
[ ] Added support for asciidoc|rmarkdown|jupyter.
[x] Add cursor to "Position"(umath.preview.position) options.
[x] Automatically adjust preview position.
[x] Add escape keybinding for closing preview panel.
[x] Support user-defined CSS style
[x] Support more environments.
[x] Fix alignment bug
Debugging
Install node.js(Version 18.0.0 recommended)
Run node -v and npm -v to confirm the version.
Run npm run install in the terminal to install devDependencies in the "./package.json".
Version 3.2.0 is recommended for mathjax-full. Otherwise, an error message will be reported:Cannot set property RequireLoad of #<Object> which has only a getter.
Run npm run esbuild-watchin the terminal.
Open ./dist/extension.js and press F5 (".vscode/launch.json" needs to be configured in advance).
Acknowledgement
Part of the code is generated based on the DeepSeek-Coder,such as the function getMaxHeightValueAndUnit in the "./src/util/autoPreviewPosition.js"
