# 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.org, 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 : .

### An other one ?

Alright, here comes the mighty Cthulhu

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

## 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.org'); 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) :

- cyborg, as used by the first two examples (and a demo on bootswatch.com/cyborg),
- and united (as used one this very page that you are reading!), inspired from ubuntu (and a demo on bootswatch.com/united).

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.org 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

- This (English) translation of a French press article about Mahindra École Centrale, nicely printed to this PDF,
- This (English) translation of another French press article about the future École Centrale Casablanca, nicely printed to a PDF, quickly modified by hand to include an image,
- This small (French) research report on a non-linear Partial Differential Equation, nicely printed to a PDF, with very good support of LaTeX (since this modification),
- This (French) homepage of a programming project on Euler theorems on Eulerian path. I did this as an assignment for my M.Sc. of Computer Science in 2014, and it was also a good training for one oral exam of the French national competitive examination to become a prep' school professor in Mathematics and Computer Science (for which I have been ranked 23rd among 795 in 2014!).

> 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?

- Improve the SSL certificate? As that screenshot shows, SSL is available, but the certificate is not valid (it has been signed only for bitbucket.org and www.bitbucket.org):

- Maybe host it on a CDN?

- Hack something to force using local cached version of the script and stylesheets rather than downloading them every time?

- More "quick access" buttons on the top-navbar? (there is already a button to use Squirt (as shown in the example below), one to activate MathJax, and one to test a Google Analytics Beacon image.)

- … and any new idea is most surely welcome!

### Some people are using it or talking about it!

- This question asked on Github on the 1st of May of 2014 by hardly about the old strapdown repository. To answer that question: the main difference is than I am still interested and eager to work on my StrapDown.js, but it seems to not be the case of the previous developper.
- These guys at Quantego are using my StrapDown.js for that small and interesting page.
- I got an email (January 2015) from one fellow working for www.nexirius.com, and so I created the demos on tables to answer him: example #6 and example #7.
- In March 2016, someone asked my to add more options, like `nonavbarfixed=y` and `keepicon=y`, and add more themes, which I did, of course.

> 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

- Markdown;
- JavaScript;
- CSS 3.

### 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.