A great markdown rendering library

As I have been adding features to my macOS GatsbyJS blog post creator it struck me, I should be able to preview my markdown post content.

So, off I rush to GitHub looking for a nice library to use and sure enough, there were plenty of options. I also wanted to use the library as a Swift Package rather than a Cocoapod as an excuse to try working with them directly in Xcode 11.

So with all the requirements met the experimenting began. The one that I have settled with to suit my needs is a library called ‘Down’.

There are a lot of features, I’m barely using them but that might change over time. What I needed to do is the following.

1. Take the attributed string from the content field of the app (the post content).
2. Convert it to Markdown.
3. Display it in a NSTextView nicely formatted to check the layout and read the post.

I am going to work through the steps one by one for you now so you can get started with the library.

Add the Swift Package

First I imported the Swift Package by putting the URL to the GitHub repository in the Xcode project. You can find this by selecting the project in the Project Inspector and then selecting ‘Swift Packages’ in the view to the right.

Build the display

Next up I created a new ViewController on my storyboard along with a custom viewController class.

In the new viewController class I imported the Down library.

Import Down

Next I added a variable for my data object so the segue can send in the data to be displayed. I have a struct that contains the model for a post called MetaItem.

var metaData: MetaItem = MetaItem()

The next part should be no surprise, I also added an NSTextField to the storyboard and connected an @IBOutlet in the controller class.

Now to use the library

Everything takes place in the viewDidLoad(), below is the code that I’ll walk through line by line.

super.viewDidLoad()
let downMdStr = Down(markdownString: metaData.content)
guard let attributedStr = try? downMdStr.toAttributedString() else { return }
previewTextDisplay.textStorage?.insert(attributedStr, at: 0)
previewTextDisplay.textStorage?.foregroundColor = NSColor.textColor

After calling super, I create a constant called downMdStr and call Down, the string comes from the .content property in my data struct.

Next, I try to convert the value of downMdStr to an attributed string, I guard against it just incase something bad happens and as a fail safe I return if the data is empty.

Finally, I insert the newly created attributed string to the NSTextView starting at the first character of the field (0).

One last part is purely for presentation, I assign the NSColor.textColor to the NSTextView font so it will automatically display correctly based on the display mode of macOS (light/dark).

And that, as they say, is all folks. And yes, this post was created in my app and the markdown preview was used to check it as I went along. Tasty dog food!

This library really has helped me out and I want to kudos everyone that contributes to it, yet again open-source for the win.