Emoji 短码

EmojiPlugin 将 :smile:、:+1: 等 GitHub 风格的 emoji 短码转换为 Unicode 表情。React、Vue、Svelte、Angular、React Native、Lynx、Solid 和 Taro 的 Full 组件默认包含此插件，Lite 组件可按需添加。

import { Fluxdown } from 'fluxdown';

export function Message() {
  return <Fluxdown text="Hello :smile: Great work :+1:" />;
}

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

<template>
  <Fluxdown text="Hello :smile: Great work :+1:" />
</template>

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

<Fluxdown text="Hello :smile: Great work :+1:" />

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

@Component({
  selector: 'app-message',
  imports: [Fluxdown],
  template: `<fluxdown text="Hello :smile: Great work :+1:" />`,
})
export class Message {}

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

export function Message() {
  return <Fluxdown text="Hello :smile: Great work :+1:" />;
}

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

export function Message() {
  return <Fluxdown text="Hello :smile: Great work :+1:" />;
}

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

export function Message() {
  return <Fluxdown text="Hello :smile: Great work :+1:" />;
}

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

export function Message() {
  return <Fluxdown text="Hello :smile: Great work :+1:" />;
}

输出为「Hello 😄 Great work 👍」。表情使用系统字体，具体外观取决于设备。

支持的内容

短码可用于 Markdown 文本，包括标题、列表、表格和链接文字。未知短码，以及 :smile 这样尚未闭合的输入，会保留原文。流式输出时，已识别的短码在结尾冒号到达后转换为表情。

行内代码和围栏代码块保留源码。例如，`:smile:` 会显示 :smile:，不会转换为表情。

引入插件

各框架的 Full 组件已内置 EmojiPlugin，无需手动注册。使用 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 将 EmojiRemarkPlugin 加入快速开始的 remarks 输入；组件则通过 plugins 扩展预设：

import { EmojiRemarkPlugin } from '@fluxdown/core-plugins/plugins/remark/emoji';

const remarks = [EmojiRemarkPlugin];

import { EmojiPlugin } from '@fluxdown/react-base-plugins/plugins/emoji';
import { FluxdownLite } from 'fluxdown/lite';

type MessageProps = {
  text: string;
};

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

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

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

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

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

  type MessageProps = {
    text: string;
  };

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

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

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

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

  readonly plugins = EmojiPlugin;
}

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

type MessageProps = {
  text: string;
};

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

import { EmojiPlugin } from '@fluxdown/lynx-plugins/plugins/emoji';
import { FluxdownLite } from '@fluxdown/lynx/lite';

type MessageProps = {
  text: string;
};

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

import { EmojiPlugin } from '@fluxdown/solid-plugins/plugins/emoji';
import { FluxdownLite } from '@fluxdown/solid/lite';

type MessageProps = {
  text: string;
};

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

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

type MessageProps = {
  text: string;
};

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

关闭转换

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

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

import { EmojiRemarkPlugin } from '@fluxdown/core-plugins/plugins/remark/emoji';

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

import { EmojiPlugin } from '@fluxdown/react-base-plugins/plugins/emoji';
import { Fluxdown } from 'fluxdown';

type MessageProps = {
  text: string;
};

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

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

const plugins = {
  ...EmojiPlugin,
  config: { 'remark-emoji': { disabled: true } },
};

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

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

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

  const plugins = {
    ...EmojiPlugin,
    config: { 'remark-emoji': { 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 { EmojiPlugin } from '@fluxdown/angular-plugins/plugins/emoji';

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

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

import { EmojiPlugin } from '@fluxdown/react-base-plugins/plugins/emoji';
import { Fluxdown } from '@fluxdown/react-native';

type MessageProps = {
  text: string;
};

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

import { EmojiPlugin } from '@fluxdown/lynx-plugins/plugins/emoji';
import { Fluxdown } from '@fluxdown/lynx';

type MessageProps = {
  text: string;
};

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

import { EmojiPlugin } from '@fluxdown/solid-plugins/plugins/emoji';
import { Fluxdown } from '@fluxdown/solid';

type MessageProps = {
  text: string;
};

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

import { EmojiPlugin } from '@fluxdown/react-base-plugins/plugins/emoji';
import { Fluxdown } from '@fluxdown/taro';

type MessageProps = {
  text: string;
};

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

#Emoji 短码

#支持的内容

#引入插件

#关闭转换

Emoji 短码

支持的内容

引入插件

关闭转换