Quiero usar Mathjax en mi sitio web. Puse en la sección <head> de public/index.html :
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>Y, en mi componente:
<template> <div v-html="note_content"></div> </template> <script> import { typeset, dummy_typeset } from '../assets/js/text_processing.js'; import showdown from 'showdown'; const converter = new showdown.Converter({ tables: true }); export default { data () { return { } }, computed: { note_content: function() { return typeset(this.exchange_data); } }, props: ['exchange_data'], watch: { note_content: function() { Mathjax.typesetPromise(); } } } </script>Sin embargo, en tiempo de ejecución, aparece el error:
Uncaught (in promise) ReferenceError: Mathjax is not defined Lo que no entiendo es que el css que se encuentra en el head de public/index.html esté correctamente cargado y renderizado en el componente. También leí en otra parte que cargar javascript externo de esta manera debería estar disponible para todos los componentes. Qué está mal ?
Creo que está conectado a la configuración del paquete web, pero podría estar equivocado. De todos modos, ¿has probado este método?
¿Cómo agregar scripts JS externos a los componentes de VueJS?
Obliga a que se cargue el script.
Al contrario de lo que está escrito en https://docs.mathjax.org/en/latest/web/typeset.html , la sintaxis para la representación asíncrona no es:
Mathjax.typesetPromise()Pero (nótese el caso):
MathJax.typesetPromise()El error tipográfico podría detectarse a partir del contexto circundante.
Además, para usar Mathjax tipográfico en un componente Vue, el DOM virtual debe procesarse antes de llamar al método typesetPromise , por lo que un ejemplo de código de trabajo sería:
watch: { note_content: function() { this.$nextTick(MathJax.typesetPromise); } }