forked from ndossougbe/strapdown
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
165 lines (111 loc) · 6.94 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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Strapdown.js - Instant and elegant Markdown documents</title>
<meta name="description" content="Create Markdown documents using JavaScript and Bootstrap themes. Also available as a jQuery plugin." />
<script>
(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-41650056-2', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<textarea style="display:none;" toc toc-top-link>
# Strapdown
Strapdown 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.
Strapdown is also available as a jQuery plugin to easily add it to your existing pages.
(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 style="display:none;" toc>
# 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://ndossougbe.github.io/strapdown/dist/strapdown.js"></script>
</html>
```
# Features
+ Search-engine friendly
+ Github-flavored Markdown (tables, syntax highlighting, etc)
+ Themeable
+ Automatic table of contents
+ Available as a jQuery plugin for more control
## Table of content
For bigger documents, having a table of contents can greatly help with navigation. Just add the attribute `toc` to the `xmp` tag, and watch the magic!
### Options
Here are the current options you can change from the html tag:
- **toc-top-link** - includes a link to navigate back to the top of the page in the table of content. By default, it's named "Back to top",but you can change that label by passing a value to the attribute.
## Self-hosting
For convenience the library is hosted at `ndossougbete.github.io` (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.
## jQuery plugin
- **$(element).strapdown(options)** - Runs Strapdown on the given element.
If **element** is `document` or `body`, Strapdown is going to look for a `xmp` or `textarea` tag in the document. Else, the provided element's content is going to be used. The element's content will be parsed as markdown.
**options** is an object used to configure the run. The following properties are used:
```
{
importCss: BOOLEAN, /* if truthy, strapdown's css file will be imported (looking at the same path
* as the imported js.) (Default: false)*/
dest: STRING, /* Selector of the tag whose content is to be remplaced by the parsed markdown.
* If there is no corresponding tag, the element used as source will be
* replaced.*/
navbar: { /* Set falsy to disable navbar generation (Defaults: false)*/
title: STRING /* Used as brand name on the navbar. If absent, the content of the title tag
* will be used.*/
},
toc: { /* Set falsy to disable toc generation (Defaults: false)*/
disabled: BOOLEAN /* Set truthy to disable toc generation (Defaults: undefined) */
dest: STRING, /* Selector of the tag whose content is to be replaced by the table of content.
* When the navbar is generated, a `.toc` element will be used by default.*/
topLink: STRING|BOOLEAN, /* If false, no link will be generated. If true, the label will be
* 'Back to top'. Else, the provided value will be used as label.*/
scrollspy: BOOLEAN /* If true, a twbs scrollspy will be added on body, using toc.dest as target*/
scrollspyOffset: NUMBER, /* Number of pixels to offset the scrollspy. (passed to the twbs scrollspy
* options as the offset attribute.)*/
},
}
```
Some options can also be set directly on the **element** as HTML attributes. They will be overriden by the **options** object provided to the
function. The supported attributes are:
- **toc** - enables the generation of the table of contents.
- **toc-top-link** - includes a link to navigate back to the top of the page in the table of content. By default, it's named "Back to top",but you can change that label by passing a value to the attribute.
- **$(element).strapdown('toc', options)** - Creates a table of content for the given element. **element** and options are exactly the same as for the first method.
## 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>`.
There is currently no way to force the table of content to use user-specified ids. The ids used are currently obtained by replacing whitespace and special characters in the title by '-'. You still can put your own anchors and link to them:
```
<!-- Anchor accessible via #myAnchor -->
## <a id="myAnchor"></a> My Title
```
# Downloads, sources and other demos
+ [Downloads (todo)](https://github.com/ndossougbe/strapdown/releases)
+ [Sources on GitHub](https://github.com/ndossougbe/strapdown)
+ Demos
- [Syntax examples](demos/markdown_syntax.html). Look at the source to see the syntax used.
- [Bigger example for the table of contents](demos/toc_demo.html)
- [Usage as a jQuery plugin](demos/plugin_demo.html)
# 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)
+ [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
+ [jQuery](http://jquery.com) - Changes the way you write Javascript
+ [Twitter Bootstrap](http://getbootstrap.com/) - Beautiful, responsive CSS framework
+ [Bootswatch](http://bootswatch.com) - Additional Bootstrap themes
</textarea>
<script src="dist/strapdown.js"></script>
</body>
</html>