ClaudeTex

Marketplace one-liner: Render LaTeX inside Claude Code's existing VS Code chat webview with a local, reversible patch and bundled KaTeX.

ClaudeTex is an unofficial companion extension for VS Code. It patches the installed anthropic.claude-code extension webview in place so LaTeX renders inline in Claude Code's existing chat webview.

It does not add a separate markdown preview, separate chat panel, replacement Claude Code UI, or external rendering service.

This project is not affiliated with Anthropic. It modifies local installed Claude Code extension files only when the patch engine determines the active webview is safe to patch, and it provides restore/status commands so the change is visible and reversible.

Status

• Target extension: anthropic.claude-code
• Tested Claude Code version: 2.1.143
• Tested install shape: a versioned VS Code extension directory such as anthropic.claude-code-2.1.143-*
• Webview files patched: webview/index.js and webview/index.css
• Markdown root observed during inspection: .root_-a7MRw
• Rendering runtime: vendored KaTeX assets packaged with this extension
• Distribution path: VS Code Marketplace first, GitHub release VSIX fallback

Requirements

• VS Code with anthropic.claude-code installed.
• No Node.js requirement for normal Marketplace or VSIX installs.
• Node.js 20 or newer and npm 11.9.0 or compatible for source installs, agent installs, tests, and packaging.
• GitHub repository access if downloading a private GitHub release asset or cloning the repo.

Install From Marketplace

Use the VS Code Marketplace listing when it is available:

code --install-extension oscarphysics.claudetex --force

ClaudeTex auto-patches Claude Code on startup when the webview is unpatched or safely upgradable. If you want to trigger it manually, run:

ClaudeTex: Enable
Developer: Reload Window

Verify with:

ClaudeTex: Show Status

Expected status includes:

patch applied: yes
patch version current: yes
JS patch version: 0.2.0
CSS patch version: 0.2.0
backup exists: yes
KaTeX vendored: yes

GitHub VSIX Fallback

Use the GitHub release when Marketplace is unavailable, private testing is needed, or a collaborator cannot reach the Marketplace.

1. Download the latest claudetex-*.vsix and matching *.sha256 file from the GitHub release.

2. Verify the checksum from the download directory:

   shasum -a 256 -c claudetex-0.2.0.vsix.sha256
   

   On Linux, sha256sum -c claudetex-0.2.0.vsix.sha256 is also fine.

3. Install the VSIX:

   code --install-extension claudetex-0.2.0.vsix --force
   

4. In VS Code, run:

   ClaudeTex: Enable
   Developer: Reload Window
   

5. Verify with ClaudeTex: Show Status.

Agent Or Cluster Source Install

An agent can apply the patch without driving the VS Code command palette:

git clone https://github.com/OscarBarreraGithub/claude-code-inline-math.git
cd claude-code-inline-math
npm ci
npm run patch:status
npm run patch:apply

Then reload VS Code.

For Remote SSH, code-server, and cluster environments, run the same commands in the environment where anthropic.claude-code is installed. If auto-detection does not find Claude Code, pass the exact extension directory:

CLAUDE_CODE_EXTENSION_PATH="$HOME/.vscode-server/extensions/anthropic.claude-code-2.1.143-linux-x64" npm run patch:apply

For code-server, the path is commonly under $HOME/.local/share/code-server/extensions. See docs/agent-runbook.md for Marketplace-first installs, GitHub release fallback, remote paths, source installs, and diagnostics.

Update Behavior

Claude Code updates commonly install a new versioned anthropic.claude-code-* extension folder and replace the active webview files. After Claude Code updates, run:

ClaudeTex: Enable
Developer: Reload Window

ClaudeTex resolves the active Claude Code path again before patching. ClaudeTex: Enable also upgrades older injected patch versions when verified backups are available.

Marketplace or VSIX updates refresh the injected runtime automatically when the active Claude Code webview is in a safe state. The claudeTex.autoPatchOnStartup setting controls this behavior and defaults to true.

If you need to remove the patch, run ClaudeTex: Restore Original Claude Code Webview before uninstalling this companion extension.

Trust And Safety

