🧪 在线实例演示

欢迎体验 Scientific Expression Engine 的完整功能。以下包含代码示例和交互式公式编辑器。

---

📐 基础数学公式

分数

LaTeX 输入

\frac{1}{2} + \frac{3}{4} = \frac{5}{4}

JavaScript API

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

const registry = new ParserRegistry()
const ast = registry.parse('\\frac{1}{2} + \\frac{3}{4} = \\frac{5}{4}')
const renderer = new LatexReverseRenderer()
const latex = renderer.render(ast)
console.log(latex.value) // \frac{1}{2}+\frac{3}{4}=\frac{5}{4}

渲染结果

<span class="katex">
  <span class="katex-html">
    <span class="mfrac">...</span>
    <span class="mbin">+</span>
    <span class="mfrac">...</span>
    <span class="mrel">=</span>
    <span class="mfrac">...</span>
  </span>
</span>

根式与指数

LaTeX 输入

\sqrt[3]{x^{2} + y^{2}}

解析 & 渲染

import { ParserRegistry } from '@sciexpr/parser'
import { MathMLRenderer, UnicodeRenderer } from '@sciexpr/renderer'

const registry = new ParserRegistry()
const ast = registry.parse('\\sqrt[3]{x^{2} + y^{2}}')

// 渲染为 MathML
const mathml = new MathMLRenderer()
console.log(mathml.render(ast).value)
// <math><mroot><mrow><msup><mi>x</mi><mn>2</mn></msup>...

// 渲染为 Unicode
const unicode = new UnicodeRenderer()
console.log(unicode.render(ast).value)
// ∛(x²+y²)

求和与积分

LaTeX 输入

\sum_{n=1}^{\infty} \frac{1}{n^{2}} = \frac{\pi^{2}}{6}

LaTeX 输入 — 定积分

\int_{0}^{\infty} e^{-x^{2}} \, dx = \frac{\sqrt{\pi}}{2}

---

⚗️ 化学表达式

分子式

mhchem 语法

\ce{H2SO4}
\ce{C6H12O6}
\ce{Fe2(SO4)3}

解析化学式

import { ChemicalParser } from '@sciexpr/parser'

const parser = new ChemicalParser()
const ast = parser.parse('H2SO4')

// AST 结构：
// root (molecule)
//   ├── chem-element: H (count: 2)
//   ├── chem-element: S (count: 1)
//   └── chem-element: O (count: 4)

化学反应方程式

LaTeX 输入

\ce{2H2 + O2 ->[\text{点燃}] 2H2O}

验证方程式

import { ReactionBalancer } from '@sciexpr/chemistry'
import { ChemicalParser } from '@sciexpr/parser'

const parser = new ChemicalParser()
const ast = parser.parse('2H2 + O2 -> 2H2O')

const balancer = new ReactionBalancer()
const result = balancer.checkConservation(
  ['2H2', 'O2'],
  ['2H2O']
)
console.log(result.balanced) // true ✅

离子与元素

离子表达式

\ce{Fe^{3+} + 3OH- -> Fe(OH)3 v}
\ce{Cu^{2+} + 2e- -> Cu}
\ce{[Ag(NH3)2]+}

元素与同位素

\ce{^{235}_{92}U}
\ce{^{12}_{6}C}

搜索离子和元素

import {
  ION_TEMPLATES, ELEMENT_TEMPLATES,
  searchIons, getCations, getAnions,
  searchElements, getElementsByPeriod,
} from '@sciexpr/presets'

// 获取所有阳离子
const cations = getCations()
// → [Li⁺, Na⁺, K⁺, NH₄⁺, Ca²⁺, Mg²⁺, Fe²⁺, Fe³⁺, ...]

// 获取所有阴离子
const anions = getAnions()
// → [F⁻, Cl⁻, Br⁻, I⁻, OH⁻, NO₃⁻, SO₄²⁻, CO₃²⁻, ...]

// 按周期查询元素
const period3 = getElementsByPeriod(3)
// → [Na, Mg, Al, Si, P, S, Cl, Ar]

// 模糊搜索元素
const results = searchElements('铁')
// → [{ id: 'elem-Fe', name: '铁', ... }]

---

🤖 AI 智能集成

自然语言 → 公式

注入你的 AI Provider

import { AIPipeline } from '@sciexpr/ai'

// 使用方只需实现 SPI 接口，注入自己的 AI 模型
const pipeline = new AIPipeline({
  completionProvider: new MyOpenAIProvider(),  // 你的 AI
  knowledgeBaseProvider: new MyVectorKB(),      // 你的知识库
})

