LaTeX

Latex is imported from @ant-design-x-vue/x-markdown/plugins/Latex, returns marked extensions, and is passed to config.extensions. Inline $...$ / \(...\), block $$ / \[...\].

When to use

Needed when rendering mathematical formulas in Markdown.

Examples

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

$$S=\pi r^2$$

Examples

Basic formulas.

<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>

Hide source

Streaming formulas.

<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>

Hide source

API

Latex(options?) returns TokenizerAndRendererExtension[].

Prop	Description	Type	Default
replaceAlignStart	Whether to replace align* in formulas with aligned. KaTeX does not support align*	boolean	true
katexOptions	Configuration passed directly to 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$" />

For more instructions, see Plug-in Collection · Latex.