通过操作实例，看看怎么在 atom 中添加自定义快捷键

怎么在 atom 中添加自定义快捷键？本篇文章给大家以 language-markdown 为例，介绍一下实现 markdown 多级标题快捷设定的方法，希望对大家有所帮助！

问题的描述

在使用 Markdown 写学习笔记的时候，一开始选择 markdownpad 2 作为编辑器，但是 markdownpad 对 latex 公式，以及贴图的使用十分不友好，但存在着一些友好的快捷键，如 ctrl+1 快速添加 1 级标题，也设置了一个 toolbar 能够快速的进行对文本加粗，插入网址超链接等操作，比较适合新手。但是 markdownpad 2 对 latex 等数学公式、贴入图片等方面使用效果不好。

atom 是一款非常好的 markdown 编辑器,(下载网址)，支持多种编程语言格式,同时开源，有很多的第三方 package 以及 theme 来使得编辑器更加的人性化。【相关推荐：atom 使用教程】

其中的 language-markdown 是 atom 必装的 markdown 增强库，其中设定了一系列的快捷，如：

但 atom 中却没有快速添加 markdown 标题的快捷键。为了解决这个问题，需要自定义快捷键。(PS:截至到发博，未见有其他类似教程)现在是我整个分析和操作的思路，如果看官没有时间，建议直接下载我修改好的文件，覆盖覆盖 language-markdown 目录下的同名文件夹，并重启 atom 即可：CSDN 下载链接

atom 自定义快捷键-keymaps 解析及应用

atom 中的快捷键功能非常强大， 同一个快捷键，在 atom 的不同窗口上实现的功能是不一样的，同时还支持自定义。在 atom 的 settings-keybindings 中进行查看

可以发现 ctrl++就对应着好 3 条功能，从 sorce 上在不同的 view 里确实是实现了不同的功能，按照界面的提示，我们复制在 markdown-preview-plus 中的快捷键语法，如下：

'.platform-win32 .markdown-preview-plus': 'ctrl-+': 'markdown-preview-plus:zoom-in'登录后复制

对比一下在 keybindings 的描述：

我们可以发现，atom 快捷键设定的语法特点是：

'Selector': 'keystroke': 'Command'登录后复制

keystroke 是我们要设定的快捷键，Command 是快捷键执行的命令，而 source 指示的是该快捷键在哪个 package 中，而 Selector 是选择器，可以认为跟 CSS 选择器差不多，都是定位元素位置，在 atom 中大概是识别监测快捷键发生的上下文位置把。重点分析 Command，感觉这个好像是引用了包中的一个函数。

修改 language-markdown 包，实现 atom 中 markdown 多级标题快捷设定

查看 language-markdown 中设定的一个快捷键：

'atom-text-editor[data-grammar="text md"]': '*': 'markdown:strong-emphasis'登录后复制

