| <!DOCTYPE html><html><head><meta charset="utf-8"/><title>StrapDown.js on lbesson.bitbucket.org/md</title></head><body><xmp theme="cyborg"> |
| # StrapDown.js |
| **StrapDown.js** is an awesome **on-the-fly** [Markdown](https://en.wikipedia.org/wiki/Markdown) |
| to [HTML](https://en.wikipedia.org/wiki/HTML) [text processor](https://en.wikipedia.org/wiki/Compiler). |
| |
| ## Features |
| - *Directly write your documents in Markdown*, and let the browser do the boring *compilation* steps, |
| - no need for CSS, theming or painless styling : *StrapDown.js* is already *friggin' beautiful*, and *responsive*, |
| - *quick* and *secure*, thanks to *bitbucket* and its SSL (even if the certificate is not valid for [lbesson.bitbucket.org](https://lbesson.bitbucket.org), it is still secure), |
| - an almost perfect support for text-only browsers : pure Markdown is simpler to read than complicated HTML full of javascript, |
| - no external dependencies other than itself, |
| - no spying, no logging, no leaking of your pages (only [Google Analytics](http://besson.qc.to/beacon.html) with the default template, and [rum.js from bitbucket hosting server](https://confluence.atlassian.com/display/BITBUCKET/Publishing+a+Website+on+Bitbucket#PublishingaWebsiteonBitbucket-TechnicalFeaturesandLimitationsofthisFeature)). |
| |
| - And, the last but not the least, *experimental* embedding of the even awesomer [SquirtFR](https://lbesson.bitbucket.org/squirt) bookmarklet to read *as quickly as Lucky Luke*. |
| |
| ## Defaults ? |
| - It might get slow for *long* pages (3000 lines seem to be too much), |
| - a reduced support for browsers *without javascript* or *with javascript disabled* (the pages are still readable, but really ugly), |
| - hosted on bitbucket, which is wonderful but might not be always available (~ 3 hours of maintenance every 6 months). |
| |
| Concretly, bitbucket is always *up*, *secured* and *quick* (ooh, 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 [StrapDown.js.zip](https://bitbucket.org/lbesson/lbesson.bitbucket.org/downloads/StrapDown.js.zip) and embed it on your own server. |
| |
| > ## A quick "thank you" to the initial project |
| > My version of StrapDown.js is a fork of [strapdownjs.com](http://strapdownjs.com), a cool project that kinda seems dead by now. |
| |
| ---- |
| |
| ## How to start using StrapDown.js ? |
| **Just follow this short tutorial** : |
| |
| ### [Default template to use](example0.html) *(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 |
| <!DOCTYPE html><html><head><title>A StrapDown.js template</title></head><body><textarea theme="cyborg"> |
| ### Write here in Markdown rather than in HTML |
| > This document is empty right now. Fill it out with awesome content ! |
| |
| </textarea><script type="text/javascript" src="//lbesson.bitbucket.org/md/strapdown.js?src=example0"></script></body></html> |
| ``` |
| |
| ### [A first example](example1.html) *(you can click this to see it)* |
| There we use some markup. |
| |
| ```markdown |
| <!DOCTYPE html><html><head><meta charset="utf-8"/><title>« My first test with StrapDown.js »</title></head><body><textarea theme="cyborg"> |
| # 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. |
| </textarea><script type="text/javascript" src="//lbesson.bitbucket.org/md/strapdown.js?src=example1"></script></body></html> |
| ``` |
| |
| ### [A second example](example2.html) *(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 |
| <!DOCTYPE html><html><head><title>Awesome second example with StrapDown.js</title></head><body><textarea theme="united"> |
| # 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 page, |
| 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](https://ga-beacon.appspot.com/UA-38514290-14/example2.html "Thanks to ga-beacon"). |
| |
| ### An other one ? |
| Alright, here comes the mighty Cthulhu ![Logo Squirt](../squirt/images/logo.png "Logo Cthulhu") |
| |
| ### A last one, because it's dangerous to go alone : |
| |
| ![Logo Take this from dotcore](../squirt/images/takethis.jpg "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. |
| |
| <script type="text/javascript"> |
| (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'); |
| </script> |
| <noscript> |
| The previous parapraph was supposed to include Google Analytics web monitoring tool, |
| but hey, you are browsing without JavaScript enabled, what can I do for it ? <br/> |
| 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). |
| </noscript> |
| |
| ## That's it |
| This was a brief overview, to show the basic use of [StrapDown.js](index.html). |
| </textarea><script type="text/javascript" src="//lbesson.bitbucket.org/md/strapdown.js?src=example2"></script></body></html> |
| ``` |
| |
| ### Themes |
| Only two themes from [strapdownjs.com]() are pretty enough to be included : |
| |
| - [cyborg](http://bootswatch.com/cyborg) for a demo, |
| - [united](http://bootswatch.com/united) for a demo. |
| |
| More will soon be availables ! |
| |
| ### 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](strapdown2pdf.html). |
| |
| ---- |
| |
| # Cloning |
| As of now, StrapDown.js does **not** have it own git repository. |
| And I don't want to, because it is cleaner to let it live on http://lbesson.bitbucket.org/md. |
| |
| But, there, you can download this not up-to-date version of the *md* subdir of my [lbesson.bitbucket.org](https://bitbucket.org/lbesson/lbesson.bitbucket.org/src/master/md/) repository : |
| [StrapDown.js.zip](https://bitbucket.org/lbesson/lbesson.bitbucket.org/downloads/StrapDown.js.zip) |
| (and [its PGP signature](https://bitbucket.org/lbesson/lbesson.bitbucket.org/downloads/StrapDown.js.zip.asc).) |
| |
| ---- |
| |
| # Future features |
| - Maybe host it on a *CDN*, |
| - More themes, |
| - Hack something to force using local cached version of the script and stylesheets rather than download them every time ? |
| |
| ---- |
| |
| # About |
| ### Hacked by [Lilian Besson](https://bitbucket.org/lbesson) |
| |
| ### Languages |
| - JavaScript; |
| - CSS 3. |
| |
| ### License |
| This project is released under the **GPLv3 license**, for more details, |
| take a look at the [LICENSE](http://besson.qc.to/LICENSE.html) file in the source. |
| |
| *Basically, that allow you to use all or part of the project for you own business.* |
| </xmp><script type="text/javascript" src="strapdown.js"></script><img alt="GA|Analytics" style="visibility: hidden; display: none;" src="https://ga-beacon.appspot.com/UA-38514290-14/md/index.html?pixel"/></body></html> |