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, WordPressThe wonder comes when you can set a custom template:
>Settings >Publish >TemplateThis 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 templateMy 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):
What follows is my template for StackEdit:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- | |
| 1: Using prettify | |
| --> | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title><%= documentTitle %></title> | |
| <link rel="stylesheet" type="text/css" href="https://www.dropbox.com/s/atz4kqwayz4hlhk/markDown.css?raw=1"> | |
| <script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script> | |
| <script type="text/javascript" src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=desert"></script> | |
| </head> | |
| <body><%= documentHTML %></body> | |
| </html> | |
| <!-- | |
| 2: Using highlight.js | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title><%= documentTitle %></title> | |
| <link rel="stylesheet" type="text/css" href="https://www.dropbox.com/s/atz4kqwayz4hlhk/markDown.css?raw=1"> | |
| <script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" type="text/javascript"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/styles/agate.min.css"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/highlight.min.js"></script> | |
| <script>hljs.initHighlightingOnLoad();</script> | |
| </head> | |
| <body><%= documentHTML %></body> | |
| </html> | |
| --> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| * Copyright 2013 Alex Pacini. | |
| * | |
| * Licensed under the Apache License, Version 2.0 (the "License"); | |
| * you may not use this file except in compliance with the License. | |
| * You may obtain a copy of the License at | |
| * | |
| * http://www.apache.org/licenses/LICENSE-2.0 | |
| * | |
| * Unless required by applicable law or agreed to in writing, software | |
| * distributed under the License is distributed on an "AS IS" BASIS, | |
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | |
| * See the License for the specific language governing permissions and | |
| * limitations under the License. | |
| * | |
| * Some content is copyrighted by Twitter, Inc., and also released under an | |
| * Apache License; these sections are noted in the source. | |
| * | |
| * The CSS is based on this template: | |
| * http://kevinburke.bitbucket.org/markdowncss/ | |
| *[(Copyright 2011 Kevin Burke unless otherwise noted. | |
| * Licensed under the Apache License, Version 2.0 (the "License");] | |
| * Then it was extended to cover the Markdown Extra and applied some light changes. | |
| */ | |
| body{ | |
| margin: 0 auto; | |
| font-family: Georgia, Palatino, serif; | |
| color: #444444; | |
| line-height: 1; | |
| max-width: 960px; | |
| padding: 30px; | |
| } | |
| h1, h2, h3, h4 { | |
| color: #111111; | |
| font-weight: 400; | |
| } | |
| h1, h2, h3, h4, h5, p { | |
| margin-bottom: 24px; | |
| padding: 0; | |
| } | |
| h1 { | |
| font-size: 48px; | |
| } | |
| h2 { | |
| font-size: 36px; | |
| /* The bottom margin is small. It's designed to be used with gray meta text | |
| * below a post title. */ | |
| margin: 24px 0 6px; | |
| } | |
| h3 { | |
| font-size: 24px; | |
| } | |
| h4 { | |
| font-size: 21px; | |
| } | |
| h5 { | |
| font-size: 18px; | |
| } | |
| a { | |
| color: #0099ff; | |
| margin: 0; | |
| padding: 0; | |
| vertical-align: baseline; | |
| text-decoration: none; | |
| } | |
| img[alt=banner] { | |
| width: 100%; | |
| height: 100%; | |
| margin-left: -10%; | |
| } | |
| a:hover { | |
| text-decoration: none; | |
| color: #ff6600; | |
| } | |
| a:visited { | |
| color: purple; | |
| text-decoration: none; | |
| } | |
| ul, ol { | |
| padding: 0; | |
| margin: 0; | |
| } | |
| li { | |
| line-height: 24px; | |
| } | |
| li ul, li ol { | |
| margin-left: 24px; | |
| } | |
| p, ul, ol { | |
| font-size: 16px; | |
| line-height: 24px; | |
| max-width: 760px; | |
| } | |
| pre { | |
| border-radius: 4px; | |
| padding: 10px 24px; | |
| max-width: 800px; | |
| white-space: pre-wrap; | |
| } | |
| code { | |
| border-radius: 4px; | |
| font-family: Consolas, Monaco, "Andale Mono", monospace; | |
| line-height: 1.5; | |
| font-size: 13px; | |
| } | |
| aside { | |
| display: block; | |
| float: right; | |
| width: 390px; | |
| } | |
| blockquote { | |
| border-left:.5em solid #eee; | |
| padding: 0 2em; | |
| margin-left:0; | |
| max-width: 476px; | |
| } | |
| blockquote cite { | |
| font-size:14px; | |
| line-height:20px; | |
| color:#bfbfbf; | |
| } | |
| blockquote cite:before { | |
| content: '\2014 \00A0'; | |
| } | |
| blockquote p { | |
| color: #666; | |
| max-width: 460px; | |
| } | |
| hr { | |
| width: 540px; | |
| text-align: left; | |
| margin: 30px -20px; | |
| color: #999; | |
| } | |
| dt { | |
| font-weight: bold; | |
| } | |
| dt, dd { | |
| margin-top: 5px; | |
| margin-bottom: 10px; | |
| } | |
| dd { | |
| margin-left: 40px; | |
| } | |
| table { | |
| margin-bottom: 20px; | |
| max-width: 100%; | |
| background-color: transparent; | |
| border-collapse: collapse; | |
| } | |
| table th, | |
| table td { | |
| padding: 8px; | |
| line-height: 20px; | |
| text-align: left; | |
| vertical-align: top; | |
| border-top: 1px solid #dddddd; | |
| } | |
| table th { | |
| font-weight: bold; | |
| } | |
| table thead th { | |
| vertical-align: bottom; | |
| } | |
| table caption + thead tr:first-child th, | |
| table caption + thead tr:first-child td, | |
| table colgroup + thead tr:first-child th, | |
| table colgroup + thead tr:first-child td, | |
| table thead:first-child tr:first-child th, | |
| table thead:first-child tr:first-child td { | |
| border-top: 0; | |
| } | |
| table tbody + tbody { | |
| border-top: 2px solid #dddddd; | |
| } | |
| .footnote { | |
| vertical-align: top; | |
| position: relative; | |
| top: -0.5em; | |
| font-size: 0.8em; | |
| } | |
| .tooltip li { | |
| line-height: 1.4; | |
| } | |
| /* Code below this line is copyright Twitter Inc. */ | |
| button, | |
| input, | |
| select, | |
| textarea { | |
| font-size: 100%; | |
| margin: 0; | |
| vertical-align: baseline; | |
| *vertical-align: middle; | |
| } | |
| button, input { | |
| line-height: normal; | |
| *overflow: visible; | |
| } | |
| button::-moz-focus-inner, input::-moz-focus-inner { | |
| border: 0; | |
| padding: 0; | |
| } | |
| button, | |
| input[type="button"], | |
| input[type="reset"], | |
| input[type="submit"] { | |
| cursor: pointer; | |
| -webkit-appearance: button; | |
| } | |
| input[type=checkbox], input[type=radio] { | |
| cursor: pointer; | |
| } | |
| /* override default chrome & firefox settings */ | |
| input:not([type="image"]), textarea { | |
| -webkit-box-sizing: content-box; | |
| -moz-box-sizing: content-box; | |
| box-sizing: content-box; | |
| } | |
| input[type="search"] { | |
| -webkit-appearance: textfield; | |
| -webkit-box-sizing: content-box; | |
| -moz-box-sizing: content-box; | |
| box-sizing: content-box; | |
| } | |
| input[type="search"]::-webkit-search-decoration { | |
| -webkit-appearance: none; | |
| } | |
| label, | |
| input, | |
| select, | |
| textarea { | |
| font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| font-size: 13px; | |
| font-weight: normal; | |
| line-height: normal; | |
| margin-bottom: 18px; | |
| } | |
| input[type=checkbox], input[type=radio] { | |
| cursor: pointer; | |
| margin-bottom: 0; | |
| } | |
| input[type=text], | |
| input[type=password], | |
| textarea, | |
| select { | |
| display: inline-block; | |
| width: 210px; | |
| padding: 4px; | |
| font-size: 13px; | |
| font-weight: normal; | |
| line-height: 18px; | |
| height: 18px; | |
| color: #808080; | |
| border: 1px solid #ccc; | |
| -webkit-border-radius: 3px; | |
| -moz-border-radius: 3px; | |
| border-radius: 3px; | |
| } | |
| select, input[type=file] { | |
| height: 27px; | |
| line-height: 27px; | |
| } | |
| textarea { | |
| height: auto; | |
| } | |
| /* grey out placeholders */ | |
| :-moz-placeholder { | |
| color: #bfbfbf; | |
| } | |
| ::-webkit-input-placeholder { | |
| color: #bfbfbf; | |
| } | |
| input[type=text], | |
| input[type=password], | |
| select, | |
| textarea { | |
| -webkit-transition: border linear 0.2s, box-shadow linear 0.2s; | |
| -moz-transition: border linear 0.2s, box-shadow linear 0.2s; | |
| transition: border linear 0.2s, box-shadow linear 0.2s; | |
| -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); | |
| -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); | |
| box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); | |
| } | |
| input[type=text]:focus, input[type=password]:focus, textarea:focus { | |
| outline: none; | |
| border-color: rgba(82, 168, 236, 0.8); | |
| -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6); | |
| -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6); | |
| box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6); | |
| } | |
| /* buttons */ | |
| button { | |
| display: inline-block; | |
| padding: 4px 14px; | |
| font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| font-size: 13px; | |
| line-height: 18px; | |
| -webkit-border-radius: 4px; | |
| -moz-border-radius: 4px; | |
| border-radius: 4px; | |
| -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); | |
| -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); | |
| box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); | |
| background-color: #0064cd; | |
| background-repeat: repeat-x; | |
| background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd)); | |
| background-image: -moz-linear-gradient(top, #049cdb, #0064cd); | |
| background-image: -ms-linear-gradient(top, #049cdb, #0064cd); | |
| background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd)); | |
| background-image: -webkit-linear-gradient(top, #049cdb, #0064cd); | |
| background-image: -o-linear-gradient(top, #049cdb, #0064cd); | |
| background-image: linear-gradient(top, #049cdb, #0064cd); | |
| color: #fff; | |
| text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); | |
| border: 1px solid #004b9a; | |
| border-bottom-color: #003f81; | |
| -webkit-transition: 0.1s linear all; | |
| -moz-transition: 0.1s linear all; | |
| transition: 0.1s linear all; | |
| border-color: #0064cd #0064cd #003f81; | |
| border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); | |
| } | |
| button:hover { | |
| color: #fff; | |
| background-position: 0 -15px; | |
| text-decoration: none; | |
| } | |
| button:active { | |
| -webkit-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); | |
| -moz-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); | |
| box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); | |
| } | |
| button::-moz-focus-inner { | |
| padding: 0; | |
| border: 0; | |
| } |
No comments:
Post a Comment