Kilo JetBrains 插件 Markdown 渲染对齐 VS Code 样式架构分析与实施指南【免费下载链接】kilocodeKilo is the all-in-one agentic engineering platform. Build, ship, and iterate faster with the most popular open source coding agent.项目地址: https://gitcode.com/GitHub_Trending/ki/kilocode本指南以仓库内规划文档 .kilo/plans/jetbrains-mdview-vscode-styling.md 为核心骨架系统讲解 Kilo 开源项目如何让 JetBrains 插件中的助手/用户对话 Markdown 输出在视觉上对齐 VS Code webview 的 Markdown 样式同时保留 JetBrains 侧Swing/JBHtmlPane 编辑器支撑代码块的既有架构。读完本文你将掌握VS Code Markdown 样式在 Kilo 前端各包中的分布与主题令牌映射规则、JetBrains 侧MdViewHybrid/MdCommon的渲染与样式生成原理、以及一套完整的样式令牌扩展 → CSS 规则镜像 → 代码块容器打磨 → 测试验证实施步骤可直接对照仓库源码逐条落地。一、方案背景与目标Kilo 的 JetBrains 插件packages/kilo-jetbrains/在会话转录中渲染 Markdown其目标是让助手/用户转写的视觉体验与 VS Code webview 中渲染出的 Markdown 保持一致。方案的核心约束是不推翻 JetBrains 侧现有的 Swing 渲染架构而是在Swing/JBHtmlPaneHTML 排版EditorTextField代码块的框架内把样式规格逐条对齐到 VS Code。文档给出的 Goal 原文是在保留现有架构的前提下改进 JetBrains Markdown 输出使其与 VS Code webview 的 Markdown 样式在视觉上匹配见 jetbrains-mdview-vscode-styling.md。二、VS Code 侧 Markdown 样式的构成Findings2.1 样式文件分布方案文档指出VS Code 的 Markdown 样式分散在四个地方packages/ui/src/components/markdown.css基础 Markdown 组件样式packages/kilo-ui/src/components/markdown.csskilo-ui 包对基础样式的覆盖与代码块滚动条细节packages/kilo-ui/src/styles/vscode-bridge.cssVS Code 主题桥把语义设计令牌映射到--vscode-*CSS 变量以及 message-part 覆盖规则在 webview 各消息部件中对 Markdown 做的局部覆盖。也就是说VS Code 侧长得什么样并不是一张写死的样式表而是基础排版 覆盖 主题桥三层叠加的结果。JetBrains 侧要做的对齐本质上是对这套分层结果的等价复刻。2.2 VS Code 基础排版规格从 packages/ui/src/components/markdown.css 可以看到 VS Code 侧 Markdown 的具体规格方案文档将其归纳为基础文本14px 无衬线字体--font-size-base、160% 行高、break-word换行、首尾子元素外边距清零 *:first-child { margin-top: 0 }/ *:last-child { margin-bottom: 0 }标题六个级别同尺寸14px、中粗字重--font-weight-medium、靠颜色与下边距区分margin-bottom: 24px段落12px 底部间距p { margin-bottom: 12px }链接使用交互色--text-interactive-base默认无下划线悬停时下划线并偏移 2px列表紧凑外边距、弱化的列表标记色li::marker { color: var(--text-weak) }引用块弱化文字、2px 左边框、正常字重水平线视觉隐藏但保留间隔border: none; height: 0; margin: 40px 0代码块带边框与内边距.shiki的 12px padding、6px 圆角、0.5px 边框行内代码绿色语法色--syntax-string 中粗字重表格浅边框--border-weaker-base、12px 单元格内边距、表头更强调。2.3 VS Code 主题桥的令牌映射packages/kilo-ui/src/styles/vscode-bridge.css 在html[data-themekilo-vscode]作用域下把 Kilo 语义令牌桥接到 VS Code 主题变量。文档指出该桥接的关键映射如下对应源码 vscode-bridge.cssMarkdown 角色映射到的 VS Code 令牌标题、链接、列表项、图片--vscode-textLink-foreground正文、加粗、代码块--vscode-editor-foreground行内代码--vscode-charts-green引用、强调--vscode-descriptionForeground水平线--vscode-panel-border这意味着对齐 VS Code本质上就是让 JetBrains 侧同一类角色取到等价的颜色来源JetBrains 用 IntelliJ 主题 APITextAttributesKey/ColorKey与集中式语义色来承担同一职责。三、JetBrains 侧当前渲染架构与差距3.1 渲染器构成JetBrains 侧 Markdown 由两层组件完成渲染MdViewHybrid混合渲染器负责把 Markdown 源文本投影为分块视图HTML 段落块、表格块、代码块、终端块、图表块并处理流式追加与块级复用MdViewHtmlPane基于JBHtmlPane的 HTML 排版组件承载正文/表格等富文本内容。两者的共享 CSS 由MdCommon.rules()生成默认配色由MdCommon.defaults(style)计算见 MdCommon.kt。对外统一暴露的是MdView接口MdView.kt它提供set/append/clear、applyStyle、resetStyles、链接监听、以及font/foreground/background/linkColor/codeBg/preBg/preFg/codeFont/quoteBorder/quoteFg/tableBorder/opaque等公开可覆盖属性overrideSheet()输出当前生效的 CSS 规则字符串。3.2 当前样式覆盖范围差距清单从 MdCommon.kt 中rules()的实际代码可以看到现状它只对宽泛的标签统一设置字体/颜色并单独覆盖链接、pre/code配色、引用块边框与文字色、表格边框。方案文档明确列出了与 VS Code 的差距缺少 VS Code 等价的间距体系标题、段落、列表、表格的 margin/padding缺少标题、加粗、强调、列表标记、表格单元格的分角色规则行内代码只有前景色、缺少中粗字重引用块缺少2px 左边框几何 8px 左内边距 24px 垂直外边距水平线缺少 VS Code 一致的间隔行为代码块表面缺少打磨背景、边框、圆角、内边距、细滚动条。3.3 被保留的既有优势方案文档特别强调一点JetBrains 的围栏代码块在一个维度上已经强于 VS Code——它使用EditorTextField承载真实 IDE 语法高亮并在流式输出时保留编辑器实例MdViewHybrid的append走fenced-code 快速路径直接view.grow(delta)。因此方案明确不切换到 web/JCEF 渲染而是保留并打磨这一优势。这也是后续所有代码块改动的前提。四、实施方案详解第 1 步扩展 Markdown 样式令牌当前MdStyle数据类MdCommon.kt已有foreground/background/linkColor/codeBg/preBg/preFg/codeFont/quoteBorder/quoteFg/quoteBg/tableBorder/headingFg/strongFg/emphasisFg/inlineCodeFg/listMarkerFg/hrColor/tableHeaderFg/codeBorder/opaque。方案要求在此基础上继续扩展内部字段覆盖标题、加粗、强调、行内代码前景、列表标记、水平线、表格/表头、代码块边框颜色等维度。实施要点公开 API 稳定除非确有必要新增外部 override否则保持MdView公开 override API 不变MdView.kt 中列出的公开属性就是契约默认值计算集中化在MdCommon.defaults(style)中从 IntelliJ/编辑器主题源如CodeInsightColors.HYPERLINK_ATTRIBUTES、HighlighterColors.TEXT、DefaultLanguageHighlighterColors.LINE_COMMENT、EditorColors.PREVIEW_BORDER_COLOR以及 Kilo 集中式语义色取值。现有代码中quoteFg取自行注释前景、linkColor取自超链接属性、inlineCodeFg取自SessionUiStyle.View.Markdown.string()即是这种模式的先例主题可覆盖使用JBColor.namedColor(Kilo.Markdown.*, fallback)定义 Kilo 专属 Markdown 调色板回退值让主题可覆盖、运行时避免散落的硬编码颜色。第 2 步在MdCommon.rules()中镜像 VS Code CSS在MdCommon.rules()当前实现见 MdCommon.kt中逐条补齐 VS Code 规则方案文档给出的完整清单如下根/主体包裹规则最大宽度行为、break-word换行、基础行高、首/尾子元素外边距修剪在JBHtmlPaneCSS 支持的前提下标题规则同基础字号、中粗字重、角色专属颜色、行高与底部间距段落/列表/列表项/嵌套列表/标记规则若 Swing HTML 不支持::marker则回退为li { color: ... }并在支持时重置子文本颜色否则保持列表文本正常并在测试中记录该限制加粗/强调颜色对齐 VS Code 令牌角色锚点样式主题化链接色、不强制背景、JBHtmlPane支持处加下划线引用块几何2px 左边框、24px 垂直外边距、8px 左内边距、弱化文字、正常字重表格布局合并边框、尽量全宽、24px 垂直外边距、12px 单元格内边距、弱行边框、更强调的表头文字水平线视觉隐藏但保持与 VS Code 一致的间距——MdViewHybrid目前会过滤主题分割线thematic breaks因此该规则主要惠及MdViewHtmlPane与未来复用行内代码设置前景色与中粗字重除非当前JBHtmlPane配置已经能画得可接受否则避免行内代码背景。需要说明的是现有MdCommon.inlineCode()MdCommon.kt已经实现了给code注入stylecolor: ...前景色的能力且MdViewTest中test set renders inline code明确断言生成的 HTML不含background内联样式这与行内代码不做背景的取向一致。第 3 步打磨代码块容器保留 IDE 高亮代码块仍是EditorTextField围栏/缩进块主用、JBTextArea兜底。方案要求在 MdViewHybrid.kt 的styleCodePane()基础上对齐 VS Code 的markdown-code包裹观感表面轻微背景 轻微边框 可行时采用平台感的圆角弧度现有CodePane已通过重写paintComponent用抗锯齿fillRoundRect画可选圆角弧度为SessionUiStyle.View.BLOCK_ARC见 MdViewHybrid.kt内边距约 12px 量级现有viewportBorder由SessionUiStyle.View.Code.topPadding()与水平内边距组合滚动条细水平滚动条行为现有SCROLLBAR_HEIGHT 12见 SessionUiStyle.kt几何常量集中优先复用SessionUiStyle.View.Code只有现有值无法表达 VS Code 间距时才少量新增边框分离内部将代码块边框色与表格边框色分离使表格样式调整不影响代码盒继续调用SessionEditorStyle.applyToEditor(ed)对应 MdViewHybrid.kt 的applyEditorChrome保证代码块跟随 IDE 语法高亮与编辑器字体变化。第 4 步文件/路径的可视性对齐JetBrains 侧其实已经有非常强的路径识别能力MdCommon会用正则把散落在正文与行内代码中的文件路径识别出来包成a.kilo-file-ref链接并保留:行号后缀见 MdCommon.kt测试test file refs keep line suffix and trailing punctuation outside link验证了这一行为。MdProjector的代码片段链接器则使用kilo-url-ref类MdCommon.URL_REF_CLASS。在此基础上方案要求对href形似相对文件路径的 Markdown 链接保持现有链接派发逻辑不变让现有调用方能按需打开文件/URL仅当现有使用路径可拿到openFile回调时才考虑给看起来像路径的行内代码装饰file-link类若当前MdView抽象只有openUrl则不要扩宽接口最低限度让行内代码/路径外观更贴近 VS Code——使用行内代码前景色并对生成的 HTML 中含链接/代码类的显式文件链接使用点状下划线对应 VS Code 侧a.file-path-link的dotted下划线样式见 markdown.css。第 5 步保留既有 Swing 行为这是防止回归的硬性要求MdViewHybrid.sync()的前缀复用逻辑MdViewHybrid.kt 中从前往后比对、能复用则update的分块同步除非必要否则不动样式更新时只对保留的JBHtmlPane块调用reloadCssStylesheets()并重新赋值文本现有HtmlView.style正是先reloadCssStylesheets()再pane.text html(...)见 MdViewHybrid.kt而不是重建所有块流式围栏代码快速路径与编辑器释放行为保持原样CodeField通过Disposer注册EditorFactory.getInstance()::releaseEditor避免泄漏。第 6 步聚焦测试与变更集扩展 MdViewTest.kt 与MdViewHybridTest断言overrideSheet()包含新的 VS Code 等价规则标题、加粗/强调、链接、行内代码前景、列表/表格/引用块间距、水平线、以及代码块边框与表格边框的分离为代码块面板样式增加组件测试背景、视口背景、边框色、内边距、滚动条策略、以及applyStyle()后保留的编辑器实例保持既有 stress/leak 测试绿色只有实现改变了样式应用语义时才补充少量压力断言增加 changesetkilocode/kilo-jetbrainspatch 版本用户可见描述如Improve markdown readability in JetBrains chat transcripts.。五、验证方式方案给出了明确的验证路径在 packages/kilo-jetbrains/ 目录下执行先跑定向测试./gradlew frontend:test --tests *MdView*若 Gradle 模块支持该过滤若定向过滤不可靠则运行./gradlew test类型检查bun run typecheck。仓库现有的测试基建与之对应MdViewTest基于BasePlatformTestCase获得真实 IntelliJ Application 以便JBHtmlPane正确初始化并已覆盖set/append渲染、加粗/斜体、行内代码前景色、围栏代码块、链接、文件引用链接化、以及overrideSheet()内容断言MdViewTest.ktMdViewHybridTest与MdViewHybridStressTest则覆盖混合渲染器的行为与压力/泄漏场景。六、约束与边界方案文档最后明确了三条硬约束理解这些边界有助于判断改动的影响范围不引入 JCEF、Compose 或 Kotlin UI DSL——坚持 Swing 渲染避免为样式对齐付出渲染栈切换的代价改动收敛在packages/kilo-jetbrains/与.changeset/内——除非明确需要共享的 Kilo UI 事实来源否则不扩散到其他包JetBrains 与 Kilo UI 路径无需kilocode_change标记该标记用于上游 opencode 同步场景见 script/upstream 相关工具优先使用 IntelliJ 主题 API 与集中式语义令牌而不是散落的字面颜色——这既是本方案的约束也是代码库里MdCommon.defaults()已经在遵守的既有规范。七、总结JetBrains 与 VS Code 的 Markdown 视觉对齐本质是一次规格翻译把 VS Code 侧由 markdown.css、kilo-ui markdown.css 与 vscode-bridge.css 共同定义的字号、行高、间距、颜色角色翻译成 JetBrains 侧MdCommon的 CSS 规则与 IntelliJ 主题令牌取值。方案在不动渲染架构的前提下通过扩展MdStyle令牌 → 镜像MdCommon.rules()→ 打磨EditorTextField代码块容器 → 对齐文件路径可视性 → 保留 Swing 行为 → 补测试与 changeset六步完成落地并在每一处都优先复用SessionUiStyle.View.Code等集中式常量与JBColor.namedColor主题回退确保 JetBrains 的对话转写既获得 VS Code 同款的排版秩序又保住了 IDE 原生语法高亮这一独有优势。对照 jetbrains-mdview-vscode-styling.md 与文中列出的源码文件即可逐条复现该方案的全部细节。【免费下载链接】kilocodeKilo is the all-in-one agentic engineering platform. Build, ship, and iterate faster with the most popular open source coding agent.项目地址: https://gitcode.com/GitHub_Trending/ki/kilocode创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/9/10 14:13:44 · 阅读 1.2k Kilo JetBrains 插件 Markdown 渲染对齐 VS Code 样式：架构分析与实施指南
Kilo JetBrains 插件 Markdown 渲染对齐 VS Code 样式架构分析与实施指南【免费下载链接】kilocodeKilo is the all-in-one agentic engineering platform. Build, ship, and iterate faster with the most popular open source coding agent.项目地址: https://gitcode.com/GitHub_Trending/ki/kilocode本指南以仓库内规划文档 .kilo/plans/jetbrains-mdview-vscode-styling.md 为核心骨架系统讲解 Kilo 开源项目如何让 JetBrains 插件中的助手/用户对话 Markdown 输出在视觉上对齐 VS Code webview 的 Markdown 样式同时保留 JetBrains 侧Swing/JBHtmlPane 编辑器支撑代码块的既有架构。读完本文你将掌握VS Code Markdown 样式在 Kilo 前端各包中的分布与主题令牌映射规则、JetBrains 侧MdViewHybrid/MdCommon的渲染与样式生成原理、以及一套完整的样式令牌扩展 → CSS 规则镜像 → 代码块容器打磨 → 测试验证实施步骤可直接对照仓库源码逐条落地。一、方案背景与目标Kilo 的 JetBrains 插件packages/kilo-jetbrains/在会话转录中渲染 Markdown其目标是让助手/用户转写的视觉体验与 VS Code webview 中渲染出的 Markdown 保持一致。方案的核心约束是不推翻 JetBrains 侧现有的 Swing 渲染架构而是在Swing/JBHtmlPaneHTML 排版EditorTextField代码块的框架内把样式规格逐条对齐到 VS Code。文档给出的 Goal 原文是在保留现有架构的前提下改进 JetBrains Markdown 输出使其与 VS Code webview 的 Markdown 样式在视觉上匹配见 jetbrains-mdview-vscode-styling.md。二、VS Code 侧 Markdown 样式的构成Findings2.1 样式文件分布方案文档指出VS Code 的 Markdown 样式分散在四个地方packages/ui/src/components/markdown.css基础 Markdown 组件样式packages/kilo-ui/src/components/markdown.csskilo-ui 包对基础样式的覆盖与代码块滚动条细节packages/kilo-ui/src/styles/vscode-bridge.cssVS Code 主题桥把语义设计令牌映射到--vscode-*CSS 变量以及 message-part 覆盖规则在 webview 各消息部件中对 Markdown 做的局部覆盖。也就是说VS Code 侧长得什么样并不是一张写死的样式表而是基础排版 覆盖 主题桥三层叠加的结果。JetBrains 侧要做的对齐本质上是对这套分层结果的等价复刻。2.2 VS Code 基础排版规格从 packages/ui/src/components/markdown.css 可以看到 VS Code 侧 Markdown 的具体规格方案文档将其归纳为基础文本14px 无衬线字体--font-size-base、160% 行高、break-word换行、首尾子元素外边距清零 *:first-child { margin-top: 0 }/ *:last-child { margin-bottom: 0 }标题六个级别同尺寸14px、中粗字重--font-weight-medium、靠颜色与下边距区分margin-bottom: 24px段落12px 底部间距p { margin-bottom: 12px }链接使用交互色--text-interactive-base默认无下划线悬停时下划线并偏移 2px列表紧凑外边距、弱化的列表标记色li::marker { color: var(--text-weak) }引用块弱化文字、2px 左边框、正常字重水平线视觉隐藏但保留间隔border: none; height: 0; margin: 40px 0代码块带边框与内边距.shiki的 12px padding、6px 圆角、0.5px 边框行内代码绿色语法色--syntax-string 中粗字重表格浅边框--border-weaker-base、12px 单元格内边距、表头更强调。2.3 VS Code 主题桥的令牌映射packages/kilo-ui/src/styles/vscode-bridge.css 在html[data-themekilo-vscode]作用域下把 Kilo 语义令牌桥接到 VS Code 主题变量。文档指出该桥接的关键映射如下对应源码 vscode-bridge.cssMarkdown 角色映射到的 VS Code 令牌标题、链接、列表项、图片--vscode-textLink-foreground正文、加粗、代码块--vscode-editor-foreground行内代码--vscode-charts-green引用、强调--vscode-descriptionForeground水平线--vscode-panel-border这意味着对齐 VS Code本质上就是让 JetBrains 侧同一类角色取到等价的颜色来源JetBrains 用 IntelliJ 主题 APITextAttributesKey/ColorKey与集中式语义色来承担同一职责。三、JetBrains 侧当前渲染架构与差距3.1 渲染器构成JetBrains 侧 Markdown 由两层组件完成渲染MdViewHybrid混合渲染器负责把 Markdown 源文本投影为分块视图HTML 段落块、表格块、代码块、终端块、图表块并处理流式追加与块级复用MdViewHtmlPane基于JBHtmlPane的 HTML 排版组件承载正文/表格等富文本内容。两者的共享 CSS 由MdCommon.rules()生成默认配色由MdCommon.defaults(style)计算见 MdCommon.kt。对外统一暴露的是MdView接口MdView.kt它提供set/append/clear、applyStyle、resetStyles、链接监听、以及font/foreground/background/linkColor/codeBg/preBg/preFg/codeFont/quoteBorder/quoteFg/tableBorder/opaque等公开可覆盖属性overrideSheet()输出当前生效的 CSS 规则字符串。3.2 当前样式覆盖范围差距清单从 MdCommon.kt 中rules()的实际代码可以看到现状它只对宽泛的标签统一设置字体/颜色并单独覆盖链接、pre/code配色、引用块边框与文字色、表格边框。方案文档明确列出了与 VS Code 的差距缺少 VS Code 等价的间距体系标题、段落、列表、表格的 margin/padding缺少标题、加粗、强调、列表标记、表格单元格的分角色规则行内代码只有前景色、缺少中粗字重引用块缺少2px 左边框几何 8px 左内边距 24px 垂直外边距水平线缺少 VS Code 一致的间隔行为代码块表面缺少打磨背景、边框、圆角、内边距、细滚动条。3.3 被保留的既有优势方案文档特别强调一点JetBrains 的围栏代码块在一个维度上已经强于 VS Code——它使用EditorTextField承载真实 IDE 语法高亮并在流式输出时保留编辑器实例MdViewHybrid的append走fenced-code 快速路径直接view.grow(delta)。因此方案明确不切换到 web/JCEF 渲染而是保留并打磨这一优势。这也是后续所有代码块改动的前提。四、实施方案详解第 1 步扩展 Markdown 样式令牌当前MdStyle数据类MdCommon.kt已有foreground/background/linkColor/codeBg/preBg/preFg/codeFont/quoteBorder/quoteFg/quoteBg/tableBorder/headingFg/strongFg/emphasisFg/inlineCodeFg/listMarkerFg/hrColor/tableHeaderFg/codeBorder/opaque。方案要求在此基础上继续扩展内部字段覆盖标题、加粗、强调、行内代码前景、列表标记、水平线、表格/表头、代码块边框颜色等维度。实施要点公开 API 稳定除非确有必要新增外部 override否则保持MdView公开 override API 不变MdView.kt 中列出的公开属性就是契约默认值计算集中化在MdCommon.defaults(style)中从 IntelliJ/编辑器主题源如CodeInsightColors.HYPERLINK_ATTRIBUTES、HighlighterColors.TEXT、DefaultLanguageHighlighterColors.LINE_COMMENT、EditorColors.PREVIEW_BORDER_COLOR以及 Kilo 集中式语义色取值。现有代码中quoteFg取自行注释前景、linkColor取自超链接属性、inlineCodeFg取自SessionUiStyle.View.Markdown.string()即是这种模式的先例主题可覆盖使用JBColor.namedColor(Kilo.Markdown.*, fallback)定义 Kilo 专属 Markdown 调色板回退值让主题可覆盖、运行时避免散落的硬编码颜色。第 2 步在MdCommon.rules()中镜像 VS Code CSS在MdCommon.rules()当前实现见 MdCommon.kt中逐条补齐 VS Code 规则方案文档给出的完整清单如下根/主体包裹规则最大宽度行为、break-word换行、基础行高、首/尾子元素外边距修剪在JBHtmlPaneCSS 支持的前提下标题规则同基础字号、中粗字重、角色专属颜色、行高与底部间距段落/列表/列表项/嵌套列表/标记规则若 Swing HTML 不支持::marker则回退为li { color: ... }并在支持时重置子文本颜色否则保持列表文本正常并在测试中记录该限制加粗/强调颜色对齐 VS Code 令牌角色锚点样式主题化链接色、不强制背景、JBHtmlPane支持处加下划线引用块几何2px 左边框、24px 垂直外边距、8px 左内边距、弱化文字、正常字重表格布局合并边框、尽量全宽、24px 垂直外边距、12px 单元格内边距、弱行边框、更强调的表头文字水平线视觉隐藏但保持与 VS Code 一致的间距——MdViewHybrid目前会过滤主题分割线thematic breaks因此该规则主要惠及MdViewHtmlPane与未来复用行内代码设置前景色与中粗字重除非当前JBHtmlPane配置已经能画得可接受否则避免行内代码背景。需要说明的是现有MdCommon.inlineCode()MdCommon.kt已经实现了给code注入stylecolor: ...前景色的能力且MdViewTest中test set renders inline code明确断言生成的 HTML不含background内联样式这与行内代码不做背景的取向一致。第 3 步打磨代码块容器保留 IDE 高亮代码块仍是EditorTextField围栏/缩进块主用、JBTextArea兜底。方案要求在 MdViewHybrid.kt 的styleCodePane()基础上对齐 VS Code 的markdown-code包裹观感表面轻微背景 轻微边框 可行时采用平台感的圆角弧度现有CodePane已通过重写paintComponent用抗锯齿fillRoundRect画可选圆角弧度为SessionUiStyle.View.BLOCK_ARC见 MdViewHybrid.kt内边距约 12px 量级现有viewportBorder由SessionUiStyle.View.Code.topPadding()与水平内边距组合滚动条细水平滚动条行为现有SCROLLBAR_HEIGHT 12见 SessionUiStyle.kt几何常量集中优先复用SessionUiStyle.View.Code只有现有值无法表达 VS Code 间距时才少量新增边框分离内部将代码块边框色与表格边框色分离使表格样式调整不影响代码盒继续调用SessionEditorStyle.applyToEditor(ed)对应 MdViewHybrid.kt 的applyEditorChrome保证代码块跟随 IDE 语法高亮与编辑器字体变化。第 4 步文件/路径的可视性对齐JetBrains 侧其实已经有非常强的路径识别能力MdCommon会用正则把散落在正文与行内代码中的文件路径识别出来包成a.kilo-file-ref链接并保留:行号后缀见 MdCommon.kt测试test file refs keep line suffix and trailing punctuation outside link验证了这一行为。MdProjector的代码片段链接器则使用kilo-url-ref类MdCommon.URL_REF_CLASS。在此基础上方案要求对href形似相对文件路径的 Markdown 链接保持现有链接派发逻辑不变让现有调用方能按需打开文件/URL仅当现有使用路径可拿到openFile回调时才考虑给看起来像路径的行内代码装饰file-link类若当前MdView抽象只有openUrl则不要扩宽接口最低限度让行内代码/路径外观更贴近 VS Code——使用行内代码前景色并对生成的 HTML 中含链接/代码类的显式文件链接使用点状下划线对应 VS Code 侧a.file-path-link的dotted下划线样式见 markdown.css。第 5 步保留既有 Swing 行为这是防止回归的硬性要求MdViewHybrid.sync()的前缀复用逻辑MdViewHybrid.kt 中从前往后比对、能复用则update的分块同步除非必要否则不动样式更新时只对保留的JBHtmlPane块调用reloadCssStylesheets()并重新赋值文本现有HtmlView.style正是先reloadCssStylesheets()再pane.text html(...)见 MdViewHybrid.kt而不是重建所有块流式围栏代码快速路径与编辑器释放行为保持原样CodeField通过Disposer注册EditorFactory.getInstance()::releaseEditor避免泄漏。第 6 步聚焦测试与变更集扩展 MdViewTest.kt 与MdViewHybridTest断言overrideSheet()包含新的 VS Code 等价规则标题、加粗/强调、链接、行内代码前景、列表/表格/引用块间距、水平线、以及代码块边框与表格边框的分离为代码块面板样式增加组件测试背景、视口背景、边框色、内边距、滚动条策略、以及applyStyle()后保留的编辑器实例保持既有 stress/leak 测试绿色只有实现改变了样式应用语义时才补充少量压力断言增加 changesetkilocode/kilo-jetbrainspatch 版本用户可见描述如Improve markdown readability in JetBrains chat transcripts.。五、验证方式方案给出了明确的验证路径在 packages/kilo-jetbrains/ 目录下执行先跑定向测试./gradlew frontend:test --tests *MdView*若 Gradle 模块支持该过滤若定向过滤不可靠则运行./gradlew test类型检查bun run typecheck。仓库现有的测试基建与之对应MdViewTest基于BasePlatformTestCase获得真实 IntelliJ Application 以便JBHtmlPane正确初始化并已覆盖set/append渲染、加粗/斜体、行内代码前景色、围栏代码块、链接、文件引用链接化、以及overrideSheet()内容断言MdViewTest.ktMdViewHybridTest与MdViewHybridStressTest则覆盖混合渲染器的行为与压力/泄漏场景。六、约束与边界方案文档最后明确了三条硬约束理解这些边界有助于判断改动的影响范围不引入 JCEF、Compose 或 Kotlin UI DSL——坚持 Swing 渲染避免为样式对齐付出渲染栈切换的代价改动收敛在packages/kilo-jetbrains/与.changeset/内——除非明确需要共享的 Kilo UI 事实来源否则不扩散到其他包JetBrains 与 Kilo UI 路径无需kilocode_change标记该标记用于上游 opencode 同步场景见 script/upstream 相关工具优先使用 IntelliJ 主题 API 与集中式语义令牌而不是散落的字面颜色——这既是本方案的约束也是代码库里MdCommon.defaults()已经在遵守的既有规范。七、总结JetBrains 与 VS Code 的 Markdown 视觉对齐本质是一次规格翻译把 VS Code 侧由 markdown.css、kilo-ui markdown.css 与 vscode-bridge.css 共同定义的字号、行高、间距、颜色角色翻译成 JetBrains 侧MdCommon的 CSS 规则与 IntelliJ 主题令牌取值。方案在不动渲染架构的前提下通过扩展MdStyle令牌 → 镜像MdCommon.rules()→ 打磨EditorTextField代码块容器 → 对齐文件路径可视性 → 保留 Swing 行为 → 补测试与 changeset六步完成落地并在每一处都优先复用SessionUiStyle.View.Code等集中式常量与JBColor.namedColor主题回退确保 JetBrains 的对话转写既获得 VS Code 同款的排版秩序又保住了 IDE 原生语法高亮这一独有优势。对照 jetbrains-mdview-vscode-styling.md 与文中列出的源码文件即可逐条复现该方案的全部细节。【免费下载链接】kilocodeKilo is the all-in-one agentic engineering platform. Build, ship, and iterate faster with the most popular open source coding agent.项目地址: https://gitcode.com/GitHub_Trending/ki/kilocode创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考