// 自然语言查询
const results = await pipeline.naturalLanguageToFormula('勾股定理')
// → [{ text: 'a^{2} + b^{2} = c^{2}', label: '勾股定理', ... }]

// AI 智能补全
const completions = await pipeline.getCompletions({
  currentInput: '\\frac{\\pi',
  cursorPosition: 8,
  expressionType: 'math',
})
// → [{ text: '\\pi', label: 'π (圆周率)' }, ...]

AI 输出规范化

统一多种 LLM 输出

import { AIPipeline } from '@sciexpr/ai'

const pipeline = new AIPipeline({
  normalizerProvider: new MyAINormalizer(),
})

// ChatGPT 输出：$$H_2O$$
// Claude 输出：\(H_2O\)
// Gemini 输出：H₂O
// → 统一规范化

const r1 = await pipeline.normalize('$$H_2O$$', 'latex')
// → $H_{2}O$

const r2 = await pipeline.normalize('\\(H_2O\\)', 'latex')
// → $H_{2}O$

const r3 = await pipeline.normalize('H₂O', 'latex')
// → $H_{2}O$

---

🧩 跨框架组件

Vue 3

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

const formula = ref('\\frac{-b \\pm \\sqrt{b^{2}-4ac}}{2a}')
</script>

<template>
  <FormulaEditor v-model="formula" />
</template>

React

import { FormulaEditor } from '@sciexpr/react'

function App() {
  const [formula, setFormula] = useState('\\frac{1}{2}')
  return <FormulaEditor value={formula} onChange={setFormula} />
}

Web Component (纯 HTML)

<formula-editor value="\frac{1}{2}"></formula-editor>
<script type="module">
  import '@sciexpr/web-component'
</script>

---

📝 Markdown 集成

@sciexpr/markdown 是一个 markdown-it 插件，让你在 Markdown 文档中无缝嵌入数学公式和化学表达式。下面是一个交互式 Markdown 编辑器——左侧编写 Markdown + 公式，右侧实时预览渲染效果。

📝 Markdown 源码

📐 数学🧪 化学→ 化学反应🔧 辅助

# 科学公式在 Markdown 中的使用 ## 数学公式 质能方程是爱因斯坦最著名的发现之一，其行内形式为 $E = mc^{2}$， 也可以用块级公式展示： $$\frac{-b \pm \sqrt{b^{2}-4ac}}{2a}$$ ### 更多数学示例 勾股定理：$a^{2} + b^{2} = c^{2}$ 欧拉公式： $$e^{i\pi} + 1 = 0$$ 黎曼 Zeta 函数： $$\zeta(s) = \sum_{n=1}^{\infty} \frac{1}{n^{s}}$$ ## 化学表达式 水的化学式 $\ce{H2O}$ 是大家最熟悉的。 硫酸 $\ce{H2SO4}$ 是一种强酸。 化学反应方程式： $$\ce{2H2 + O2 ->[\text{点燃}] 2H2O}$$ 可逆反应： $$\ce{N2 + 3H2 <=>[\text{Fe}][\text{高温高压}] 2NH3}$$ ## 矩阵与线性代数 $$\begin{pmatrix} a & b \\ c & d \end{pmatrix} \begin{pmatrix} x \\ y \end{pmatrix} = \begin{pmatrix} ax+by \\ cx+dy \end{pmatrix}$$

💡 支持 $...$ 行内公式   $$...$$ 块级公式   \ce{...} 化学式   标准 Markdown 语法⚙ @sciexpr/markdown + markdown-it

👁️ 渲染预览markdown-it + KaTeX

⏳ 加载 Markdown 渲染引擎...

快速上手

pnpm add @sciexpr/markdown markdown-it

import MarkdownIt from 'markdown-it'
import { formulaPlugin } from '@sciexpr/markdown'

const md = new MarkdownIt().use(formulaPlugin)

// 行内公式：$...$
md.render('质能方程 $E = mc^{2}$ 是爱因斯坦提出的')

// 块级公式：$$...$$
md.render('$$\\frac{-b \\pm \\sqrt{b^{2}-4ac}}{2a}$$')

与 VitePress 集成

// .vitepress/config.ts
import { defineConfig } from 'vitepress'
import { formulaPlugin } from '@sciexpr/markdown'

export default defineConfig({
  markdown: {
    config(md) {
      md.use(formulaPlugin, {
        enableChemistry: true,     // 化学式自动识别
        enableNumbering: true,     // 公式自动编号
      })
    },
  },
})

