latex-viewer v0.1.24

Latex 图形化显示

使用

1. yarn add latex-viewer或者npm i latex-viewer

2. // main.js
  import Letax from "latex-viewer"
  Vue.use(Letax, {
    isSpaceShow: true,  // 是否显示空格，全局设置, 默认false
    isLongLine: true,  // 是否长空，全局设置， 默认false
  })

3. // App.vue
  <div>
    <textarea v-model="content" rows="10" cols="100"></textarea>
    <div class="error-message" v-if="errorMsg">{{ errorMsg }}</div>
    <latex-com :content='content' :isAutoRender="true" :isShowSpace="true" :lineNumStart="1" ref="latexEle"></latex-com>
    <!-- content 必传 需要图形化的latex字符串 -->
    <!-- isAutoRender 非必传 是否监听输入框的值，自动渲染， 默认为true -->
    <!-- isShowSpace 非必传 是否显示空格的局部设置， 默认为false -->
    <!-- isShowSpace 非必传 是否显示空格的局部设置， 默认为false -->
    <!-- lineNumStart 非必传 空的占位符排序起始值，默认为1 -->

  </div>
  // js
  import { LatexCom, config, validatorTokenCheck } from "latex-viewer"
  export default {
    components: {
      LatexCom
    },
    data () {
      return {
        content: "",
        errorMsg: ""
      }
    },
    watch: {
      content (val) {
        validatorTokenCheck(val, "语文", (error) => {
          if (!error) {
            this.errorMsg = ""
          } else {
            this.errorMsg = error.message
          }
        })
      }
    },
    mounted () {
      const ele = document.querySelector('.input')
      ele.onblur = val => {
        // 手动触发渲染方法
        this.$refs.latexEle.formatContent()
      }
    }
  }