Hi everyone, I also had trouble using CodeMirror, and couldn't find any good documentation. The basic configuration given on tiddlywiki <http://tiddlywiki.com/plugins/tiddlywiki/codemirror/index.html#%24%3A%2Fplugins%2Ftiddlywiki%2Fcodemirror%2Freadme>doesn't even work for me :/ But I spent a fair amount of time testing configurations and got some things to work. Ideally I'd follow the steps given to improve Tiddlywiki documentation <http://tiddlywiki.com/#Improving%20TiddlyWiki%20Documentation>, but I won't, for 2 reasons :
1. I'm just a student trying to share a little bit of knowledge, improving the documentation means following 11 steps. Here I just have to write a post and send it. So it's easier for me. 2. I had to come to this google group to find the codemirror documentation given on tiddlywiki, so I think my post will have more visibility here. So I'll just start describing the configurations I have found now. Convention - In the rest of this post, when I'll say add a tiddler : "$:/plugins/tiddlywiki/codemirror/addon/edit/closebrackets.js" for codemirror with this code : http://codemirror.net/addon/edit/closebrackets.js , that will mean : 1. Create the tiddler " $:/plugins/tiddlywiki/codemirror/addon/edit/closebrackets.js". 2. Add a field : "*module-type*", and fill it with "*library*". 3. Select the type : "*application/javascript*". 4. Copy the code given from the link in the text field of the tiddler. - In addition when I'll give a configuration like this : *Configuration:* { "require": [ "$:/plugins/tiddlywiki/codemirror/mode/javascript/javascript.js" ], "configuration": { "showCursorWhenSelecting": true } } That means you have to edit (or create if it doesn't exist yet) the tiddler : "$:/config/CodeMirror" and put the given configuration in the text field. You also have to set the type of the tiddler to : "*application/json*". Finally, you have to reload the page to apply the new configuration. Basic configuration *Configuration:* { "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" ], "configuration": { "matchBrackets":true, "showCursorWhenSelecting": true } } *Consequences:* 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. Adding closing brackets Add a tiddler "$:/plugins/tiddlywiki/codemirror/addon/edit/closebrackets.js" for codemirror with this code : http://codemirror.net/addon/edit/closebrackets.js <http://codemirror.net/addon/edit/closebrackets.js> *Configuration:* { "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/addon/edit/closebrackets.js" ], "configuration": { "showCursorWhenSelecting": true, "matchBrackets":true, "autoCloseBrackets":true } } *Consequences:* - Now if you try to edit any tiddler and write : "if(", you should see the bracket closing itself automatically (you'll get "if()"). It works with (), [], and {}. - If you try and edit a tiddler with the type "*application/javascript*", it'll auto-close (),[],{},'' and "" Adding HTML coloring Add a tiddler "$:/plugins/tiddlywiki/codemirror/mode/xml/xml.js" for codemirror with this code : https://raw.githubusercontent.com/codemirror/CodeMirror/master/mode/xml/xml.js *Configuration:* { "require": [ "$:/plugins/tiddlywiki/codemirror/mode/javascript/javascript.js", "$:/plugins/tiddlywiki/codemirror/mode/xml/xml.js", "$:/plugins/tiddlywiki/codemirror/addon/dialog/dialog.js", "$:/plugins/tiddlywiki/codemirror/addon/search/searchcursor.js" ], "configuration": { "showCursorWhenSelecting": true } } *Consequences:* Edit a tiddler, set the type to : "*text/html*", and add this text : <html> <body> <div id="test"> </div> </body> </html> You should see the tags being coloured in green. Adding closing tags Add the tiddler : "$:/plugins/tiddlywiki/codemirror/addon/edit/closetags.js" for codemirror with this code : http://codemirror.net/addon/edit/closetag.js *Configuration:* { "require": [ "$:/plugins/tiddlywiki/codemirror/mode/javascript/javascript.js", "$:/plugins/tiddlywiki/codemirror/mode/xml/xml.js", "$:/plugins/tiddlywiki/codemirror/addon/dialog/dialog.js", "$:/plugins/tiddlywiki/codemirror/addon/search/searchcursor.js", "$:/plugins/tiddlywiki/codemirror/addon/edit/closetags.js" ], "configuration": { "showCursorWhenSelecting": true, "autoCloseTags":true } } *Consequences:* If you edit a tiddler with the type "*text/html*" and write : <html> Then the closing tag </html> should appear. Adding matching tags Add the tiddler : "$:/plugins/tiddlywiki/codemirror/addon/edit/matchtags.js" for codemirror with this code: http://codemirror.net/addon/edit/matchtags.js *Configuration:* { "require": [ "$:/plugins/tiddlywiki/codemirror/mode/javascript/javascript.js", "$:/plugins/tiddlywiki/codemirror/mode/xml/xml.js", "$:/plugins/tiddlywiki/codemirror/addon/dialog/dialog.js", "$:/plugins/tiddlywiki/codemirror/addon/search/searchcursor.js", "$:/plugins/tiddlywiki/codemirror/addon/edit/matchtags.js" ], "configuration": { "showCursorWhenSelecting": true, "matchTags": {"bothTags": true}, "extraKeys": {"Ctrl-J": "toMatchingTag"} } } *Consequences:* If you edit a tiddler that has the type : "*text/html*" and write this code : <html> <div id="click here and press CTRL+J"> <ul> <li> </li> </ul> </div> </html> Then 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, I don't know why yet. I suspect this is because of some missing css, but I haven't found it. Adding folding tags Add the following tiddlers for codemirror : - "$:/plugins/tiddlywiki/codemirror/addon/fold/foldcode.js" with this code : http://codemirror.net/addon/fold/foldcode.js - "$:/plugins/tiddlywiki/codemirror/addon/fold/xml-fold.js" with this code : https://raw.githubusercontent.com/codemirror/CodeMirror/master/addon/fold/xml-fold.js - "$:/plugins/tiddlywiki/codemirror/addon/fold/foldgutter.js" with this code : http://codemirror.net/addon/fold/foldgutter.js Then add the following tiddler "$:/plugins/tiddlywiki/codemirror/addon/fold/foldgutter.css" *BUT IT IS NOT FOR CODEMIRROR*. Add the tag : "*$:/tags/Stylesheet"* to it and fill the text field with this code : http://codemirror.net/addon/fold/foldgutter.css. <http://codemirror.net/addon/fold/foldgutter.css> *Configuration:* { "require": [ "$:/plugins/tiddlywiki/codemirror/mode/javascript/javascript.js", "$:/plugins/tiddlywiki/codemirror/mode/xml/xml.js", "$:/plugins/tiddlywiki/codemirror/addon/dialog/dialog.js", "$:/plugins/tiddlywiki/codemirror/addon/search/searchcursor.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"] } } *Consequences:* 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). That's it for today. I hope this helps some of you. Kind Regards, Erwan -- You received this message because you are subscribed to the Google Groups "TiddlyWiki" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/tiddlywiki. For more options, visit https://groups.google.com/d/optout.
