Vue或Nuxt中如何渲染数学公式?

在网页上,有很多种方法可以渲染漂亮的数学公式。但是这些方法基本上不能直接应用于Vue.js或者Nuxt.js。在本文中,我们将分别说明如何在Vue.js或者Nuxt.js中使用katexmathjax渲染数学公式。

Katex

想要自动渲染所有页面上的数学公式,你需要使用CDN来加载katex



DOCTYPE html>
<html lang="en">
  <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/[email protected]/dist/katex.min.css" integrity="sha384-wcIxkf4k558AjM3Yz3BBFQUbk/zgIYC2R0QpeeYb+TwlBVMrlgLqwRjRtGZiK7ww" crossorigin="anonymous">
    <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js" integrity="sha384-hIoBPJpTUs74ddyc4bFZSM1TVlQDA60VBbJS0oA934VSz82sBx1X7kSx2ATBDIyd" crossorigin="anonymous">script>
    <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js" integrity="sha384-43gviWU0YVjaDtb/GhzOouOXtZMP/7XUzwPTstBeZFe/+rCMvRwr4yROQP43s0Xk" crossorigin="anonymous"
    onload="renderMathInElement(document.body);">script>
    <title>Manitorititle>
  head>
  <body>
    <div id="app">div>
    <script type="module" src="/src/main.js">script>
  body>
html>

如果你使用的是Nuxt.js,那么你需要修改你的nuxt.config.ts

//nuxt.config.ts

export default defineNuxtConfig({
  app: {
    head: {
      link: [
        {rel:'stylesheet', href:"https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css", integrity:"sha384-wcIxkf4k558AjM3Yz3BBFQUbk/zgIYC2R0QpeeYb+TwlBVMrlgLqwRjRtGZiK7ww", crossorigin:"anonymous"}
      ],
      script: [
        {
          defer:true,
          src:"https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js", 
          integrity:"sha384-hIoBPJpTUs74ddyc4bFZSM1TVlQDA60VBbJS0oA934VSz82sBx1X7kSx2ATBDIyd", 
          crossorigin:"anonymous"
        },
        {
          defer:true, 
          src:"https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js", 
          integrity:"sha384-43gviWU0YVjaDtb/GhzOouOXtZMP/7XUzwPTstBeZFe/+rCMvRwr4yROQP43s0Xk", 
          crossorigin:"anonymous",
          onload:"renderMathInElement(document.body);"
        },
       ]
    }
  }

})

如果你需要更改renderMathInElement函数的选项,你可以在另一个

你可能感兴趣的:(vue.js,前端,javascript)