跨框架使用

核心是纯 TypeScript，适配所有框架。

Vue 3

<script setup>
import { Formula, FormulaEditor } from '@sciexpr/vue'
</script>

React (计划中)

import { FormulaEditor } from '@sciexpr/react'
<FormulaEditor value={formula} onChange={onChange} />

Web Component (计划中)

<formula-editor value="\frac{1}{2}"></formula-editor>

纯 JS

import { ParserRegistry } from '@sciexpr/parser'
import { KatexRenderer } from '@sciexpr/renderer'

const ast = new ParserRegistry().parse(formula)
const html = new KatexRenderer().render(ast).value
document.getElementById('math').innerHTML = html

Node.js

// ESM
import { ParserRegistry } from '@sciexpr/parser'
// CJS
const { ParserRegistry } = require('@sciexpr/parser')

VS Code 扩展 (计划中)

import { KatexRenderer } from '@sciexpr/renderer'

function provideHover(document, position) {
  const formula = getFormulaAtPosition(document, position)
  const html = new KatexRenderer().render(ast).value
  return new Hover(html)
}