使用KaTeX展示LaTeX数学公式

引入KaTeX库

由于KaTeX库较为轻量，我们同样采用npm包的方式引入：

KaTeX配置文件

// KaTeX.js

let isKatexConfig = false; // 用于标识是否配置

const initKatexConfig = () => {
  if (!window.katex) {
    return;
  }
  isKatexConfig = true; // 配置完成，改为true
};

const renderMath = function (elementId) {
  if (!window.katex) {
    return;
  }
  const elements = document.getElementsByClassName(elementId);
  for (let i = 0; i < elements.length; i++) {
    const element = elements[i];
    const math = element.textContent;
    window.katex.render(math, element, {
      throwOnError: false
    });
  }
};

export default {
  isKatexConfig,
  initKatexConfig,
  renderMath
};

在VUE中局部使用

import KaTeX from '../util/KaTeX';

this.$nextTick(function () { // Vue的DOM渲染是异步的
  if (!KaTeX.isKatexConfig) { // 是否配置KaTeX
    console.log('是否配置KaTeX');
    KaTeX.initKatexConfig();
  }
  KaTeX.renderMath('latexId'); // 渲染对应的id/class
});

解决Chrome插件UTF-8报错问题

在使用KaTeX插件时，可能会遇到Chrome报错 "Could not load file 'content.js' for content script. It isn't UTF-8 encoded."。可以通过配置vue.config.js文件解决此问题。

配置vue.config.js

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  chainWebpack: config => {
    config.optimization.minimizer([
      new TerserPlugin({
        terserOptions: {
          output: { ascii_only: true },
          compress: {
            drop_console: true, // 干掉所有的console.*
            drop_debugger: true, // 干掉那些debugger;
            pure_funcs: ['console.log'] // 干掉特定的函数比如console.info
          }
        }
      })
    ]);
  }
};

参考链接

• Chrome Extension has a content.js error about UTF-8