OmniOutliner to Markdown

I was doing some planning with OmniOutliner yesterday. I haven’t used it for over two years but decided it was a good fit for the task I had to do. Once I had created my outline I decided I wanted to add it to my Trunk Notes personal wiki.

Excitedly I saw a plugin for OmniOutliner to do exactly that – http://fletcherpenney.net/multimarkdown/. After a little playing I was impressed by all the features and the information available on the site and in the user’s guide. However the opml2mmd tool only included the first column. My reason for using OmniOutliner was the support for multiple columns.

OmniOutliner can export in a variety of formats. One of the simplest is Plain Text with tabs. This includes all the columns and even the column headings. Five minutes later I had a little Python script which easily handles my OmniOutliner document and converts it into sensibly formatted Markdown. I want columns two and above to appear as a bulleted list underneath the heading.

Here is an example OmniOutliner document (not the one I was working with, but it has the same format):

NewImage

As you can see I have three columns, and have included a note. I now export the document in the format Plain Text (with tabs) and run my Python script. Here is the resulting Markdown:

NewImage

The Python script is very quick and dirty (no error handling or proper command line arguments):

#!/usr/bin/env python


"""
Convert an export OmniOutliner (plain text with tabs) document to Markdown

@author: Matthew Kennard <mgkennard@appsonthemove.com>
"""

import sys

outline_path = sys.argv[1]

lines = open(outline_path).readlines()
column_headings = lines[0].strip().split('t')

for line in lines[1:]:
    # Get number of tabs at the start
    tabs = 0
    for c in line:
        if c != 't':
            break
        tabs += 1
    # Remove the tabs
    line = line.strip('t')
    if line.startswith('- '):
        # A branch
        line = line[2:]
        line = line.strip()
        if not line:
            continue
        columns = line.split('t')
        print '%s %s' % ('#' * (tabs + 1), columns[0])
        print
        for i, column_heading in enumerate(column_headings[1:]):
            column_n = i + 1
            if column_n < len(columns):
                print ' * %s: %s' % (column_headings[column_n], columns[column_n], )
        print
    else:
        # A note
        print line.strip()

I’m now happy that I can export my OmniOutliner planning documents and have them available on my iPhone in Trunk Notes.

The beauty of open formats (such as plain text or OPML which OmniOutliner also supports) is the ease with which you can convert your data for use in other applications. If you use Trunk Notes with other applications let me know!

The Importance Of Plain Text

Trunk Notes is just one of many iPhone/iPad apps that make a big thing of plain text. This is a refreshing trend. In the not too distant past it was all about proprietary file formats. If you used an obscure program ten years ago you will likely find it difficult or impossible to open your saved files today without resorting to hackery.

Thankfully times have changed and now it’s all about interoperability. Most modern programs, particularly on the Mac, make use of open file formats and offer multiple ways in which data can be exported. Many people steer well clear of programs which lock data in. With the rate of innovation who in their right mind would spend time building up a vital store of data in an app from which there is no way out?

Plain text is the ultimate in open file formats. A text file is something that can be viewed without the need for any software over and above what comes with your operating system. It’s also hard to think of a modern system which won’t also allow you to edit text files out of the box (just don’t try using Notepad on Windows and expect sanity!)

It’s often the case that once you introduce formatting of text (bold, italics, different sizes of font) you lose the ability to use plain text. The rise though of simple mark up languages – Markdown, Textile, … – provide an opportunity to keep things simple and still use plain text. The great thing about Markdown and other similar syntaxes is that most examples are perfectly readable even if you don’t know what Markdown is or that the text is anything other than plain text. After a while writing in Markdown becomes second nature.

Who would have trouble reading the following?

# To do lists

Stuff to do at the weekend:
 * Research buying a new car
 * Buy food for Saturday dinner party
 * Clean **toilet** and bath

Trunk Notes stores it’s text data internally in an SQLite database. However you can quickly export all your wiki pages as individual text files. You can also sync text files to a Dropbox account. Images, sounds and other files can be retrieved via iTunes File Sharing or again via Dropbox. Of course I hope that Trunk Notes users never feel the need to move to another app – but if they do then it should be very simple to get their data out of Trunk Notes in a sensible format.

In summary make sure that the apps and programs you trust with your notes and other data don’t stop you from migrating your information somewhere else in the future.

Getting More Out Of Trunk Notes

Trunk Notes is many things – a simple note taking app, an advanced personal wiki, a journaling tool, a place of private information, an iPhone app, a web server in your pocket. There are lots of places from which you can learn more about Trunk Notes. This blog post will give a brief run down of sources of information for getting more out of this powerful app.

SafariScreenSnapz004

First up is the Apps On The Move website. It gives a brief overview of the features in Trunk Notes and a link to the manual.

In addition to the manual (which comes with Trunk Notes) are some extra tools – Mac OS X command line decryption program/TextMate bundle, and Trunk Sync.

IOS SimulatorScreenSnapz012 IOS SimulatorScreenSnapz013

The Trunk Notes app on your iPhone/iPad/iPod Touch has lots of documentation built in. Just tap on the action button in the bottom right hand corner and choose help. You can then easily access the user guide, Markdown syntax, advanced formatting, dynamic content functions and the forum. There is also a handy getting started guide.

SafariScreenSnapz006