在 package 中，搜索 strong-emphasis 的关键字，发现在 lib 文件的’main.js`中有多处匹配记录，并发现有以下的内容(189-202 行)：

addCommands () { this.subscriptions.add(atom.commands.add('atom-text-editor', 'markdown:indent-list-item', (event) => this.indentListItem(event))) this.subscriptions.add(atom.commands.add('atom-text-editor', 'markdown:outdent-list-item', (event) => this.outdentListItem(event))) this.subscriptions.add(atom.commands.add('atom-text-editor', 'markdown:emphasis', (event) => this.emphasizeSelection(event, '_'))) this.subscriptions.add(atom.commands.add('atom-text-editor', 'markdown:strong-emphasis', (event) => this.emphasizeSelection(event, '**'))) this.subscriptions.add(atom.commands.add('atom-text-editor', 'markdown:strike-through', (event) => this.emphasizeSelection(event, '~~'))) this.subscriptions.add(atom.commands.add('atom-text-editor', 'markdown:link', (event) => this.linkSelection(event))) this.subscriptions.add(atom.commands.add('atom-text-editor', 'markdown:image', (event) => this.linkSelection(event, true))) this.subscriptions.add(atom.commands.add('atom-text-editor', 'markdown:toggle-task', (event) => this.toggleTask(event))) if (atom.inDevMode()) { this.subscriptions.add(atom.commands.add('atom-workspace', 'markdown:compile-grammar-and-reload', () => this.compileGrammar())) } },登录后复制

这一段代码出现了问题描述中所展示的 language-markdown 包的快捷键描述的 Command，并发现 strong-emphasis 是调用了 js 中的 emphasizeSelection 函数。由于 strong-emphasis 实现了文字的加粗显示功能，而在 markdown 中的文字加粗显示其实就是在要加粗的文字前后加**，而 markdown 设定标题其实就是在文本前后加多个#。故可以分析 emphasizeSelection 函数来达到我们的目的，emphasizeSelection 函数如下：

emphasizeSelection (event, token) { let didSomeWrapping = false if (atom.config.get('language-markdown.emphasisShortcuts')) { const editor = atom.workspace.getActiveTextEditor() if (!editor) return const ranges = this.getSelectedBufferRangesReversed(editor) for (const range of ranges) { const text = editor.getTextInBufferRange(range) /* Skip texts that contain a line-break, or are empty. Multi-line emphasis is not supported 'anyway'. If afterwards not a single selection has been wrapped, cancel the event and insert the character as normal. If two cursors were found, but only one of them was a selection, and the other a normal cursor, then the normal cursor is ignored, and the single selection will be wrapped. */ if (text.length !== 0 && text.indexOf('\\n') === -1) { const wrappedText = this.wrapText(text, token) editor.setTextInBufferRange(range, wrappedText) didSomeWrapping = true } } } if (!didSomeWrapping) { event.abortKeyBinding() } return },登录后复制

从源代码中，我们分析得知，在判断一系列条件下：当有选中文字，且为单行时，就在 text 前后加 token，而 token 正是 addcommand 函数中设定的**。但是由于 markdown 设定标题，是文本前后各有一个空格，然后再加#: # header1 #。所以我们可以对这个函数进行非常简单的修改，即在调用的 this.wrapText(text, token)时，直接在 text 然后加上空格符就行了，如复制一份 emphasizeSelection 代码，并命名为 addwords：

addwords (event, token) { let didSomeWrapping = false if (atom.config.get('language-markdown.emphasisShortcuts')) { const editor = atom.workspace.getActiveTextEditor() if (!editor) return const ranges = this.getSelectedBufferRangesReversed(editor) for (const range of ranges) { const text = editor.getTextInBufferRange(range) /* Skip texts that contain a line-break, or are empty. Multi-line emphasis is not supported 'anyway'. If afterwards not a single selection has been wrapped, cancel the event and insert the character as normal. If two cursors were found, but only one of them was a selection, and the other a normal cursor, then the normal cursor is ignored, and the single selection will be wrapped. */ if (text.length !== 0 && text.indexOf('\\n') === -1) { //2021 年 2 月 4 日 14:55:26，这里需要在 text 文本上前后加空格，不然，不能正常的设定 1-3 级标题 const wrappedText = this.wrapText(" "+text+" ", token) editor.setTextInBufferRange(range, wrappedText) didSomeWrapping = true } } } if (!didSomeWrapping) { event.abortKeyBinding() } return }登录后复制

在 addCommands 中中添加三行关于 addwords 的设定，即可完成快捷键 Command 的设定，当选中文本调用'markdown:header1'，便会自动将文本设定为一级标题，修改后的 addCommands：

addCommands () { this.subscriptions.add(atom.commands.add('atom-text-editor', 'markdown:indent-list-item', (event) => this.indentListItem(event))) this.subscriptions.add(atom.commands.add('atom-text-editor', 'markdown:outdent-list-item', (event) => this.outdentListItem(event))) this.subscriptions.add(atom.commands.add('atom-text-editor', 'markdown:emphasis', (event) => this.emphasizeSelection(event, '_'))) this.subscriptions.add(atom.commands.add('atom-text-editor', 'markdown:strong-emphasis', (event) => this.emphasizeSelection(event, '**'))) this.subscriptions.add(atom.commands.add('atom-text-editor', 'markdown:strike-through', (event) => this.emphasizeSelection(event, '~~'))) this.subscriptions.add(atom.commands.add('atom-text-editor', 'markdown:link', (event) => this.linkSelection(event))) this.subscriptions.add(atom.commands.add('atom-text-editor', 'markdown:image', (event) => this.linkSelection(event, true))) this.subscriptions.add(atom.commands.add('atom-text-editor', 'markdown:toggle-task', (event) => this.toggleTask(event))) this.subscriptions.add(atom.commands.add('atom-text-editor', 'markdown:header1', (event) => this.addwords(event, '#'))) this.subscriptions.add(atom.commands.add('atom-text-editor', 'markdown:header2', (event) => this.addwords(event, '##'))) this.subscriptions.add(atom.commands.add('atom-text-editor', 'markdown:header3', (event) => this.addwords(event, '###'))) if (atom.inDevMode()) { this.subscriptions.add(atom.commands.add('atom-workspace', 'markdown:compile-grammar-and-reload', () => this.compileGrammar())) } },登录后复制

现在已经完成快捷键的设定了，然后就可以用我们在分析 keybindings 分析得的快捷键语法，在 keymap 文件中设定快捷键，如：

'atom-text-editor[data-grammar="text md"]': 'ctrl-1': 'markdown:header1' 'ctrl-2': 'markdown:header2' 'ctrl-3': 'markdown:header3'登录后复制

ctrl+数字的方法跟 markdownpad2 中的快捷键保持一致，但要注意这里只设计到三级标题，可以应对大部分的写作情况。当然，也可分析源码，自定义其他的功能函数，来实现更为复杂的命令。

另外一种设定快捷键的方式，是直接改写 language-markdown 的快捷键配置文件。在 atom 中，快捷键的自定义设定在 keymaps.cson 文件中设定，分析 language-markdown 发现，其存在 keymaps 中的文件夹，其中有一个 cson 文件，打开文件，发现果然是有关快捷键的设定：

'.platform-darwin atom-workspace': 'cmd-alt-ctrl-c': 'markdown:compile-grammar-and-reload''.platform-win32 atom-workspace': 'shift-alt-ctrl-c': 'markdown:compile-grammar-and-reload''.platform-linux atom-workspace': 'shift-alt-ctrl-c': 'markdown:compile-grammar-and-reload''.platform-darwin atom-text-editor[data-grammar="text md"]': 'cmd-shift-x': 'markdown:toggle-task''.platform-win32 atom-text-editor[data-grammar="text md"]': 'ctrl-shift-x': 'markdown:toggle-task''.platform-linux atom-text-editor[data-grammar="text md"]': 'ctrl-shift-x': 'markdown:toggle-task''atom-text-editor[data-grammar="text md"]': 'tab': 'markdown:indent-list-item' 'shift-tab': 'markdown:outdent-list-item' '_': 'markdown:emphasis' '*': 'markdown:strong-emphasis' '~': 'markdown:strike-through' '@': 'markdown:link' '!': 'markdown:image'登录后复制

我们将上述的三条 ctrl+数字的命令粘贴在这里，重启 atom 后，发现成功添加了快捷键，在 markdown 测试也正常：

经过对比发现，在 keymaps 文件中重载快捷键，其 Source 为 user，而在 language-markdown 中的 cson 中修改，其 Source 显示为 language-markdown。显然后者看起来更统一，符合强迫症患者的需求…

【相关推荐：《atom 教程》】

以上就是通过操作实例，看看怎么在 atom 中添加自定义快捷键的详细内容，更多请关注快捷派其它相关文章！