Katex
Partager
Signaler
Contenu associé
Comment rendre les mathématiques dans vue ou nuxt?
Il existe plusieurs façons d'écrire et d'afficher de belles équations mathématiques sur le Web. Cependant, certaines méthodes ne peuvent pas être directement appliquées à Vue.js/Nuxt.js. Dans cet article, nous allons expliquer comment utiliser katex et mathjax pour afficher des équations mathématiques dans Vue.js/Nuxt.js.KatexPour afficher automatiquement toutes les équations mathématiques sur toutes les pages, vous devez utiliser un CDN pour charger katex :<!-- index.html -->
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/poem-studio-favicon-black.svg">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.css" integrity="sha384-wcIxkf4k558AjM3Yz3BBFQUbk/zgIYC2R0QpeeYb+TwlBVMrlgLqwRjRtGZiK7ww" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.js" integrity="sha384-hIoBPJpTUs74ddyc4bFZSM1TVlQDA60VBbJS0oA934VSz82sBx1X7kSx2ATBDIyd" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/contrib/auto-render.min.js" integrity="sha384-43gviWU0YVjaDtb/GhzOouOXtZMP/7XUzwPTstBeZFe/+rCMvRwr4yROQP43s0Xk" crossorigin="anonymous"
onload="renderMathInElement(document.body);"></script>
<title>Manitori</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>Si vous utilisez Nuxt.js, vous devez modifier votre fichier nuxt.config.ts :// nuxt.config.ts
export default defineNuxtConfig({
app: {
head: {
link: [
{ rel: 'stylesheet', href: "https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.css", integrity: "sha384-wcIxkf4k558AjM3Yz3BBFQUbk/zgIYC2R0QpeeYb+TwlBVMrlgLqwRjRtGZiK7ww" crossorigin="anonymous" }
],
script: [
{
defer: true,
src: "https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.js",
integrity: "sha384-hIoBPJpTUs74ddyc4bFZSM1TVlQDA60VBbJS0oA934VSz82sBx1X7kSx2ATBDIyd" crossorigin="anonymous"
},
{
defer: true,
src: "https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/contrib/auto-render.min.js",
integrity: "sha384-43gviWU0YVjaDtb/GhzOouOXtZMP/7XUzwPTstBeZFe/+rCMvRwr4yROQP43s0Xk" crossorigin="anonymous",
onload: "renderMathInElement(document.body);"
},
]
}
}})Si vous souhaitez spécifier les options de la fonction renderMathInElement, vous pouvez appeler renderMathInElement dans un autre script :<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/poem-studio-favicon-black.svg">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.css" integrity="sha384-wcIxkf4k558AjM3Yz3BBFQUbk/zgIYC2R0QpeeYb+TwlBVMrlgLqwRjRtGZiK7ww" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.js" integrity="sha384-hIoBPJpTUs74ddyc4bFZSM1TVlQDA60VBbJS0oA934VSz82sBx1X7kSx2ATBDIyd" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/contrib/auto-render.min.js" integrity="sha384-43gviWU0YVjaDtb/GhzOouOXtZMP/7XUzwPTstBeZFe/+rCMvRwr4yROQP43s0Xk" crossorigin="anonymous"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
renderMathInElement(document.body, {
// customised options
// • auto-render specific keys, e.g.:
delimiters: [
{left: '$$', right: '$$', display: true},
{left: '$', right: '$', display: false},
{left: '\\(', right: '\\)', display: false},
{left: '\\[', right: '\\]', display: true}
],
// • rendering keys, e.g.:
throwOnError : false
});
});
</script>
<title>Manitori</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>Remarque: Il est préférable de remplacer document.body par un élément spécifique document.getElementById(Id), sinon cela pourrait entraîner une erreur fatale. Voir Vue - TypeError: Cannot read properties of null (reading 'insertBefore').Pour afficher des équations mathématiques dans une zone spécifique, vous devez appeler renderMathInElement séparément dans chaque page. Par exemple :<script lang="ts" setup>
onMounted(()=>{
nextTick(()=>{
var node = document.getElementById(Id)
document.addEventListener("DOMContentLoaded", function() {
renderMathInElement(node, {
// customised options
// • auto-render specific keys, e.g.:
delimiters: [
{left: '$$', right: '$$', display: true},
{left: '$', right: '$', display: false},
{left: '\\(', right: '\\)', display: false},
{left: '\\[', right: '\\]', display: true}
],
// • rendering keys, e.g.:
throwOnError : false
});
});
})})
</script> Dans Vue.js, vous devrez peut-être afficher les équations mathématiques de manière asynchrone. Vous pouvez suivre cet exemple :<script lang="ts" setup>
var node = document.getElementById(Id)
Promise.resolve().then(()=>{
nextTick(()=>{
document.addEventListener("DOMContentLoaded", function() {
renderMathInElement(node, {
// customised options
// • auto-render specific keys, e.g.:
delimiters: [
{left: '$$', right: '$$', display: true},
{left: '$', right: '$', display: false},
{left: '\\(', right: '\\)', display: false},
{left: '\\[', right: '\\]', display: true}
],
// • rendering keys, e.g.:
throwOnError : false
});
});
})})
</script> MathjaxIl est facile d'afficher automatiquement toutes les équations mathématiques en utilisant mathjax. Comme katex, il est préférable d'utiliser un CDN pour charger mathjax :<!-- index.html -->
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/poem-studio-favicon-black.svg">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" id="MathJax-script" async
src="https://cdn.jsdelivr.net/npm/mathjax@4.0.0-beta.6/tex-chtml.js">
</script>
<script>
MathJax = {
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']]
}
};
</script>
<title>Manitori</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>Si vous utilisez Nuxt.js, modifiez votre nuxt.config.ts comme ceci :// nuxt.config.ts
export default defineNuxtConfig({
app: {
head: {
script: [
{
type: "text/javascript",
id: "MathJax-script",
async: true,
src: "https://cdn.jsdelivr.net/npm/mathjax@4.0.0-beta.6/tex-chtml.js",
},
{
innerHTML:
"MathJax = {tex: {inlineMath: [['$', '$'],['$$', '$$']]}};",
},
]})
Cependant, dans Vue.js, vous devez également afficher les équations mathématiques de manière asynchrone en utilisant mathjax, sinon les formules mathématiques affichées reviendront au texte original. Vous pouvez appeler MathJax.typesetPromise() pour y parvenir. Par exemple :<script lang="ts" setup>
Promise.resolve().then(()=>{
nextTick(() => {
MathJax.typesetPromise();
});})
</script>Ou vous pouvez utiliser setTimeout à la place de nextTick :setTimeout(() => {
MathJax.typesetPromise();
}, 3000);
En suivant nos méthodes, vous pouvez facilement intégrer Vue.js/Nuxt.js avec katex et mathjax😄!
2024-06-06 16:13:27Vue - TypeError: Cannot read properties of null (reading 'insertBefore')
In Vue 3/Nuxt 3, one may occur the error TypeError: Cannot read properties of null (reading 'insertBefore') which has little information and is hard to solve. In the following, we summerize some tips that help you solve this error :1. Change v-if to v-show , or change all v-if , v-else to v-show. Sometimes, the error appears because there are v-if or v-if, v-else pairs.2. Change katex auto-render. The error may appear because you use katex auto-render. To solve this, you could either change katex to mathjax, or change document.body in the auto-render function to a specific area document.getElementById(Id) as follows :<script>
var node = document.getElementById(Id)
document.addEventListener("DOMContentLoaded", function() {
renderMathInElement(node, {
// customised options
// • auto-render specific keys, e.g.:
delimiters: [
{left: '$$', right: '$$', display: true},
{left: '$', right: '$', display: false},
{left: '\\(', right: '\\)', display: false},
{left: '\\[', right: '\\]', display: true}
],
// • rendering keys, e.g.:
throwOnError : false
});
});
</script>If katex render all corresponding symbols in document.body, it may also influence some normal part. So you need to restrict it to a specific area.3. Change your dialog component. If you are using SSR, like Nuxt.js, the error may occur due to your dialog component in the UI library. You could either try to wrap the dialog with ClientOnly <ClientOnly>
<Dialog>
</Dialog>
</ClientOnly>or try to use another UI library.
2024-05-05 12:19:38