kopia lustrzana https://github.com/miklobit/TiddlyWiki5
![]() There was a rendering mess in the CodeMirror readme file. This was cause by attempting to bold the `$:/tags/Stylesheet` text. Also the context of the sentence implies this should be backticked not bold (it refers to a tag not a tiddler). |
||
---|---|---|
.. | ||
files | ||
EditorTypeMappings.multids | ||
edit-codemirror.js | ||
plugin.info | ||
readme.tid | ||
styles.tid |
readme.tid
title: $:/plugins/tiddlywiki/codemirror/readme The CodeMirror plugin brings many features: * Code colouring for many languages (see [[the official documentation here|http://codemirror.net/mode/index.html]]) * Auto closing brackets and tags * Folding brackets, comments, and tags * Auto-completion ! Setting ~CodeMirror Content Types You can determine which tiddler content types are edited by the ~CodeMirror widget by creating or modifying special tiddlers whose prefix is comprised of the string `$:/config/EditorTypeMappings/` concatenated with the content type. The text of that tiddler gives the editor type to be used (eg, ''text'', ''bitmap'', ''codemirror''). The current editor type mappings are shown in [[$:/ControlPanel]] under the "Advanced" tab. ! ~CodeMirror Configuration You can configure the ~CodeMirror plugin by creating a tiddler called [[$:/config/CodeMirror]] containing a JSON configuration object. The configuration tiddler must have its type field set to `application/json` to take effect. See http://codemirror.net/ for details of available configuration options. For example: ``` { "require": [ "$:/plugins/tiddlywiki/codemirror/mode/javascript/javascript.js", "$:/plugins/tiddlywiki/codemirror/addon/dialog/dialog.js", "$:/plugins/tiddlywiki/codemirror/addon/search/searchcursor.js", "$:/plugins/tiddlywiki/codemirror/addon/edit/matchbrackets.js", "$:/plugins/tiddlywiki/codemirror/keymap/vim.js", "$:/plugins/tiddlywiki/codemirror/keymap/emacs.js" ], "configuration": { "keyMap": "vim", "matchBrackets":true, "showCursorWhenSelecting": true } } ``` !! Basic working configuration # Create a tiddler called `$:/config/CodeMirror` # The type of the tiddler has to be set to `application/json` # The text of the tiddler is the following: ``` { "require": [ "$:/plugins/tiddlywiki/codemirror/mode/javascript/javascript.js", "$:/plugins/tiddlywiki/codemirror/addon/edit/matchbrackets.js" ], "configuration": { "matchBrackets":true, "showCursorWhenSelecting": true } } ``` # You should see line numbers when editing a tiddler # When editing a tiddler, no matter what the type of the tiddler is set to, you should see matching brackets being highlighted whenever the cursor is next to one of them # If you edit a tiddler with the type `application/javascript` or `application/json` you should see the code being syntax highlighted !! Add HTML syntax highlighting # Create a tiddler `$:/plugins/tiddlywiki/codemirror/mode/xml/xml.js` ## Add a field `module-type` and set it to ''library'' ## Set the field `type` to ''application/javascript'' ## Set the text field of the tiddler with the javascript code from this link : [[https://raw.githubusercontent.com/codemirror/CodeMirror/master/mode/xml/xml.js]] # Set the text field of the tiddler `$:/config/CodeMirror` to: ``` { "require": [ "$:/plugins/tiddlywiki/codemirror/mode/javascript/javascript.js", "$:/plugins/tiddlywiki/codemirror/mode/xml/xml.js", "$:/plugins/tiddlywiki/codemirror/addon/edit/matchbrackets.js" ], "configuration": { "showCursorWhenSelecting": true, "matchBrackets":true } } ``` # Edit a tiddler with the type `text/html` and write some html code. You should see your code being coloured !! Add a non-existing language mode Here's an example of adding a new language mode - in this case, the language C. # Create a tiddler `$:/plugins/tiddlywiki/codemirror/mode/clike/clike.js` ## Add a field `module-type` and set it to ''library'' ## Set the field `type` to ''application/javascript'' ## Set the text field of the tiddler with the javascript code from this link : [[https://raw.githubusercontent.com/codemirror/CodeMirror/master/mode/clike/clike.js]] # Set the text field of the tiddler `$:/config/CodeMirror` to: ``` { "require": [ "$:/plugins/tiddlywiki/codemirror/mode/javascript/javascript.js", "$:/plugins/tiddlywiki/codemirror/mode/clike/clike.js" ], "configuration": { "showCursorWhenSelecting": true } } ``` # Add the correct ~EditorTypeMappings tiddler ## Find the matching MIME type. If you go on the [[CodeMirror documentation for language modes|http://codemirror.net/mode/index.html]] you can see the [[documentation for the c-like mode|http://codemirror.net/mode/clike/index.html]]. In this documentation, at the end you will be told the MIME types defined. Here it's ''text/x-csrc'' ## Add the tiddler: `$:/config/EditorTypeMappings/text/x-csrc` and fill the text field with : ''codemirror'' If you edit a tiddler with the type `text/x-csrc` and write some code in C, you should see your text being coloured. !! Add matching tags # Add XML and HTML colouring # Create a tiddler `$:/plugins/tiddlywiki/codemirror/addon/edit/matchtags.js` ## Add a field `module-type` and set it to ''library'' ## Set the field `type` to ''application/javascript'' ## Set the text field of the tiddler with the javascript code from this link : [[http://codemirror.net/addon/edit/matchtags.js]] # Set the text field of the tiddler `$:/config/CodeMirror` to: ``` { "require": [ "$:/plugins/tiddlywiki/codemirror/mode/javascript/javascript.js", "$:/plugins/tiddlywiki/codemirror/addon/edit/matchtags.js", "$:/plugins/tiddlywiki/codemirror/mode/xml/xml.js" ], "configuration": { "showCursorWhenSelecting": true, "matchTags": {"bothTags": true}, "extraKeys": {"Ctrl-J": "toMatchingTag"} } } ``` Edit a tiddler that has the type :`text/htm` and write this code: ``` <html> <div id="click here and press CTRL+J"> <ul> <li> </li> </ul> </div> </html> ``` If you click on a tag and press CTRL+J, your cursor will select the matching tag. Supposedly, it should highlight the pair when clicking a tag. However, that part doesn't work. !! Adding closing tags # Add the xml mode (see "Add XML and HTML colouring") # Create a tiddler `$:/plugins/tiddlywiki/codemirror/addon/edit/closetags.js` ## Add a field `module-type` and set it to ''library'' ## Set the field `type` to ''application/javascript'' ## Set the text field of the tiddler with the javascript code from this link : [[http://codemirror.net/addon/edit/closetag.js]] # Set the text field of the tiddler `$:/config/CodeMirror` to: ``` { "require": [ "$:/plugins/tiddlywiki/codemirror/mode/javascript/javascript.js", "$:/plugins/tiddlywiki/codemirror/mode/xml/xml.js", "$:/plugins/tiddlywiki/codemirror/addon/edit/closetags.js" ], "configuration": { "showCursorWhenSelecting": true, "autoCloseTags":true } } ``` If you edit a tiddler with the type`text/html` and write: ``` <html> ``` Then the closing tag ''</html>'' should automatically appear. !! Add closing brackets # Create a tiddler `$:/plugins/tiddlywiki/codemirror/addon/edit/closebrackets.js` ## Add a field `module-type` and set it to ''library'' ## Set the field `type` to ''application/javascript'' ## Set the text field of the tiddler with the javascript code from this link : [[http://codemirror.net/addon/edit/closebrackets.js]] # Set the text field of the tiddler `$:/config/CodeMirror` to: ``` { "require": [ "$:/plugins/tiddlywiki/codemirror/mode/javascript/javascript.js", "$:/plugins/tiddlywiki/codemirror/addon/edit/matchbrackets.js", "$:/plugins/tiddlywiki/codemirror/addon/edit/closebrackets.js" ], "configuration": { "showCursorWhenSelecting": true, "matchBrackets":true, "autoCloseBrackets":true } } ``` # If you try to edit any tiddler and write `if(` you should see the bracket closing itself automatically (you will get "if()"). It works with (), [], and {} # If you try and edit a tiddler with the type `application/javascript`, it will auto-close `()`,`[]`,`{}`,`''` and `""` !! Adding folding tags # Create a tiddler `$:/plugins/tiddlywiki/codemirror/addon/fold/foldcode.js` ## Add a field `module-type` and set it to ''library'' ## Set the field `type` to ''application/javascript'' ## Set the text field of the tiddler with the javascript code from this link : [[http://codemirror.net/addon/fold/foldcode.js]] # Repeat the above process for the following tiddlers, but replace the code with the one from the given link: ## Create a tiddler `$:/plugins/tiddlywiki/codemirror/addon/fold/xml-fold.js`, the code can be found here [[https://raw.githubusercontent.com/codemirror/CodeMirror/master/addon/fold/xml-fold.js]] ## Create a tiddler `$:/plugins/tiddlywiki/codemirror/addon/fold/foldgutter.js`, the code can be found here [[http://codemirror.net/addon/fold/foldgutter.js]] # Create a tiddler `$:/plugins/tiddlywiki/codemirror/addon/fold/foldgutter.css` ## Add the tag `$:/tags/Stylesheet` ## Set the text field of the tiddler with the css code from this link : [[http://codemirror.net/addon/fold/foldgutter.css]] # Set the text field of the tiddler `$:/config/CodeMirror` to: ``` { "require": [ "$:/plugins/tiddlywiki/codemirror/mode/javascript/javascript.js", "$:/plugins/tiddlywiki/codemirror/mode/xml/xml.js", "$:/plugins/tiddlywiki/codemirror/addon/fold/foldcode.js", "$:/plugins/tiddlywiki/codemirror/addon/fold/xml-fold.js", "$:/plugins/tiddlywiki/codemirror/addon/fold/foldgutter.js" ], "configuration": { "showCursorWhenSelecting": true, "matchTags": {"bothTags": true}, "foldGutter": true, "gutters": ["CodeMirror-linenumbers", "CodeMirror-foldgutter"] } } ``` Now if you type the below code in a tiddler with the type `text/html`: ``` <html> <div> <ul> </ul> </div> </html> ``` You should see little arrows just next to the line numbers. Clicking on it will have the effect to fold the code (or unfold it).