hugo使用katex

• hugo主题：Next

  先上参考：
  MathJax Support
  在Hugo中使用MathJax

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/katex.min.css" integrity="sha384-9tPv11A+glH/on/wEu99NVwDPwkMQESOocs/ZGXPoIiLE8MU/qkqUcZ3zzL+6DuH" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/katex.min.js" integrity="sha384-U8Vrjwb8fuHMt6ewaCy8uqeUXv4oitYACKdB0VziCerzt011iQ/0TqlSlv8MReCm" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/contrib/auto-render.min.js" integrity="sha384-aGfk5kvhIq5x1x5YdvCp4upKZYnA8ckafviDpmWEKp4afOZEqOli7gqSnh8I6enH" crossorigin="anonymous"></script>
  <script>
  renderMathInElement(document.body,
   {
     delimiters: [
       {left: "$$", right: "$$", display: true},
       {left: "$", right: "$", display: false},
     ],
     ignoredTags: ['script', 'noscript', 'style', 'textarea', 'pre'],
   }
  );
  var all=document.getElementsByClassName('katex'),i;
  for(i = 0; i < all.length; i += 1) {
     var tmp=all[i].parentNode;
     for(;tmp.nodeName=='SPAN';tmp=tmp.parentNode);
     if(tmp.nodeName == 'CODE')
     tmp.className += ' hasKatex';
  }
  </script>
  <style>
  code.hasKatex {
   font: inherit;
   font-size: 110%;
   background: inherit;
   border: inherit;
   color: #515151;
  }
  </style>
  

  如同参考教程¹²所说的一样，公式中使用_等符号会和Markdown冲突造成渲染失败，上述解决方法是在公式外加一对``解决，同时调整公式父层code标签的样式（因为原先的code的样式背景是灰的）。

我的原文地址

---

1. https://www.gohugo.org/doc/tutorials/mathjax/ “MathJax Support” ↩︎

2. https://note.qidong.name/2018/03/hugo-mathjax/ ↩︎