This repository has been archived by the owner on Dec 19, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 44
/
index.html
97 lines (64 loc) · 4.43 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE html> <html> <head> <title>Strapdown.js with MathJax support - Instant and elegant Markdown documents</title> <meta charset="utf-8"> <meta name="description" content="Create Markdown documents using JavaScript and Bootstrap themes" />
<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-50857776-1', 'ztx.io');
ga('send', 'pageview');
</script>
</head>
<body> <textarea theme="cerulean" style="display:none;">
# Strapdown.js with MathJax support
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 add two lines to your markdown text, and it just become live in browser!!!**:
``` markdown
<!DOCTYPE html> <html> <title>Hello, Strapdown</title> <meta charset="utf-8"> <xmp theme="cerulean" style="display:none;">
# Markdown Title
All your awesome markdown content goes here.
## Chapter 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.
## Chapter 2
MathJax is now supported, so the following will rocks!
$$ \left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right) $$
</xmp> <script src="http://cdn.ztx.io/strapdown/strapdown.min.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)
+ highlight.js syntax highlighting with sublime default theme monokai(tweaked), my favorite syntax highlighting!
+ Themeable
+ And it supports MathJax! Example here:
$$ \left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right) $$
For more, open [Strapdown MathJax Test Page](test.html)
### 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):
### Self-hosting
For convenience the library is hosted at `cdn.ztx.io` (as in the source above), but if you prefer to host it yourself make sure include those files
- strapdown.min.js (in build directory after you run `grunt`)
- strapdown.min.css (in build directory after you run `grunt`)
- themes/bootstrap-responsive.min.css (in vendor directory)
- themes/cerulean.min.css (or other themes file you use)
- themes/font.woff (or other font file you use)
### 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:
+ [Strapdown](http://strapdownjs.com) - Original strapdown by [r2r](http://twitter.com/r2r)
+ [MathJax](http://www.mathjax.org/) - MathJax, Beautiful math in all browsers
+ [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
+ [Highlight.js](http://highlightjs.org/) - Syntax highlighting in Javascript
+ [Twitter Bootstrap](http://twitter.github.com/bootstrap/) - Beautiful, responsive CSS framework
+ [Bootswatch](http://bootswatch.com) - Additional Bootstrap themes
+ [Stackedit](https://github.com/benweet/stackedit) - I borrowed some mathjax preprocessing code from this project. Thanks. And [https://stackedit.io/](https://stackedit.io/) is a great project!
+ [persist.js](http://pablotron.org/?cid=1557) - Client Side persistent storage solution for remembering themes.
<hr/>
<a href="https://github.com/zTrix/strapdown-zeta"><img style="position: fixed; bottom: 0; right: 0; border: 0; z-index: 10000; margin: 0;" src="http://strapdown.ztx.io/fork_ribbon.png" alt="Fork me on GitHub"></a>
</textarea>
<script src="http://cdn.ztx.io/strapdown/strapdown.min.js"></script>
</body>
</html>