How to use macros with mhchem #3915
-
<!-- use macros with mhchem -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Marked with mhchem</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/mhchem.min.js"></script>
</head>
<body>
<div id="content"></div>
<script>
const options = {
throwOnError: false,
displayMode: true,
macros: {
'\\ce': '\\mhchem{#1}',
},
}
const str =
'\\ce{N2 + 3H2 <=>T[High temperature Pressurized][Catalyst] 2NH3}'
document.getElementById('content').innerHTML = katex.renderToString(
str,
options
)
</script>
</body>
</html>
<!-- only use katex -->
<!DOCTYPE html>
<html>
<head>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css"
/>
<script
defer
src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"
></script>
<script
defer
src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/mhchem.min.js"
></script>
<script
defer
src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js"
onload="renderMathInElement(document.body);"
></script>
</head>
<body>
<span>
$$\ce{N2 + 3H2 <=>T[High temperature Pressurized][Catalyst] 2NH3}$$
</span>
</body>
</html>
Hello, How can I use mhchem macros in the options to parse chemical formulas properly? I saw in the official documentation that it can be directly included, but I am having trouble getting it to work with Vue 3. Could you please provide me some assistance in making "use macros with mhchem" function correctly? I greatly appreciate your help. |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 5 replies
-
|
Your macro |
Beta Was this translation helpful? Give feedback.
-
<!-- use marked -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Marked in the browser</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/mhchem.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked-katex-extension/lib/index.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
</head>
<body>
<div id="content"></div>
<script>
const options = {
throwOnError: false,
displayMode: true,
macros: {
'\\ce': '\\mhchem{#1}',
},
}
marked.use(markedKatex(options))
document.getElementById('content').innerHTML = marked.parse(
'$$\\ce{N2 + 3H2 <=>T[High temperature Pressurized][Catalyst] 2NH3}$$'
)
</script>
</body>
</html>Previously, I simplified the problem to the I have noticed the mhchem documentation, but there is no clearer guide on how to integrate it with marked's options for parsing chemical formulas. I feel my logic is correct, but I am unsure about the implementation details. |
Beta Was this translation helpful? Give feedback.
-
|
@edemaine |
Beta Was this translation helpful? Give feedback.
-
|
Looking at the code for marked-katex-extension, I think you need to make sure it's importing the same |
Beta Was this translation helpful? Give feedback.
-
|
thanks all. it is working. see here |
Beta Was this translation helpful? Give feedback.
thanks all. it is working. see here