公式

Latex 从 @ant-design-x-vue/x-markdown/plugins/Latex 引入，返回 marked extensions，传给 config.extensions。行内 $...$ / \(...\)，块级 $$ / \[...\]。

何时使用

需要在 Markdown 中渲染数学公式时。

代码演示

Pythagoras: $$a^2+b^2=c^2$$.

$$S=\pi r^2$$

代码演示

基础公式。

<script setup lang="tsx">
defineOptions({ name: 'AXXMarkdownLatexV2' });

import { XMarkdown } from '@ant-design-x-vue/x-markdown';
import Latex from '@ant-design-x-vue/x-markdown/plugins/Latex';

const content = [
  'Pythagoras: $a^2 + b^2 = c^2$.',
  '',
  '$$',
  'S = \\pi r^2',
  '$$',
].join('\n');

defineRender(() => (
  <XMarkdown content={content} config={{ extensions: Latex() }} />
));
</script>

隐藏源代码

流式公式。

<script setup lang="tsx">
defineOptions({ name: 'AXXMarkdownLatexStreamingV2' });

import { onUnmounted, ref, watchEffect } from 'vue';
import { Bubble } from 'ant-design-x-vue';
import { XMarkdown } from '@ant-design-x-vue/x-markdown';
import Latex from '@ant-design-x-vue/x-markdown/plugins/Latex';
import { Button, Flex } from 'ant-design-vue';

const fullContent = `
### Latex

inline standard: $\\frac{df}{dt}$

block standard:

$$
\\Delta t' = \\frac{\\Delta t}{\\sqrt{1 - \\frac{v^2}{c^2}}}
$$

inline: \\(\\frac{df}{dt}\\)

block:

\\[
\\Delta t' = \\frac{\\Delta t}{\\sqrt{1 - \\frac{v^2}{c^2}}}
\\]
`;

const index = ref(0);
const isServer = import.meta.env.SSR;

watchEffect((onCleanup) => {
  if (isServer || index.value >= fullContent.length) return;
  const timerId = setTimeout(() => {
    index.value = Math.min(fullContent.length, index.value + 5);
  }, 20);
  onCleanup(() => clearTimeout(timerId));
});

onUnmounted(() => {
  index.value = fullContent.length;
});

defineRender(() => (
  <Flex vertical gap="small">
    <Button style={{ alignSelf: 'flex-end' }} onClick={() => (index.value = 0)}>
      Re-Render
    </Button>
    <Bubble
      content={fullContent.slice(0, index.value)}
      contentRender={(content) => (
        <XMarkdown
          content={content as string}
          config={{ extensions: Latex() }}
          paragraphTag="div"
        />
      )}
      variant="outlined"
    />
  </Flex>
));
</script>

隐藏源代码

API

Latex(options?) 返回 TokenizerAndRendererExtension[]。

属性	说明	类型	默认值
replaceAlignStart	是否把公式里的 align* 换成 aligned。KaTeX 不支持 align*	boolean	true
katexOptions	原样交给 KaTeX 的配置	KatexOptions	{ output: 'html', throwOnError: false }

import { XMarkdown } from '@ant-design-x-vue/x-markdown';
import Latex from '@ant-design-x-vue/x-markdown/plugins/Latex';

// <XMarkdown :config="{ extensions: Latex({ replaceAlignStart: true }) }" content="$E=mc^2$" />

更多说明见 插件集 · Latex。