it is not working for JSON/API Data, but MathJax is working. It just works for objects only #2782
-
|
Describe the bug: KaTex (with JS Object it is working) but (it is not working for JSON) <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css" integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous"/></link>
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.12.0/katex.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.12.0/contrib/auto-render.min.js"></script>
</head>
<body>
$\frac y3$ $\frac y3$
<div id="math"></div>
<main id="main"></main>
</body>
<script type="text/javascript" src="main.js"></script>
<script>
renderMathInElement(document.body, {
delimiters: [
{left: "$$", right: "$$", display: true},
{left: "$", right: "$", display: false},
{left: "\\(", right: "\\)", display: false},
{left: "\\[", right: "\\]", display: true},
{left: "\\begin{equation}", right: "\\end{equation}", display: true}
]
});
</script>
</html>const main = document.getElementById('main')
const data = {
angleBtnS: [
{
question: 'Prove that .. $\\frac x2$ + $\\frac y3$',
date: 'SEE 2073',
ans: '11'
},
{
question:
'If the lines 3x + my = 5 and $\\frac x2$ + $\\frac y3$ = 1 are parallel to each other, find the value of m.',
date: '22',
ans: '<h1>hihi</h1>'
},
{
question: '$\\frac x2$ + $\\frac y3$ - $\\frac x2$ + $\\frac y3$',
date: 'date',
ans: 'ans ans ans'
}
]
}
function setData() {
main.innerHTML = ''
data.angleBtnS.forEach((dta, index) => {
const dataEl = document.createElement('div')
dataEl.classList.add('card')
dataEl.innerHTML = `
<h2>${index + 1 + ') '}${dta.question}</h2><span>${dta.date}</span>
<div class="ans">${dta.ans}</div>
`
main.appendChild(dataEl)
})
}
setData()this is the example of JSON/From API (it is not working) html file is exactly same as abovethis is js file: async function fetchData() {
const res = await fetch('main.json') //main.json file is same as of the js object 'const data = ...' which is shown in above example
const resData = await res.json()
setData(resData.angleBtnStraight)
}
function setData(data) {
main.innerHTML = ''
data.forEach((dta, index) => {
const dataEl = document.createElement('div')
dataEl.classList.add('card')
dataEl.innerHTML = `
<h2>${index + 1 + ') '}${
dta.question
}</h2><span>${dta.date}</span>
<div class="ans">${dta.ans}</div>
`
main.appendChild(dataEl)
})
}
fetchData()FINALLY, this the mathjax code which is working for JSON: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
MathJax.Hub.Config({
tex2jax: {inlineMath: [['$','$']]},
"HTML-CSS": { linebreaks: { automatic: true }, mtextFontInherit: true, matchFontHeight: false, mathmlSpacing: true },
CommonHTML: { linebreaks: { automatic: true }, mtextFontInherit: true, matchFontHeight: false, mathmlSpacing: true },
SVG: { linebreaks: { automatic: true }, mtextFontInherit: true }
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS_HTML-full"></script>
</head>
<body>
$\frac y3$ $\frac y3$
<div id="math"></div>
<main id="main"></main>
</body>
<script type="text/javascript" src="main.js"></script>
</html>js file: |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 11 replies
-
|
I would recommend putting the call to KaTeX ( On the other hand, the code you show should work — I believe |
Beta Was this translation helpful? Give feedback.
-
|
oh. can you please suggest the name of npm package that you like? I want to translate JSON file using LaTeX notation into another JSON file. It would be very awesome if you could provide code to translate JSON 😅 I searched in the internet. got to know about |
Beta Was this translation helpful? Give feedback.
-
|
There isn't a package for this. The idea would be to do it via |
Beta Was this translation helpful? Give feedback.
-
|
Nono I want to optimize it, learn it. 😅 can you please help with this? I read this but not getting good idea (to convert json) |
Beta Was this translation helpful? Give feedback.
-
|
Should I render the each required math in console by using I also know some reactJS, as you said before that it can be done form nodeJS, can you help me to accomplish it? It'd make site load faster and also I could get new thing to learn |
Beta Was this translation helpful? Give feedback.
-
|
Sorry, but this is beyond the scope of what I have time to help with. Best of luck! |
Beta Was this translation helpful? Give feedback.
I would recommend putting the call to KaTeX (
renderMathInElement) at the end of your JavaScript filemain.js. Then it seems to work well. See this CodePen demo.On the other hand, the code you show should work — I believe
<script>tags are supposed to run in order, unless they are markeddeferorasync. I tried running your code directly as listed above, and I got some rendering defects (fraction lines invisible, not sure why) but it did render all the math. So it's difficult to tell what's going wrong in your setup.