about elm katex

[gh1]

I am posting for the first time.

https://package.elm-lang.org/packages/yotamDvir/elm-katex/latest/

The following is an excerpt.

The inline expression does not change dynamically and is added.
If anyone is familiar with it, please let me know.

elm source:///////////////////////
divkatex lstkatex= lstkatex |> List.map (K.generate htmlGenerator) |> div [class “katexl”]

html://///////////////////
var elts = document.getElementsByClassName(‘katexl’);
var opt = {
delimiters: [
{
left: “$begin-inline$”, right: “$end-inline$”, display: false
},
{
left: “$begin-display$”, right: “$end-display$”, display: true
}
]};
document.addEventListener(“DOMSubtreeModified”, function() {
for(var i = 0 ; i < elts.length ; ++i){
renderMathInElement(elts[i],opt);
}

[gh1]

Self-resolved.:
When I analyze the state of the dom, I can see that it is due to the addition of span for expression display. In Elm, I added a class name (“inline”) to the target element, and based on that, I managed to fix it by removing the unnecessary one.

Elm:
htmlGenerator isDisplayMode stringLatex =
case isDisplayMode of
Just True →
div [style “font-size” “30px”] [ text stringLatex ]
Just False →
span [style “font-size” “30px”,class “inline”] [ text stringLatex ]
Nothing →
span [style “font-size” “30px”,class “human”] [ text stringLatex ]

divkatex lstkatex= lstkatex |> List.map (K.generate htmlGenerator) |> div [class “katexl”]

Html：
var opt = {
delimiters: [
{
left: “begin−inline”,
right: “end−inline”,
display: false
},
{
left: “begin−display”,
right: “end−display”,
display: true
}
]};

document.addEventListener("DOMContentLoaded", function() {
renderMathInElement(document.body, opt);
});

var ilns = document.getElementsByClassName('inline');   
document.addEventListener("DOMSubtreeModified", function() {
 renderMathInElement(document.body,opt);
 for(var i = 0 ; i < ilns.length ; ++i){  
  if (ilns[i].childElementCount>1) {
    ilns[i].removeChild(ilns[i].lastChild) ;
  }else{
  }       
 };
});