资讯动态

Milkdown嵌套列表缩进调整:3步搞定Tab缩进、indentConfig与快捷键自定义

发布时间:2026/9/14 17:35:16 来源:尧图企业网站定制
Milkdown嵌套列表缩进调整3步搞定Tab缩进、indentConfig与快捷键自定义【免费下载链接】milkdown Plugin driven WYSIWYG markdown editor framework.项目地址: https://gitcode.com/GitHub_Trending/mi/milkdown在 Milkdown 里写三级以上的嵌套列表缩进总失控Tab 按了没反应、想改缩进宽度不知道去哪配。本文围绕Milkdown 嵌套列表的列表缩进带你 3 步让 Tab / ShiftTab 生效、配好 indentConfig、把缩进快捷键自定义成自己的习惯。嵌套列表为什么总排版失控先说清楚 Milkdown 里缩进到底发生了什么因为这里有两套机制混在一起是排错的大头。Milkdown 基于 ProseMirror一个把文档当树来管的编辑内核列表项里可以再装一个列表层级就是树上的父子关系。列表键位preset-commonmark 自带在列表项里按Tab把当前项下沉一级ShiftTab升一级改的是文档树结构indent 插件在光标处插入一段缩进字符默认 2 个空格改的是纯文本内容。列表项的默认键位定义在 list-item 节点源码 里注意它已经内置了 Ctrl 备用键SinkListItem: { shortcuts: [Tab, Mod-]], ... LiftListItem: { shortcuts: [Shift-Tab, Mod-[],也就是说Ctrl]/Ctrl[天生可用很多人不知道就自己重写了一遍。30秒上手让列表缩进立刻生效装好 commonmark 预设后列表内的Tab/ShiftTab开箱即用一行配置都不用写。只有你需要插入缩进字符的行为时才要引入 indent 插件。下面这段就是最小配置声明缩进方式并挂载插件。import { indent, indentConfig } from milkdown/plugin-indent Editor.make() .config((ctx) { ctx.set(indentConfig.key, { type: space, size: 2 }) }) .use(indent) .create()把size从 2 改成 4Tab 插入的空格就从 2 个变 4 个。顺带一提官方 Crepe 预设已经把默认缩进改成了 4 空格如果你用的就是 Crepe可能根本不用配。搞懂 indentConfig空格还是 TabindentConfig一共只有两个参数看这张表就够了参数默认值作用typespace插空格还是插一个真正的制表符\tsize2type为 space 时插几个空格为 tab 时固定插 1 个\tsize只对空格生效这是新手最常踩的坑设type: tab时size写多大都没用。核心逻辑就一行摘自 indent 插件源码const text options.type space ? Array(options.size).fill( ).join() : \t return tr.insertText(text, to)type决定字符种类size决定空格数量改完立刻在下一次按键时生效。️ 快捷键定制把缩进键改成自己的想让某个顺手组合触发缩进给 Milkdown 的 keymap 管理器注册一个新快捷键即可——它按优先级高先执行、同级按注册顺序分发按键。下面这段注册了两个自定义键调用的是和默认 Tab 完全相同的下沉/升级命令import { $shortcut } from milkdown/utils import { commandsCtx } from milkdown/core import { sinkListItemCommand, liftListItemCommand, } from milkdown/preset-commonmark export const myIndentKeys $shortcut((ctx) ({ Ctrl-Shift-]: () ctx.get(commandsCtx).call(sinkListItemCommand.key), Ctrl-Shift-[: () ctx.get(commandsCtx).call(liftListItemCommand.key), }))最后.use(myIndentKeys)挂上即可键名换成你自己的。若同一键位和别的插件撞车用priority参数提高优先级就能压过对方。✅ 自查清单三个高频翻车点Tab 不生效先确认位置代码块里 Tab 归 CodeMirror 管普通段落归 indent 插件管列表项里才是层级下沉确认挂了.use(indent)漏掉是最常见原因在初始化后执行ctx.get(indentConfig.key)控制台看一眼实际值。快捷键被覆盖检查是否有其它插件先注册了同一键位后注册的排在后面给自定义 keymap 传更高的priority或直接换键位验证是不是冲突。配置没生效ctx.set(indentConfig.key, ...)必须在.create()之前完成运行中要动态改用ctx.update(indentConfig.key, v ({ ...v, size: 4 }))用了 Crepe 的话记得它的默认值是size: 4别拿 2 当基准怀疑人生。掌握这套组合列表缩进就再也不会失控默认键位保你 30 秒上手indentConfig管字符与宽度keymap 管手感。想深入插件开发规范可以看仓库的 CONTRIBUTING.md。【免费下载链接】milkdown Plugin driven WYSIWYG markdown editor framework.项目地址: https://gitcode.com/GitHub_Trending/mi/milkdown创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考

读完文章,也想定制专属网站?

尧图设计师 24 小时内与您沟通定制方案

免费获取报价