TopMarks
With the release of Mou 0.7 comes a neat feature allowing you, the lowly end-user, to set a custom stylesheet from which to prettify the output panel (and exported HTML) of your markdown flavoured text-editor. I had, before this most recent release, been injecting some custom CSS into the app in order to style my output, but I can skip all that boring stuff now that the app supports this feature natively and get on with the awesome.
For me, the power of Mou and other MarkDown flavoured editors is that you are released of the limitation of a traditional text editor. Yes, you’ll use it to manage text-based documents, but that doesn’t have to mean prose.
So, here is my first Mou user stylesheet – TopMarks, which coupled with a handy TextExpander snippet group allows me to manage a todo list with greater speed and flexibility than my previous task-management software had permitted.
So, the video above shows me generating and managing a tasklist with the combination of some strange, wholly invalid HTML elements and some TextExpander snippets. Take a look at the files, examine the bundle to see what the shortcuts are, and change them to match your favoured key combinations. By default, those combinations are:
| ACTION | ABBR |
|---|---|
| New Task | ;t |
| Complete Task | ;d |
| Cancel Task | ;c |
| Today’s date | ;0 |
You’ll have seen in the video that aside from the task markers, there are also some icons in use when I add a link to my todo list. The icon used depends on the protocol of the link you use, so ical:// events will have a calendar icon, mailto:// links an email icon, etc. Take a look at the CSS file if you want to see which link types are supported. You can add new ones pretty easily should you so wish.
One thing to bear in mind is that you can only set a custom CSS file once in Mou, and it'll be used for every file you open (in Mou). The way around this for me is to set out document modes and namespace them in my CSS file. That means that when I finish the second document type I’m using, I'll consolidate both document types into one single CSS file and simply choose which CSS to render based on a high-level class or ID. I’ll post more on that once I’ve figured it out properly.
Download, Fork, Modify and hack away on github.