配置选项

选项	类型	默认值	说明
enableChemistry	boolean	false	启用 \ce{...} 化学式自动识别
enableNumbering	boolean	false	块级公式自动编号
inlineDelimiter	string	'$'	行内公式分隔符
blockDelimiter	string	'$$'	块级公式分隔符
extractMeta	boolean	false	提取公式元数据到 token.meta

💡 提示

上方的交互式 Demo 使用 markdown-it + KaTeX 在浏览器端实时渲染，与 @sciexpr/markdown 插件行为完全一致。试试在左侧编辑器中编写你的公式吧！

---

🧩 Vue 组件集成

@sciexpr/vue 提供了一套 Vue 3 组件，让你在 Vue 项目中快速集成公式编辑与渲染能力。下方的编辑器底层使用 @sciexpr/parser 实时解析 AST。

🧩 @sciexpr/vue — 独立子组件展示

1. FormulaToolbar — 工具栏

提供常用 LaTeX 命令的快捷插入按钮，支持 6 大分类。

📐 Fraction & Script

√ Radicals

∑ Operators

α Greek

▦ Matrix

⚗ Chemistry

2. SymbolPanel — 符号面板

分类浏览希腊字母、数学运算符等常见符号。

3. ElementTable — 元素周期表

交互式化学元素周期表，点击即可插入元素符号。

s-block p-block d-block f-block

4. LivePreview + Formula — 实时预览 & 渲染

输入 LaTeX 源码，实时查看 KaTeX 渲染结果。

LivePreview:

\frac{{x^{2}+y^{2}}}{{\sqrt{{z}}}}

Formula:\frac{{x^{2}+y^{2}}}{{\sqrt{{z}}}}

快速示例:

核心组件

组件	说明
<Formula>	纯渲染组件，source prop 传入 LaTeX 渲染为 KaTeX HTML
<FormulaEditor>	完整编辑器，工具栏 + 实时预览 + AI 自动补全
<LivePreview>	实时预览组件
<FormulaToolbar>	独立工具栏，可插入分式、根式、上下标等
<SymbolPanel>	数学符号面板，数据来自 @sciexpr/math
<ElementTable>	交互式元素周期表，来自 @sciexpr/chemistry

快速集成

pnpm add @sciexpr/vue

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

const formula = ref('\\frac{1}{2}')
</script>

<template>
  <!-- 纯渲染：行内 -->
  <p>质能方程 <Formula source="E = mc^2" /> 由爱因斯坦提出。</p>

  <!-- 纯渲染：块级 -->
  <Formula source="\int_0^\infty e^{-x^2} dx" display-mode />

  <!-- 完整编辑器（v-model 双向绑定）-->
  <FormulaEditor v-model="formula" />

  <!-- 仅实时预览 -->
  <LivePreview :source="formula" display-mode />
</template>

💡 提示

上方的交互 Demo 模拟了 FormulaEditor 的核心体验：左侧编写 Markdown + LaTeX 公式，右侧实时渲染预览。工具栏数据来源于 @sciexpr/math 和 @sciexpr/presets。

---

🎮 交互式公式编辑器

下面是一个完整的在线公式编辑器，你可以直接输入 LaTeX 或点击工具栏按钮来构建公式，右侧实时预览渲染效果。

📐 Fraction & Script

√ Radicals

∑ Operators

α Greek

▦ Matrix

⚗ Chemistry

📝 LaTeX 源码55 字符

\sum_{n=1}^{\infty} \frac{1}{n^{2}} = \frac{\pi^{2}}{6}

👁️ 实时预览块级

\sum _{{n=1}}^{{\infty }}\frac{{1}}{{n^{{2}}}}=\frac{{\pi ^{{2}}}}{{6}}

---

📦 快速集成

只需要 3 步：

# 1. 安装
pnpm add @sciexpr/core @sciexpr/parser @sciexpr/renderer

# 2. 解析 & 渲染

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

// 3. 一行搞定！
const registry = new ParserRegistry()
const ast = registry.parse('E = mc^{2}')
const html = new KatexRenderer().render(ast)
console.log(html.value) // <span class="katex">E = mc²</span>

---

💡 提示

点击上方工具栏按钮可以快速插入 LaTeX 命令，也可以直接在左侧编辑框输入 LaTeX 源码。支持 Ctrl+/ 快速插入分式，Ctrl+S 快速插入根式。