DEV Community

John Pham
John Pham

Posted on • Updated on • Originally published at pham.codes

Toggling Comments for Custom CodeMirror Modes

Adding the ability to toggle line/block comments for Custom-defined CodeMirror Modes isn't well documented.

For my use case, I defined a SimpleMode. I wanted to allow users to toggle line/block comments either through clicking a GUI button or using a keyboard shortcut. Here's how I did it.


Below are the changes I made that differ from the documentation.

Your Mode File

Describe what a comment looks like.

CodeMirror.defineSimpleMode('mode-name', {
  arguments: [],
  meta: {
+     lineComment: '#'
   },
  start: [
+    {
+      regex: /#.*/,
+      token: 'comment',
+    },
  ]
}
Enter fullscreen mode Exit fullscreen mode

Import the CodeMirror Comment Addon

This file can be found in node_modules/codemirror/addons/comment

Instantiating the CodeMirror Instance

Define a keyboard shortcut to trigger the comment toggle in the CodeMirror options object.

{
  extraKeys: {
    'Ctrl-/': editor.execCommand('toggleComment')
  }
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)