• This is an unofficial project and is not affiliated with Anthropic.
• It does not collect telemetry.
• It does not make runtime CDN requests or runtime downloads. KaTeX JavaScript, CSS, fonts, and license text are vendored in the extension package.
• It does not redistribute Claude Code files.
• It patches only Claude Code webview assets in the user's installed anthropic.claude-code directory: webview/index.js, webview/index.css, and the companion webview font assets required by the injected KaTeX CSS.
• It creates deterministic local backups before patching and can restore the original Claude Code webview files.
• It reports patch status, backup presence, injected JS/CSS patch versions, and vendored KaTeX presence.

Commands

• ClaudeTex: Enable patches or refreshes the currently installed Claude Code webview.
• ClaudeTex: Disable restores the original Claude Code webview when verified backups are available.
• ClaudeTex: Restore Original Claude Code Webview restores the local backup created before patching.
• ClaudeTex: Show Status reports the detected Claude Code install and whether the webview appears patched.
• ClaudeTex: Diagnose Install writes detailed patch safety diagnostics to the ClaudeTex output channel.
• ClaudeTex: Re-render Math reloads the active Claude Code webview; Ctrl+Alt+M inside the webview forces an in-place rerender.

How The Patch Works

The companion extension locates the installed anthropic.claude-code extension, validates the expected webview files, writes backups, and injects the math-rendering changes directly into Claude Code's packaged webview assets. KaTeX is vendored so rendering works offline and does not depend on a CDN.

Backups are local to the installed Claude Code extension directory. Restoring only affects those patched local files; it does not uninstall Claude Code or this companion extension.

Build From Source

Prerequisites: Node.js 20 or newer and npm 11.9.0 or compatible. The repository includes package-lock.json, so use npm ci for collaborator installs.

git clone https://github.com/OscarBarreraGithub/claude-code-inline-math.git
cd claude-code-inline-math
npm ci
npm test
npm run package
code --install-extension dist/claudetex-0.2.0.vsix --force

Then run ClaudeTex: Enable and reload VS Code.

Collaborator Flow

Use Marketplace install first. If Marketplace is unavailable, use the GitHub release VSIX and checksum. Do not ask collaborators to copy files into the Claude Code extension directory manually.

1. Install from Marketplace, or install the release VSIX with code --install-extension ... --force.
2. Run ClaudeTex: Enable.
3. Run Developer: Reload Window.
4. After every Claude Code update, run ClaudeTex: Enable.
5. To remove the patch, run ClaudeTex: Restore Original Claude Code Webview before uninstalling this companion extension.

For agent-driven installs, use docs/agent-runbook.md.

Packaging Notes

The packaging script checks for the compiled extension entrypoint, Marketplace-facing docs, .vscodeignore, and vendored KaTeX browser assets before creating a VSIX. It emits a .sha256 checksum next to the VSIX.

The expected vendored asset paths are:

• vendor/katex/katex.min.css
• vendor/katex/katex.min.js
• vendor/katex/auto-render.min.js
• vendor/katex/fonts/*.woff2
• vendor/katex/LICENSE

The VSIX intentionally excludes source, scripts, tests, and repository runbook docs under docs/**. Runtime extension code is expected under out/, injected webview assets under webview-patch/, and KaTeX assets under vendor/katex/.

Release instructions are in docs/release.md, including Marketplace publisher token handling.

Support And Security

• Support: SUPPORT.md
• Security policy: SECURITY.md
• Notices and third-party license notes: NOTICE.md

Limitations

This extension depends on Claude Code's packaged webview implementation. It was validated against Claude Code 2.1.143; newer versions may require a patch update if Anthropic changes the bundled markdown renderer, generated CSS class names, or webview asset layout.

ClaudeTex renders after Claude Code's Markdown renderer has already parsed the message. That means a few cases are intentionally conservative:

• Math inside fenced code blocks, inline backticks, prompt inputs, textareas, and existing KaTeX output is left raw.
• \(...\), \[...\], $$...$$, and supported LaTeX environments are the most reliable delimiters.
• Single-dollar math is parsed with currency/prose guards. Use \(...\) if a valid $...$ expression stays raw.
• Multi-line single-dollar math is not supported. Use display delimiters for multi-line equations.
• KaTeX is not a full LaTeX engine. Unsupported packages and drawing environments such as TikZ/PGF are expected to stay raw or render as KaTeX errors.
• Claude Code or Markdown may strip some punctuation escapes before ClaudeTex sees the text. ClaudeTex repairs common matrix row breaks and \left{ / \right} brace damage, but unusual escaped punctuation can still need explicit display delimiters or extra backslashes.

This project is not affiliated with Anthropic.