Created
November 9, 2014 11:27
-
-
Save roachhd/5e8e59786b55f7afe17d to your computer and use it in GitHub Desktop.
Strapdown.js more easy static files using markdown, bootstrap, JavaScript and bootswatch
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
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Strapdown.js - Instant and elegant Markdown documents</title> | |
<meta name="description" content="Create Markdown documents using JavaScript and Bootstrap themes" /> | |
<script type="text/javascript"> | |
var _gaq = _gaq || []; | |
_gaq.push(['_setAccount', 'UA-924459-10']); | |
_gaq.push(['_trackPageview']); | |
(function() { | |
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; | |
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; | |
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); | |
})(); | |
</script> | |
</head> | |
<body> | |
<textarea theme="united" style="display:none;"> | |
# Strapdown.js | |
Strapdown.js makes it embarrassingly simple to create elegant Markdown documents. **No server-side compilation required.** Use it to quickly document your projects, create tutorials, home pages, etc. (For example, the page you are reading was generated by Strapdown). | |
**Simply copy the HTML template below and drop it on any static file server**: | |
```html | |
<!DOCTYPE html> | |
<html> | |
<title>Hello Strapdown</title> | |
<xmp theme="united" style="display:none;"> | |
# Markdown text goes in here | |
## Chapter 1 | |
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore | |
et dolore magna aliqua. | |
## Chapter 2 | |
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut | |
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse | |
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in | |
culpa qui officia deserunt mollit anim id est laborum. | |
</xmp> | |
<script src="http://strapdownjs.com/v/0.2/strapdown.js"></script> | |
</html> | |
``` | |
### Features | |
+ Search-engine friendly | |
+ Cross-browser compatible (tested with mobile Safari, IE 8/9, Firefox, Chrome) | |
+ Github-flavored Markdown (tables, syntax highlighting, etc) | |
+ Themeable | |
### Themes | |
Bootstrap themes from [Bootswatch.com](http://bootswatch.com) are included for your convenience. Simply include the attribute `theme` in your `<xmp>` tag with one of the following theme names (default is vanilla Bootstrap): | |
![Bootswatch](bootswatch.png) | |
### Self-hosting | |
For convenience the library is hosted at `strapdownjs.com` (as in the source above), but if you prefer to host it yourself make sure to save *all* files contained in `/v/<version_number>`, as the library dynamically loads all necessary stylesheets, etc. | |
### Limitations | |
It's an unlikely scenario, but since Strapdown uses the `<xmp>` tag to wrap your Markdown (so that users don't have to escape special HTML characters), your text can't contain the string `</xmp>`. | |
### Credits | |
All credit goes to the projects below that make up most of Strapdown.js: | |
+ [Marked](https://github.com/chjj/marked/) - Fast Markdown parser in JavaScript | |
+ [Google Code Prettify](http://code.google.com/p/google-code-prettify/) - Syntax highlighting in JavaScript | |
+ [Twitter Bootstrap](http://twitter.github.com/bootstrap/) - Beautiful, responsive CSS framework | |
+ [Bootswatch](http://bootswatch.com) - Additional Bootstrap themes | |
<hr/> | |
<div style="background:#fafaff; min-height:50px; padding:0 5px; margin:0"> | |
<div style="float:left;"> | |
<img style="width:50px; margin:0; margin-right:10px;" src="https://twitter.com/images/resources/twitter-bird-light-bgs.png"/> | |
</div> | |
<div style="padding-top:15px; padding-bottom:10px;"> | |
Follow me on Twitter: <a href="http://twitter.com/r2r">@r2r</a> | |
</div> | |
</div> | |
<a href="https://github.com/arturadib/strapdown"><img style="position: fixed; top: 0; right: 0; border: 0; z-index: 1000; margin: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a> | |
</textarea> | |
<script src="v/0.2/strapdown.js"></script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment