StrapDown.js

StrapDown.js is an awesome on-the-fly Markdown to HTML text processor.

Features

StrapDown.js is already pretty advanced, as you can see by yourself with this very page (powered by StrapDown.js of course).

  1. Directly write your documents in Markdown, and let the browser do the boring compilation steps,
  2. no need for CSS, theming or painful styling: StrapDown.js is already friggin' beautiful, and responsive,
  3. quick and secure, thanks to Bitbucket and their SSL support (even if the certificate is not valid for https://lbesson.bitbucket.io, it is still secure),
  4. comes with many examples: first, second, third, 4th, 5th, 6th, 7th, 8th, 9th, 10th...
  5. an almost perfect support for text-only browsers (as w3m, links, or elinks): pure Markdown is simpler to read than complicated HTML full of javascript, images (or worse),
  6. no external dependencies other than itself (and MathJax if you want to include it),
  7. no spying, no logging, no external leaking of your pages (and Google Analytics with a 1px beacon image can be included with an option, and unfortunately rum.js from Bitbucket hosting server),
  8. an excellent support of MathJax, as shown in this example or that one,
  9. and, the last but not the least, an experimental embedding of the awesome SquirtFR bookmarklet to read as quickly as Lucky Luke.
  10. Note : You can also use https://cdn.rawgit.com/Naereen/StrapDown.js/master/strapdown.min.js to have a true HTTPS support, by loading the script from a quick and secure (HTTPS-aware) CDN.

Drawbacks?

But there is also have a few things you need to know before using it:

  1. It might get slow for very long pages, even if a 3000-line document is handled very well and quickl (you can test by yourself with this long document),
  2. a reduced support for browsers without javascript or with javascript disabled (the pages are still readable, but really ugly),
  3. hosted on Bitbucket, which is wonderful but might not be always available (~ 3 hours of maintenance every 6 months, as shown with a small screenshot below).

Concretely

Concretely, Bitbucket is always up, secured and quick (oooh, and Bitbucket is also awesome, completely free, and awesome too). Yeah, Bitbucket is so awesome that I had to say it twice, you read it correctly!

But if you prefer, feel free to download the project (with StrapDown.js.zip) and upload it somewhere on your own server, or locally on your machine.

The script is also hosted on GitHub and so it can be loaded quickly and securely from cdn.rawgit.com: https://cdn.rawgit.com/Naereen/StrapDown.js/master/strapdown.min.js!

A quick "thank you" to the initial project

My version of StrapDown.js is a fork of strapdownjs.com, a cool project that kinda seems dead by now.


How to start using StrapDown.js ?

Just follow this short tutorial :

1) Default template to use (you can click this to see it)

Create an empty file, save it to mytext.html (yes, '.html' as HTML, but you will write in Markdown in no time), and then copy and paste the following 5 lines :

```markdown

Write here in Markdown rather than in HTML

This document is empty right now. Fill it out with awesome content !

```

2) A first example (you can click this to see it)

There we show how to use some basic markup.

```markdown

This is a Markdown document

You can now write your web page in Markdown.

You opened a textarea tag, but a xmp tag works as well.

And, yes, it is as simple as one HTML line at the beginning and one HTML line at the end of this document. ```



3) A second example (you can click this to see it)

There we embed two images, and describe a little more how cool is StrapDown.js ! We also use another theme (united).

```markdown

This is a Markdown document

You can now write your web page in Markdown. You opened a textarea tag, but a xmp tag works as well. And, yes, it is as simple as one HTML line at the beginning and one HTML line at the end of this document.

What to say more

Feel free to use it, redistribute it etc, under the condition of the GPLv3 License.

Only for textual, simple documents

StrapDown.js is awesome to quickly build nice-looking web pages, but it might not be efficient for anything more complicated, as it is really not designed for it.

Add a picture ?

With Markdown syntax, it's easy : GA|Analytics.

An other one ?

Alright, here comes the mighty Cthulhu Logo Squirt

A last one, because it's dangerous to go alone :

Logo Take this from dotcore

Add anything you want, it might work

For instance, you can add use Google Analytics to monitor the page's activity, with including a piece of Javascript code, before or after closing the textarea tag.

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create','UA-38514290-14','lbesson.bitbucket.io'); ga('send','pageview'); The previous paragraph was supposed to include Google Analytics web monitoring tool, but hey, you are browsing without JavaScript enabled, what can I do for it ?
Maybe you are using a text-only browser (w3m, links, elinks ? I love elinks !), or a 19th-century IE, or maybe you disabled JavaScript globally (which is kinda stupid) or site-by-site (with NoScript, as I do, which is brilliant, and safer).

That's it

This was a brief overview, to show the basic use of StrapDown.js. ```

4) More examples, with MathJax enabled

StrapDown.js comes with an easy and excellent support of the incredible MathJax, as shown in these three examples: example n°3 and example n°4, and the last one which shows a new and quicker way to include MathJax (from StrapDown v0.5).

5) An example about tables

This example n°6 shows several examples of tables, written in Markdown and rendered as pretty (HTML+CSS !) tables in your browser. (new!)



Themes

There is now 18 different themes, coming from http://bootswatch.com/united and from the original project (strapdownjs.com) :

I recently added some new themes, and now there is these 9 new themes.


Cloning the StrapDown.js project?

git clone https://github.com/Naereen/StrapDown.js

A zip archive of the project

You can also easily download this up-to-date version of the md subdir of my lbesson.bitbucket.io repository: StrapDown.js.zip (and its PGP signature).


Printing to a nice looking PDF?

Rather than use the built-in "Print to a PDF" function of your browser, you should consider using StrapDown2PDF. It has a perfect support for Markdown markup.

Warning: but the LaTeX / MathJax support is still limited.

Some examples of a good PDF printed version of a StrapDown.js powered page

You might also be interested by a way to make a StrapDown.js-powered document autonomous, ie. not using the script anymore. For this purpose, I also wrote strapdown2html.py a Python program designed to do this (called, no surprise, strapdown2html.py).


Future features or ideas?

Some people are using it or talking about it!

If you are using (or have used) my StrapDown.js, you can send an email, or contact me if you want, I would love to hear any feedback from you!


About

Forged by Lilian Besson (lbesson on bitbucket).

© 2013-2016

Languages

License

This project is released under the GPLv3 license, for more details, take a look at the LICENSE file in the source.

Basically, that allow you to use all or part of the project for you own business.