add katex support #1385
add katex support #1385
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
src/views/blog-post/blog-post.astro
Outdated
| @@ -37,6 +37,8 @@ const { postHtml, post, authors, collection, collectionPosts, license } = | |||
|
|
|||
| const postHeadings = postHtml.headingsWithIds; | |||
| const GHLink = `https://github.com/${siteMetadata.repoPath}/tree/main/content/${post.path}/index.md`; | |||
|
|
|||
| import "katex/dist/katex.min.css"; | |||
There was a problem hiding this comment.
Is this the best way to include CSS?
|
Is there any detectable class/property in the rehype output after the math plugins? You could add an extra step using unist-util-visit to check if the math styles were used, set a flag on the post metadata if so, and then conditionally import the styles based on that. https://github.com/playfulprogramming/playfulprogramming/blob/main/src/utils/markdown/types.ts#L13 - This object should be passed through all the unified steps in the vfile arg, and should also get passed to blog-post.astro, so that's a good place to put it. |
Indeed, here's some example output. It has <span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mo stretchy="false">[</mo><mo>−</mo><mo stretchy="false">(</mo><msup><mn>2</mn><mn>53</mn></msup><mo>−</mo><mn>1</mn><mo stretchy="false">)</mo><mo separator="true">,</mo><msup><mn>2</mn><mn>53</mn></msup><mo>−</mo><mn>1</mn><mo stretchy="false">]</mo></mrow><annotation encoding="application/x-tex">[-(2^{53} - 1), 2^{53} - 1]</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:1.0641em;vertical-align:-0.25em"></span><span class="mopen">[</span><span class="mord">−</span><span class="mopen">(</span><span class="mord"><span class="mord">2</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.8141em"><span style="top:-3.063em;margin-right:0.05em"><span class="pstrut" style="height:2.7em"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight"><span class="mord mtight">53</span></span></span></span></span></span></span></span></span><span class="mspace" style="margin-right:0.2222em"></span><span class="mbin">−</span><span class="mspace" style="margin-right:0.2222em"></span></span><span class="base"><span class="strut" style="height:1.0641em;vertical-align:-0.25em"></span><span class="mord">1</span><span class="mclose">)</span><span class="mpunct">,</span><span class="mspace" style="margin-right:0.1667em"></span><span class="mord"><span class="mord">2</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.8141em"><span style="top:-3.063em;margin-right:0.05em"><span class="pstrut" style="height:2.7em"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight"><span class="mord mtight">53</span></span></span></span></span></span></span></span></span><span class="mspace" style="margin-right:0.2222em"></span><span class="mbin">−</span><span class="mspace" style="margin-right:0.2222em"></span></span><span class="base"><span class="strut" style="height:1em;vertical-align:-0.25em"></span><span class="mord">1</span><span class="mclose">]</span></span></span></span> |
|
I could also probably assume no one else is just throwing mathml in their posts and include it if there is mathml at all |
|
I've managed to conditionally set a frontmatter prop, but for whatever reason, astro is always importing the CSS no matter how I try to conditionally import |
|
I was able to conditionally import via a CDN link, but not sure how we feel about that |
We need latex for my math stuffs. Thank
Katex will transform latex into mathml so it looks pretty and works nicely with screen reader. Yipee
One qualm I have is the current CSS import I added is on every single blog post (adds around 27KB to each page). Is there a way to include this only when it's needed? Is there a better way to hook into SCSS for this? I feel dirty adding that import
The way I conditionally import in my blog is just setting a "math" boolean in the frontmatter of md files