CodeMirror Demo

This is a demo of TiddlyWiki5 incorporating a plugin for the CodeMirror text editor for the web.

The CodeMirror plugin can be extended with AddOns for more functionality:

• Search and Replace
• Text - Autocompletion
• Syntax highlighting
• Fullscreen editing
• Keymaps in the style of Emacs, Sublime Text or Vim
• Closing Brackets
• Closing Tags

NOTE: This demo has the Sublime Text keymap installed.

Try editing the tiddler Draft of 'LoremIpsum' to try out the editor.

Some commands and functions to try:

• Ctrl+F : Search panel to search for expressions
• Ctrl+H (sublime text shortcut, default is Ctrl+Shift+R) : Search and Replace
• Ctrl+Space : Triggers Autocompletion
• typing an opening bracket like { automatically creates the closing bracket }
• tiddlers with type application/javascript, application/json, text/css, text/html, text/xml, text/x-markdown and text/x-tiddlywiki have Syntax Highlighting
• tiddlers with type text/html automatically close tags like <div> when the closing > gets typed
• Multiple cursors: holding Ctrl pressed while selecting words results in multiple cursors. If you type, all selections will update

This demo uses the Sublime Text Keymap - See the Sidebar Tab Keymap or the Sublime Text Keymap Readme for all available keyboard shortcuts

To add the base plugin to your own TiddlyWiki5, just drag this link to the browser window:

$:/plugins/tiddlywiki/codemirror

CodeMirror plugin Readme

CodeMirror plugin Usage

To add AddOns to your CodeMirror plugin, go to ControlPanel - Plugins and drag the desired AddOn to your wiki browser window

The configuration for AddOns is done automatically, configuration for sensible settings can be done in ControlPanel - Settings - CodeMirror