CJK 支持

CjkPlugin 改善中文、日文和韩文的 Markdown 解析，支持 CJK 标点附近的斜体、加粗与删除线，并避免把这些标点包含在自动识别的裸链接中。React、Vue、Svelte、Angular、React Native、Lynx、Solid 和 Taro 的 Full 组件默认包含此插件，Lite 组件可按需添加。

import { Fluxdown } from 'fluxdown';

export function Message() {
  return <Fluxdown text="这是**加粗。**文字。" />;
}

<script setup lang="ts">
import { Fluxdown } from '@fluxdown/vue';
</script>

<template>
  <Fluxdown text="这是**加粗。**文字。" />
</template>

<script lang="ts">
  import { Fluxdown } from '@fluxdown/svelte';
</script>

<Fluxdown text="这是**加粗。**文字。" />

import { Component } from '@angular/core';
import { Fluxdown } from '@fluxdown/angular';

@Component({
  selector: 'app-message',
  imports: [Fluxdown],
  template: `<fluxdown text="这是**加粗。**文字。" />`,
})
export class Message {}

import { Fluxdown } from '@fluxdown/react-native';

export function Message() {
  return <Fluxdown text="这是**加粗。**文字。" />;
}

import { Fluxdown } from '@fluxdown/lynx';

export function Message() {
  return <Fluxdown text="这是**加粗。**文字。" />;
}

import { Fluxdown } from '@fluxdown/solid';

export function Message() {
  return <Fluxdown text="这是**加粗。**文字。" />;
}

import { Fluxdown } from '@fluxdown/taro';

export function Message() {
  return <Fluxdown text="这是**加粗。**文字。" />;
}

其中「加粗。」会显示为粗体，无需在定界符两侧添加空格。

支持的内容

Markdown 定界符可以紧邻 CJK 标点：

这是**加粗。**文字。
これは*強調。*です。
이것은~~삭제。~~입니다.

自动识别的裸链接在 。．，、？！：；（）【】「」『』〈〉《》 前结束。例如，https://example.com。 的链接地址是 https://example.com，末尾的 。 保留为普通文本。

