I have imported katex with script tag in index.html
of my angular 18 project like this:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css" integrity="sha384-nB0miv6/jRmo5UMMR1wu3Gz6NLsoTkbqJghGIsx//Rlm+ZU03BU6SQNC66uf4l5+" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.js" integrity="sha384-7zkQWkzuo3B5mTepMUcHkMB5jZaolc2xDwL6VFqjFALcbeS9Ggm/Yr2r3Dy4lfFg" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/contrib/auto-render.min.js" integrity="sha384-43gviWU0YVjaDtb/GhzOouOXtZMP/7XUzwPTstBeZFe/+rCMvRwr4yROQP43s0Xk" crossorigin="anonymous"
onload="renderMathInElement(document.body);"></script>
There are no errors in the console, but it is not showing the updated version:
Though after I run this command in the developer console it works:
renderMathInElement(document.body)
Here is the html code:
<p>\(x^2 + y^2 = z^2\)</p>
What else I tried:
Using katex
from npm:
import renderMathInElement from 'katex/contrib/auto-render'
// ...
ngAfterViewInit(){
this.start()
}
start(){
renderMathInElement(document.body)
}
SCSS:
@import "../node_modules/katex/dist/katex.min.css";
With no errors this didn't work either
Using MathJax: I used the script tag to load mathjax and used window.MathJax.typsetPromise()
ngAfterViewInit(){
this.start()
}
start(){
window.MathJax.typsetPromise()
}
Additional Details:
constructor
, ngOnInit
, and even triggering on a button click).console.log
(Not shown above) in the start function prints but it does not change the appearance work.Any advice on what might be causing this issue or how to resolve it?
Thanks in Advance!
I couldn't find a way to I just wrote a component for this with katex
.
// katex.component.ts
export class KatexComponent implements AfterViewInit{
@Input({required: true}) tex?: string
@ViewChild('ptex') texElement?: ElementRef
ngAfterViewInit(){
katex.render(this.tex || "", this.texElement?.nativeElement)
}
}
// katex-label.component.ts
export class KatexLabelComponent {
parts: {math: boolean, value: string}[] = []
@Input({ required: true }) tex: string = "";
ngOnInit() {
const splitContent = this.tex.split(/(\$\$.*?\$\$)/);
this.parts = splitContent.map(part => {
if (part.startsWith('$$')) {
return { math: true, value: part.slice(2, -2) };
} else {
return { math: false, value: part };
}
});
}
Also, sorry for posting this late. I completely forgot about this question.