Wednesday 17 July 2013

Markdown - StackEdit's HTML export template with highlighting by using Prettify or Highlight.js and personalized markDown.css

StackEdit is a Markdown Extra editor with MathJax (to display formulas using TeX Math syntax, see HERE if you are interested to show them on Blogger) and Prettify or highlight.js (for code highlighting) support.
It is a wonderful option when it comes to publish some HTML, even with a custom CSS!
Markdown is a text-to-HTML conversion tool for web writers. Markdown allows you to write using an easy-to-read, easy-to-write plain text format, then convert it to structurally valid XHTML (or HTML).


If you are interested in more options to try, take a look at the article on Mashable.

The documentation, taken from the official GitHub project (it is even an opensource project), says:

StackEdit
=========

StackEdit is a free, open-source Markdown editor based on PageDown, the Markdown library used by Stack Overflow and the other Stack Exchange sites.

### StackEdit can:
 
 - Manage multiple Markdown documents online or offline
 - Export your documents in Markdown or HTML and format it using a template
 - Synchronize your Markdown documents in the Cloud
 - Edit existing Markdown documents from Google Drive, Dropbox and your local hard drive
 - Post your Markdown document on Blogger/Blogspot, WordPress, Tumblr
 - Publish your Markdown document on GitHub, Gist, Google Drive, Dropbox or any SSH server
 - Share a link to a Markdown document that renders it in a nice viewer
 - Show statistics about your document
 - Convert HTML to Markdown

### Features:

 - Real-time HTML preview with Scroll Link feature to bind editor and preview scrollbars
 - Markdown Extra support and Prettify/Highlight.js syntax highlighting
 - LaTeX mathematical expressions using MathJax
 - WYSIWYG control buttons
 - Configurable layout
 - Theming support with multiple themes available
 - A la carte extensions
 - Offline editing
 - Online synchronization using Google Drive and Dropbox
 - One click publish on Blogger, Dropbox, Gist, GitHub, Google Drive, SSH server, Tumblr, WordPress

The wonder comes when you can set a custom template:
>Settings >Publish >Template
This makes possible to export a valid HTML which has included the script to load MathJax, Prettify and a custom CSS by going to:
>Save as... >Save using template
My custom CSS is an extension of the beautiful Markdown.css.
If you plan to use this modified style-sheet (the code is shown in the end of the post), it is better to download and host by yourself; remember to change the link in the template to your new location.

The Welcome Document of StackEdit will look as this (live preview):

JS Bin on jsbin.com

What follows is my template for StackEdit:

The CSS I extended and used is shown below; if you like, feel free to use! (please, add a link to this post in the footer)

No comments:

Post a Comment