es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Añadiendo una fórmula matemática de mathjax/katex dentro de una clase de div en markdown/html.

Añadiendo una fórmula matemática de mathjax/katex dentro de una clase de div en markdown/html.

14 Jul, 2023 Programación

¿Cómo añado la fórmula matemática $E=mc^2$ para que se renderice con mathjax/katex dentro de una clase CSS? Estoy intentando usar esto dentro de las siguientes clases en markdown:


.theorem {
display: block;
font-style: italic;
}
.theorem:before {
content: "Theorem. ";
font-weight: bold;
font-style: normal;
}
.theorem[text]:before {
content: "Theorem (" attr(text) ") ";
}

por ejemplo:

bar is $\alpha = \beta$.

Pero no se renderiza el ejemplo proporcionado.

EDICIÓN: resulta que para que las fórmulas matemáticas $...$ se rendericen dentro de la clase

, se debe dejar una línea en blanco.
por ejemplo:

<div class="theorem" data-text="Foo">

Dado $a, b$:
$$a = b$$
</div>
Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para agregar una fórmula matemática renderizada con Mathjax/Katex dentro de una clase CSS, puedes seguir los siguientes pasos:

    1. Agrega el script de Mathjax/Katex a tu archivo HTML:
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS_HTML"></script>
    1. Envuelve tu expresión matemática dentro de una etiqueta span con una clase math:
    <span class="math">E=mc^2</span>
    1. Crea una clase CSS para tu teorema y agrega la clase math a la propiedad content de tu selector :before:
    .theorem:before {
    content: "Teorema. ";
    font-weight: bold;
    font-style: normal;
}

.theorem:before:after {
    content: "\202F(\attr(data-text))\202F";
    font-style: italic;
}

.theorem .math {
    display: inline-block;
}
    1. Agrega la clase theorem a tu div:
    <div class="theorem" data-text="Foo"> bar es <span class="math">E=mc^2</span>.</div>

    Ten en cuenta que deberás escapar los caracteres < y > como < y > respectivamente en tu documento Markdown para que se muestren correctamente en HTML. Además, asegúrate de incluir el script de Mathjax/Katex en tu archivo HTML para que la fórmula se renderice correctamente.

Comments are closed.