Blogging with Windows Live Writer is often a complicated thing. Like with every HTML editor you need to have good knowledge of the HTML language. If you are not careful, you overwrite the default fonts, font width, colors and other styles. If you change your windows installation, transferring the old blogs to the new system becomes a nightmare of googling for paths and other info about where Live Writer stores its information.
Blogging in Markdown is much more straight forward. You can concentrate on your content and not on the style. Markdown has a limited set of formatting options like headline 1 to 5 (# .. #####) , italic, bold, ordered and unordered list, images and links. And you can write markdown with every simple text editor and save it as a file (*.md). If you are using a special markdown editor, you may have WYSIWYG of your writings and your Markdown can be automatically converted to HTML.
The new Markdown editor from Rick Strahl (MarkDown Monster) brings both worlds together: easy writing in MarkDown and automatically uploading as HTML to your blog (MM understands MetaWeblogAPI and works perfect with DNN blog). And if you are using SnagIt by TechSmith as your screenshot tool, MM has a special plugin for easy integration of screenshots into your blog.
What makes it really easy to work with Markdown Monster is its ability to Paste Html from clipboard into the program and vice versa. So even copying parts from a web page and inserting it into your blog post is a piece of cake!
As a software developer it is important to have an easy way to post source code snippets. MM uses a whole bunch of styles for formatting these snippets:
Source code formatting with MM
To insert a code snippet in MarkDown, you type 3 backticks ``` , followed by the source code type (eg. csharp for C#, see highlightjs.org for more information ). After this you insert in a new row your source code and end the snippet with another 3 backticks in another new row.
''' csharp
var info = "your source code goes here";
'''
When its converted from MarkDown to HTML, it is changed to the following:
<pre>
<code class="csharp">
var info = "your source code goes here";
</code>
</pre>
Finally, in the blog it looks like:
var info = "your source code goes here";
Add this is where the highlighting magic is doing its job! In order to get this running in DNN blog, you have to do the following steps:
Install MM Syntax highlighting in DNN blog:
- Copy C:\Program Files\Markdown Monster\PreviewThemes\Scripts\highlightjs\highlight.pack.js to ~/DesktopModules/Blog/Templates/_default/js/
- Copy preferred style from C:\Program Files\Markdown Monster\PreviewThemes\Scripts\highlightjs\styles to * ~/DesktopModules/Blog/Templates/_default/css/*
- Add this snippet to the footer in Module Settings (or skin or whereever you want):
<script>
$(document).ready(function() {
$('pre code').each(function(i, block) {
hljs.highlightBlock(block);
});
});
</script>
Javascript files and CSS files in these folders are loaded automatically by the blog module, so thats all you have to do. If you do not use the builtin SyntaxHighlighter js (shCore etc.) you can delete these, so that they are not loaded any more
Uploading your blog post
When you want to upload your post, you have to enter some metadata first:
The Title is taken from the header_1 line that typically starts a post. The abstarct is the text taht is shown as teaser text in the list of multiple posts. Categories must be existing in your blog (otherwise they are ignored). Keywords could be new, they are added then to the list of keywords. At least you have to select to which blog you want to post (3rd tab of this dialog is for defining blog parameters). The Post ID is empty if you first add the post to your blog. Aftrerwards this information is filled and publishing updates the blog post instead of creating a new one.
All these meta infos are saved as part of your document as XML at the end of the .md file.
If you want to learn more about Markdown Monster, see this youtube video created by the master himself!