Typora, perfect Markdown

I love Typora for editing Markdown. It really unites everything I ever expected from an editor of that type. Of course, I’m writing this article with Typora as well and process it with my static website builder SeaSite.

Adding a Custom Theme

Although it already comes with great themes for different editor requirements, I’d still love to get a preview of the content that is as close as possible to what the later published text will look like.

And as to be expected Typora lets you customize the look and some feel by simply dropping in a CSS file. That is what I did, I got to the theme folder via the apps preferences and added a symbolic link to my custom CSS:

ln -s <path_to_my_css> holtwick.css

After a restart it will appear in the menu like this:

mage-20180321174319

Perfect! Now to reload the style after any update to the CSS I just select the theme again from the menu and it will reload.

Reuse existing CSS

Of course, I wanted to reuse as much of the CSS I already have. To achieve that I’ve split up the CSS into some LESS files. In text.less I put the basic text styles like h1 , blockquote etc.

I then use two more LESS files, one for the website and the other to be linked with Typora:

// Website
.blog {
    @import "text";
}

// Typora
#write {
    @import "text";
}

As you might notice, the Typora stuff needs to be wrapped into #write to not unintentionally affect other areas of the window like the navigation.

You can the add some fine tuning to it, like adding styles for .md-meta-block which would be the YAML property area.

And here is the final design, attention, it might be a deja vu ;)

mage-20180321175628

I hope you enjoy Typora as much as I do and I send a big compliment to its author from my side.

Published on March 21, 2018

 
Back to posts listing