feat(vscode): render KaTeX math in chat messages#105
Open
zeug-zz wants to merge 3 commits into
Open
Conversation
Owner
|
@zeug-zz こちらも同じく、reviewして良さそうならreviewerにいれてください！ |
Author
Wire marked-katex-extension into the existing Marked parser in TextPartView so $inline$ and $$display$$ math is rendered at parse time. Wrap the markdown output in <div> instead of <span> so block-level elements produced by marked (and .katex-display) are valid HTML. - Add katex and marked-katex-extension to vscode webview deps. - Import katex/dist/katex.min.css from main.tsx (bundled by Vite) rather than styles.css to keep CSS @import semantics out of the app stylesheet. - Loosen the webview CSP: split style-src / style-src-attr / style-src-elem and permit 'unsafe-inline' on style-src-attr so KaTeX's per-element style="height:...; vertical-align:...;" attributes are honored (stacked fraction layout). - Add scoped KaTeX rules to MessageItem.module.css: .katex sizing and line-height, .katex-display block layout with horizontal scroll, vertical-align: baseline on .katex-display > .katex to prevent the inline-math rule from shifting display math, and a direct-child p > .katex selector for inline math. - Update TextPartView test to assert the .markdown container element.
zeug-zz
force-pushed
the
feat/katex-renderer
branch
from
264ca39 to
5e8d255
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Wire
marked-katex-extensioninto the existingmarkedinstance used byTextPartViewso$inline$and$$display$$math render at parse time alongside the rest of the Markdown.What changes
katexandmarked-katex-extensionas runtime dependencies of the VS Code webview package.katex/dist/katex.min.cssfrommain.tsx(Vite-bundled) rather than fromstyles.css, so KaTeX styles are owned by the entry that depends on them and@importsemantics stay out of the app stylesheet.markedwrapper from<span>to<div>so block-level elements produced bymarked(and.katex-display) produce valid HTML.style-src/style-src-attr/style-src-elemand permit'unsafe-inline'onstyle-src-attrso KaTeX's per-elementstyle="height:...; vertical-align:...;"attributes are honored (stacked fraction layout).Impact
development+ this commitpnpm checkintroduces no new warnings in the touched filesindex.js842.99 kB (gzip 258.81 kB),index.css73.77 kB (gzip 15.30 kB)katex,marked-katex-extension