CJK support

CjkPlugin improves Markdown parsing for Chinese, Japanese, and Korean text. It recognizes emphasis, strong emphasis, and strikethrough next to CJK punctuation, and keeps that punctuation out of bare URLs. The Full components for React, Vue, Svelte, Angular, React Native, Lynx, Solid, and Taro include it by default; Lite components can add it as needed.

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="这是**加粗。**文字。" />;
}

The text 加粗。 is bold, without requiring spaces around the delimiters.

Supported content

Markdown delimiters can appear next to CJK punctuation:

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

Bare URLs end before 。．，、？！：；（）【】「」『』〈〉《》. For example, https://example.com。 links to https://example.com, leaving the final 。 as ordinary text.

Explicit Markdown links and code preserve their content. The URL in [link](https://example.com/路径。) stays unchanged, as does punctuation inside inline code and fenced code blocks.

Import the plugin

All Full components include CjkPlugin without manual registration. For Core or a Lite component, install the matching plugin package:

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

For Core, add CjkRemarkPlugin to the remarks input in the quick start. Components extend their presets through 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} />;
}

Disable CJK support

Include CjkPlugin and config in the same plugin pack to disable this behavior. Core uses a remark plugin entry with disabled set:

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 support

#Supported content

#Import the plugin

#Disable CJK support

CJK support

Supported content

Import the plugin

Disable CJK support