显式 Markdown 链接和代码保留原有内容。[link](https://example.com/路径。) 的目标地址保持不变，行内代码和围栏代码块中的标点也不受影响。

引入插件

各框架的 Full 组件已内置 CjkPlugin，无需手动注册。使用 Core 或 Lite 组件时，先安装对应的插件包：

pnpm add @fluxdown/core-plugins

pnpm add @fluxdown/react-base-plugins

pnpm add @fluxdown/vue-plugins

pnpm add @fluxdown/svelte-plugins

pnpm add @fluxdown/angular-plugins

pnpm add @fluxdown/react-base-plugins

pnpm add @fluxdown/lynx-plugins

pnpm add @fluxdown/solid-plugins

pnpm add @fluxdown/react-base-plugins

Core 将 CjkRemarkPlugin 加入快速开始的 remarks 输入；组件则通过 plugins 扩展预设：

import { CjkRemarkPlugin } from '@fluxdown/core-plugins/plugins/remark/cjk';

const remarks = [CjkRemarkPlugin];

import { CjkPlugin } from '@fluxdown/react-base-plugins/plugins/cjk';
import { FluxdownLite } from 'fluxdown/lite';

type MessageProps = {
  text: string;
};

export function Message({ text }: MessageProps) {
  return <FluxdownLite plugins={CjkPlugin} text={text} />;
}

<script setup lang="ts">
import { CjkPlugin } from '@fluxdown/vue-plugins/plugins/cjk';
import { FluxdownLite } from '@fluxdown/vue/lite';

defineProps<{ text: string }>();
</script>

<template>
  <FluxdownLite :plugins="CjkPlugin" :text="text" />
</template>

<script lang="ts">
  import { CjkPlugin } from '@fluxdown/svelte-plugins/plugins/cjk';
  import { FluxdownLite } from '@fluxdown/svelte/lite';

  type MessageProps = {
    text: string;
  };

  let { text }: MessageProps = $props();
</script>

<FluxdownLite plugins={CjkPlugin} {text} />

import { Component, input } from '@angular/core';
import { FluxdownLite } from '@fluxdown/angular/lite';
import { CjkPlugin } from '@fluxdown/angular-plugins/plugins/cjk';

@Component({
  selector: 'app-message',
  imports: [FluxdownLite],
  template: `<fluxdown-lite [plugins]="plugins" [text]="text()" />`,
})
export class Message {
  readonly text = input.required<string>();

  readonly plugins = CjkPlugin;
}

import { CjkPlugin } from '@fluxdown/react-base-plugins/plugins/cjk';
import { FluxdownLite } from '@fluxdown/react-native/lite';

type MessageProps = {
  text: string;
};

export function Message({ text }: MessageProps) {
  return <FluxdownLite plugins={CjkPlugin} text={text} />;
}

import { CjkPlugin } from '@fluxdown/lynx-plugins/plugins/cjk';
import { FluxdownLite } from '@fluxdown/lynx/lite';

type MessageProps = {
  text: string;
};

export function Message({ text }: MessageProps) {
  return <FluxdownLite plugins={CjkPlugin} text={text} />;
}

import { CjkPlugin } from '@fluxdown/solid-plugins/plugins/cjk';
import { FluxdownLite } from '@fluxdown/solid/lite';

type MessageProps = {
  text: string;
};

export function Message(props: MessageProps) {
  return <FluxdownLite plugins={CjkPlugin} text={props.text} />;
}

import { CjkPlugin } from '@fluxdown/react-base-plugins/plugins/cjk';
import { FluxdownLite } from '@fluxdown/taro/lite';

type MessageProps = {
  text: string;
};

export function Message({ text }: MessageProps) {
  return <FluxdownLite plugins={CjkPlugin} text={text} />;
}

关闭 CJK 支持

将 CjkPlugin 与 config 放在同一个插件包中，可以按需禁用此功能。Core 使用带 disabled 配置的 remark 插件条目：

import type { IPluggable, IRemarkPlugin } from '@fluxdown/types';

import { CjkRemarkPlugin } from '@fluxdown/core-plugins/plugins/remark/cjk';

const remarks: IPluggable<IRemarkPlugin, unknown>[] = [
  [CjkRemarkPlugin, { disabled: true }],
];

import { CjkPlugin } from '@fluxdown/react-base-plugins/plugins/cjk';
import { Fluxdown } from 'fluxdown';

type MessageProps = {
  text: string;
};

export function Message({ text }: MessageProps) {
  return (
    <Fluxdown
      plugins={{ ...CjkPlugin, config: { 'remark-cjk': { disabled: true } } }}
      text={text}
    />
  );
}

<script setup lang="ts">
import { CjkPlugin } from '@fluxdown/vue-plugins/plugins/cjk';
import { Fluxdown } from '@fluxdown/vue';

const plugins = { ...CjkPlugin, config: { 'remark-cjk': { disabled: true } } };

defineProps<{ text: string }>();
</script>

<template>
  <Fluxdown :plugins="plugins" :text="text" />
</template>

<script lang="ts">
  import { CjkPlugin } from '@fluxdown/svelte-plugins/plugins/cjk';
  import { Fluxdown } from '@fluxdown/svelte';

  const plugins = { ...CjkPlugin, config: { 'remark-cjk': { disabled: true } } };

  type MessageProps = {
    text: string;
  };

  let { text }: MessageProps = $props();
</script>

<Fluxdown {plugins} {text} />

import type { IPluginItem } from '@fluxdown/angular-plugins/typings';

import { Component, input } from '@angular/core';
import { Fluxdown } from '@fluxdown/angular';
import { CjkPlugin } from '@fluxdown/angular-plugins/plugins/cjk';

@Component({
  selector: 'app-message',
  imports: [Fluxdown],
  template: `<fluxdown [plugins]="plugins" [text]="text()" />`,
})
export class Message {
  readonly text = input.required<string>();

  readonly plugins: IPluginItem = {
    ...CjkPlugin,
    config: { 'remark-cjk': { disabled: true } },
  };
}

import { CjkPlugin } from '@fluxdown/react-base-plugins/plugins/cjk';
import { Fluxdown } from '@fluxdown/react-native';

type MessageProps = {
  text: string;
};

export function Message({ text }: MessageProps) {
  return (
    <Fluxdown
      plugins={{ ...CjkPlugin, config: { 'remark-cjk': { disabled: true } } }}
      text={text}
    />
  );
}

import { CjkPlugin } from '@fluxdown/lynx-plugins/plugins/cjk';
import { Fluxdown } from '@fluxdown/lynx';

type MessageProps = {
  text: string;
};

export function Message({ text }: MessageProps) {
  return (
    <Fluxdown
      plugins={{ ...CjkPlugin, config: { 'remark-cjk': { disabled: true } } }}
      text={text}
    />
  );
}

import { CjkPlugin } from '@fluxdown/solid-plugins/plugins/cjk';
import { Fluxdown } from '@fluxdown/solid';

type MessageProps = {
  text: string;
};

export function Message(props: MessageProps) {
  return (
    <Fluxdown
      plugins={{ ...CjkPlugin, config: { 'remark-cjk': { disabled: true } } }}
      text={props.text}
    />
  );
}

import { CjkPlugin } from '@fluxdown/react-base-plugins/plugins/cjk';
import { Fluxdown } from '@fluxdown/taro';

type MessageProps = {
  text: string;
};

export function Message({ text }: MessageProps) {
  return (
    <Fluxdown
      plugins={{ ...CjkPlugin, config: { 'remark-cjk': { disabled: true } } }}
      text={text}
    />
  );
}

#CJK 支持

#支持的内容

#引入插件

#关闭 CJK 支持

CJK 支持

支持的内容

引入插件

关闭 CJK 支持