The iPad 2 Project Book has a whole chapter on getting started with Trunk Notes. It is a great place if you are a beginner in the world of personal wikis. It also has some excellent information about GarageBand, creating movies on your iPad and more. You can download a sample chapter and the index from the publishers website.

SafariScreenSnapz005

If you want information on more advanced usage the forum is a great tool. I have been astonished with what some users have done with Trunk Notes. Some of the highlights from the forum include:

SafariScreenSnapz007

Trunk Notes uses Markdown to help format your wiki pages. There are loads of great resources available. Try typing in Markdown into Google and start browsing. Some of the most useful include:

SafariScreenSnapz008

The final source of information I am going to mention is blogs. The Apps On The Move blog has a whole host of articles on doing cool stuff with Trunk Notes. There are also other blog articles written by others scattered around the Internet (this one is cool for Mac users)

I hope the links in this blog post have given you some useful sources of information and ideas about how you can get the most out of Trunk Notes. If you have any sources you would like to add please add them to the comments below.

Styling Your Trunk Notes Wiki

In this blog post I am going to add a bit of style to my Trunk Notes wiki.

I am going to add a textured background, change the fonts and how links appear. Here is what I will be aiming for:

IOS SimulatorScreenSnapz011

A quick disclaimer – being slightly colour blind I may have ended up with something rather offensive. I apologise if this is the case!

The first step is to create a texture for the background. I have used Acorn 3 (http://flyingmeat.com/acorn/) to create my background:

Creating a texture

The image is saved as textured_background.png. I am going to upload it to Trunk Notes using iTunes File Sharing:

FinderScreenSnapz001

(In Trunk Notes 2.5.3 you can upload files using Wi-Fi Sharing)

The next step is to enable custom stylesheets. Start the iPhone/iPad Settings app…

IOS SimulatorScreenSnapz006

… scroll down until you see Trunk Notes …

IOS SimulatorScreenSnapz007

… now turn on Custom stylesheet …

IOS SimulatorScreenSnapz008

It might now be necessary to ‘kill’ Trunk Notes, if it is running in the background. To do this double tap your home button, find Trunk Notes, hold down your finger on the icon until it jiggles and then tap the – button.

You can now go back into Trunk Notes. You should now find there is a page called Special:SetStyleSheet:

IOS SimulatorScreenSnapz009

Go to the page and you will find some code written in a simple language called CSS:

IOS SimulatorScreenSnapz010

This tells Trunk Notes how to format your wiki pages. It is used in most of the web pages you find on the Internet.

The CSS file is split into a number of different sections:

  • body – these settings get applied to everything you see on the page (including the page information bar at the top). It is here that I will change to use the textured background and set a different font
  • h1, h2, h3 – these are the headings. So when you write ‘# My Heading’ you are creating the HTML element h1. If I want my main headings to be blue I will modify the h1 selector
  • #info – this is the page information bar that appears at the top of each page containing the time of the last update
  • .highlight, .highlight-selected – when searching for text within a page these styles get applied
  • #contents – the actual wiki page contents, i.e. everything except for the #info bar
  • table, td, th, thead – if you create tables in Trunk Notes how they are formatted is controlled by these selectors
  • a – a link to a web page or document in another app
  • a.wiki-link – a link to another Trunk Notes wiki page
  • a.missing-wiki-link – a link to a Trunk Notes wiki page which hasn’t yet been created
  • html – this actually is everything, it contains the body and all within the body. Here a special style is applied to stop your iPhone resizing the text when rotated into landscape

You might think this all looks a little complicated. It can be, but in this blog post we will keep it simple and change just a few things.

First up is the background. If you have been reading the CSS presented to you in Special:SetStyleSheet you might have spotted that the current background is just white. I will now replace this with a link to my image.

So replace …

background-color: #FFFFFF;

… with …

background-image: url('files/textured_background.png');

(or whatever you have imported your background image as. You can refer to any image stored in Trunk Notes this way.

I am also going to remove the other background- lines. So I am left with the body section looking like this:

body {
    font: medium Arial;
    font-size: 16px;
    background-image: url('files/textured_background.png');
    margin: 0;
}

If I save then I will be presented with this:

MarsEditScreenSnapz001

The next thing I want to is change the font. For a fun guide to what fonts are available on the iPhone in iOS 4 have a look at http://christophmeissner.files.wordpress.com/2010/09/ios4fonts1.png

I’m going to use Trebuchet MS. Substitute the line starting with font: with

font: medium Trebuchet MS;

Next I’m going to make my headings more impressive. To start with an underline on main page headings. To do this I need to modify the h1 section. I will add the line:

border-bottom: 1px solid #333;

This puts 1 pixel high solid border in a dark grey colour. Try changing the 1px to 2px, 3px, etc and experiment with different colours. You can either write the name of popular colours (such as black, red, green) or specify the colour using hexadecimal (see http://www.colorpicker.com/ to easily create these ‘hash’ colours).

Finally I am going to make my links a little fancier. This is now a little more complicated and will leave it to the more advanced reader to figure out what is going on! So I add the following new section to my CSS:

a.wiki-link {
    background-color: yellow;
    border: 1px solid #E0DD1B;
    border-radius: 4px;
    padding-left: 2px;
    padding-right: 2px;
}

Here (again) is the final result:

IOS SimulatorScreenSnapz011

If you want to feel free to download the CSS and background image used in this example.