TiddlyWiki, an open source Evernote with VIM and Markdown

From Text Files to Evernote and Keep

I use plain text files to organize my todos, meeting notes, worklogs and research notes.

I needed a system I could access from all my computers and mobile devices.
I tried to put the notes on Google Drive and Dropbox, but it didn't work. It lacked a consistent UI for editing, especially on the Chromebook.

Next I tried Evernote. I don't know why but I stopped using it and got back to my local text files, maybe because they are simple, less clutter.

Finally I tried Keep from Google. That worked well for sometime; the mobile version is great. It's not cluttered, you can view the notes as cards or a list and has quick search. All good.

But one day Google went down, Keep was all screwed up, and I got scared. Maybe they would drop that project with all my notes like they did with Scratchpad.

So I started looking for a self hosted solution.

TiddlyWiki

In my research I came across TiddlyWiki, I used it a few years back. It was one of the first full javascript application in the pre node.js time.

I installed TiddlyWiki 5 beta and to my surprised it worked very well.
I've been using it for about 3 months now for all my notes.

Its just a wiki, so nothing special to write about, until the new 5.0.10 version where they added Markdown and CodeMirror plugins.

VIM and Markdown

So this week I upgraded to version 5.0.10 and enabled the Markdown and CodeMirror.

This was awesome because we use Ghost for our blog and Jingo for our company wiki. Both use Markdown to structure the content.
It was great to now have only one markup standard for text content.

The other awesome part is that CodeMirror enabled VIM key binding. Now I can edit my notes like in VI, which is much more efficient for me. (Emacs available).

What was not available in that version was color syntax highlighting for Markdown with CodeMirror.
I had to add it manually.

Adding Markdown Color Syntax to TiddlyWiki

Here is how to add color syntax to TiddlyWiki editor.

In the TiddlyWiki CodeMirror add:
$:/config/CodeMirror

{
  "require": [
    "$:/plugins/tiddlywiki/codemirror/addon/dialog.js",
    "$:/plugins/tiddlywiki/codemirror/addon/searchcursor.js",
    "$:/plugins/tiddlywiki/codemirror/keymap/vim.js",
    "$:/plugins/tiddlywiki/codemirror/keymap/emacs.js",
    "$:/plugins/tiddlywiki/codemirror/mode/markdown/markdown.js",
    "$:/plugins/tiddlywiki/codemirror/mode/xml/xml.js"     
  ],
  "configuration": {
      "keyMap": "vim",
      "showCursorWhenSelecting": true,
      "mode": "markdown"
  }
}

Get the source of CodeMirror make sure you use the V3 branch and extract the files:

mode/markdown/markdown.js
mode/xml/xml.js

Place those files in your TiddlyWiki installation:

/usr/local/lib/node_modules/tiddlywiki/plugins/tiddlywiki/codemirror/files

Then edit the file tiddlywiki.files in that same directory and add

,{
                        "file": "mode/markdown/markdown.js",
                        "fields": {
                                "type": "application/javascript",
                                "title": "$:/plugins/tiddlywiki/codemirror/mode/markdown/markdown.js",
                                "module-type": "library"
                        }
                },{
                        "file": "mode/xml/xml.js",
                        "fields": {
                                "type": "application/javascript",
                                "title": "$:/plugins/tiddlywiki/codemirror/mode/xml/xml.js",
                                "module-type": "library"
                        }
                }

Conclusion

I now have a web based note system that uses the same standard and behavior that my other day to day tools use.

Happy Coder.

This is how it looks like now.

Edit mode:

https://docs.google.com/a/ofuz.org/file/d/0B1aw5bUU76CrRE1KZHhSdk5FaFk/edit

Saved mode: