數學公式庫KaTeX小實例
一、總結
一句話總結：
A、MathJax可以渲染公式，另一個庫js庫KaTeX有可以。
B、KaTeX是Khan Academy出品的一款快速、簡單易用的JavaScript庫，用來在Web上渲染TeX格式的數學公式。
1、在線的js和css顯示正常，本地的js和css顯示樣式異常?
樣式有問題，看css，css文件加載正常，發現css里面用相對路徑引了字體，字體問題無疑了
二、數學公式庫KaTeX小實例
博客對應課程的視頻位置：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>KaTeX測試</title> </head> <body> <div> </div> <link href="https://cdn.bootcss.com/KaTeX/0.10.2/katex.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/KaTeX/0.10.2/katex.min.js"></script> <script src="https://cdn.bootcss.com/KaTeX/0.10.2/contrib/auto-render.min.js"></script> <section id="content"> <div> $$Si=ei∑ej S_i = \frac{e^i}{\sum e^j} Si=∑ejei$$ </div> This is a test for $\KaTeX$, $a^2 + b^2 = c^2$, if you want it in display style, try: $$\text{e} = \lim_{n\to\infty} \left(1+\frac{1}{n}\right)^n,$$ </section> <!--<script>--> <!-- renderMathInElement(--> <!-- document.getElementById("content"),--> <!-- {--> <!-- delimiters: [--> <!-- {left: "$$", right: "$$", display: true},--> <!-- {left: "\\[", right: "\\]", display: true},--> <!-- {left: "$", right: "$", display: false},--> <!-- {left: "\\(", right: "\\)", display: false}--> <!-- ]--> <!-- }--> <!-- );--> <!--</script>--> <script> renderMathInElement( document.body, { delimiters: [ {left: "$$", right: "$$", display: true}, {left: "\\[", right: "\\]", display: true}, {left: "$", right: "$", display: false}, {left: "\\(", right: "\\)", display: false} ] } ); </script> </body> </html>
本地引入js和css，記得加上fonts
