forked from arturadib/strapdown
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
120 lines (84 loc) · 5.59 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
<!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" />
</head>
<body>
<textarea theme="yeti">
# 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="cosmo" 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="https://cdn.jsdelivr.net/gh/fu-sen/strapdown.js@main/5/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)
+ Themeable
### Themes
Bootstrap themes from [Bootswatch.com](https://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 Default Base Bootstrap):
<img src="https://strapdown-js.balloon.net.eu.org/5/cerulean.png" width="350" height="210" alt="Cerulean">
<img src="https://strapdown-js.balloon.net.eu.org/5/cosmo.png" width="350" height="210" alt="Cosmo">
<img src="https://strapdown-js.balloon.net.eu.org/5/cyborg.png" width="350" height="210" alt="Cyborg">
<img src="https://strapdown-js.balloon.net.eu.org/5/darkly.png" width="350" height="210" alt="Darkly">
<img src="https://strapdown-js.balloon.net.eu.org/5/flatly.png" width="350" height="210" alt="Flatly">
<img src="https://strapdown-js.balloon.net.eu.org/5/journal.png" width="350" height="210" alt="Journal">
<img src="https://strapdown-js.balloon.net.eu.org/5/litera.png" width="350" height="210" alt="Litera">
<img src="https://strapdown-js.balloon.net.eu.org/5/lumen.png" width="350" height="210" alt="Lumen">
<img src="https://strapdown-js.balloon.net.eu.org/5/lux.png" width="350" height="210" alt="Lux">
<img src="https://strapdown-js.balloon.net.eu.org/5/materia.png" width="350" height="210" alt="Materia">
<img src="https://strapdown-js.balloon.net.eu.org/5/minty.png" width="350" height="210" alt="Minty">
<img src="https://strapdown-js.balloon.net.eu.org/5/morph.png" width="350" height="210" alt="Morph">
<img src="https://strapdown-js.balloon.net.eu.org/5/pulse.png" width="350" height="210" alt="Pulse">
<img src="https://strapdown-js.balloon.net.eu.org/5/quartz.png" width="350" height="210" alt="Quartz">
<img src="https://strapdown-js.balloon.net.eu.org/5/sandstone.png" width="350" height="210" alt="Sandstone">
<img src="https://strapdown-js.balloon.net.eu.org/5/simplex.png" width="350" height="210" alt="Simplex">
<img src="https://strapdown-js.balloon.net.eu.org/5/sketchy.png" width="350" height="210" alt="Sketchy">
<img src="https://strapdown-js.balloon.net.eu.org/5/slate.png" width="350" height="210" alt="Slate">
<img src="https://strapdown-js.balloon.net.eu.org/5/solar.png" width="350" height="210" alt="Solar">
<img src="https://strapdown-js.balloon.net.eu.org/5/spacelab.png" width="350" height="210" alt="Spacelab">
<img src="https://strapdown-js.balloon.net.eu.org/5/superhero.png" width="350" height="210" alt="Superhero">
<img src="https://strapdown-js.balloon.net.eu.org/5/united.png" width="350" height="210" alt="United">
<img src="https://strapdown-js.balloon.net.eu.org/5/yapor.png" width="350" height="210" alt="Yapor">
<img src="https://strapdown-js.balloon.net.eu.org/5/yeti.png" width="350" height="210" alt="Yeti">
<img src="https://strapdown-js.balloon.net.eu.org/5/zephyr.png" width="350" height="210" alt="Zephyr">
### Set navbar color
The types of navbar color are `primary`, `dark` and `light`. Default is `primary`:
```
<textarea theme="yeti" navbar="light">
```
### Self-hosting
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.
### CDN
We were looking for it. Currently it's jsDelivr is the best CDN. I have a separate project dedicated to:
<https://github.com/fu-sen/strapdown.js>
### 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.js](https://github.com/arturadib/strapdown) - Original project. This project forked
+ [Marked](https://github.com/markedjs/marked) - Fast Markdown parser in JavaScript
+ [Google Code Prettify](https://github.com/googlearchive/code-prettify) - Syntax highlighting in JavaScript
+ [Bootstrap](https://getbootstrap.com/2.3.2/) - Beautiful, responsive CSS framework
+ [Bootswatch](https://bootswatch.com/) - Additional Bootstrap themes
</textarea>
<script src="https://cdn.jsdelivr.net/gh/fu-sen/strapdown.js@main/5/strapdown.min.js"></script>
</body>
</html>