pixi-vn-ink-markup

用途

该技能面向 ink 对话文本的标记（markup）编写，适用于以下情况：对话文本需要强调、链接或自定义样式；或者某行 ink 文本本应渲染出字面意义的 Markdown 字符（如 #、*、- 等），却被 ink 编译器吞掉或错误解析。

官方文档：pixi-vn.com/ink/markup。使用前提是项目中已接入标记渲染器——Pixi'VN 本身不渲染任何标记，本技能只涵盖如何编写 ink 文本，使其能被这类渲染器正确设置样式。

主要能力

在 ink 对话中使用 Markdown 的行内样式，例如 *italic*、**bold**。
对 ink 与 Markdown 共用的符号（#、*、/、~、-、|）进行转义：这些符号在文本到达 Markdown 渲染器之前会先被 ink 自身解析器处理（标签、选项、注释、shuffle、gather/list、备选分支等），需用 \ 转义 Markdown 意图使用的符号，避免被 ink 误解析。
控制换行：ink 按源码行断行；若要在同一逻辑行内强制换行，使用 \n，若 Markdown 渲染器需要空行才能开始新段落，则使用 \n\n。
使用原生 HTML 与 Tailwind CSS 工具类（需启用 rehype-raw 或等价能力）。使用 transform/animation 工具类的元素必须为 inline-block，普通 inline 元素会忽略基于 transform 的工具类。仅在 Markdown 无法表达时（如特定颜色、动画、持续下划线）才使用原生 HTML/CSS。

使用方式

官方推荐 Markdown。Pixi'VN 对 narration.dialogue 没有内置标记渲染器，Markdown 是推荐方案，所有官方模板都以该方式渲染对话。React 模板使用 react-markdown，配合 remark-gfm（支持 GFM 表格/删除线）与 rehype-raw（允许在 Markdown 源中嵌入原生 HTML）：

import Markdown from "react-markdown";
import rehypeRaw from "rehype-raw";
import remarkGfm from "remark-gfm";

<Markdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]}>
  {narration.dialogue?.text}
</Markdown>;

默认在 ink 文本中使用 Markdown 的普通行内样式：

Hello, this is some *italic* text and this is some **bold** text.

转义示例（转义后的源码在 Markdown 处理后会渲染为普通的 # Markdown Test、## Bold Text、This is bold text. 等；反斜杠会在 Markdown 看到该行之前被 ink 剥离）：

\# Markdown Test
\#\# Bold Text
\**This is bold text.**
\#\# Delete Text
\~~This is deleted text.~~
\#\# List Test
\- Item 1
\* Item 2

普通对话中单个行内 *italic*/**bold** 通常不会歧义，无需转义；仅在 ink 解析器确实会误解该符号时转义（例如该行否则会看起来像选项项目或标签）。

强制换行示例：

Hello, this is a test. \n\n This is a new line.

原生 HTML 与 Tailwind CSS 示例（启用 rehype-raw 后可直接在对话文本中使用）：

<span class="inline-block text-blue-500">some *blue* text</span>.
<span class="inline-block animate-pulse text-violet-400">still</span>.

适用场景

对话台词需要斜体、加粗、链接等强调效果。
需要在 ink 文本中嵌入 Markdown 无法表达的特定颜色、动画或持续下划线。
需要在对话中显示字面意义的 Markdown 符号，或排查符号被 ink 编译器吞掉/误解析的问题。

限制

Pixi'VN 本身不渲染标记，必须由项目接入标记渲染器后才能生效；本技能不涉及渲染器的接入配置（相关 JS/TS 侧接入见 pixi-vn.com/start/markup、markup-markdown、markup-tailwindcss）。
使用原生 HTML/CSS 依赖 rehype-raw 或等价能力。
其他平台、收费、价格等信息资料未提供。

技能介绍

用途

主要能力

使用方式

适用场景

限制

相关