-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathsample.html
113 lines (80 loc) · 4.56 KB
/
sample.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
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="casual-markdown-doc.css">
<script src="casual-markdown-doc.js"></script>
<body class="ukraine" title="Sample of Casual-Markdown-Doc">
----------------------------------------------------------------
github : https://github.com/casualwriter/casual-markdown-doc
----------------------------------------------------------------
## Introduction
This is a sample document of [Casual-Markdown-Doc]({{ github }})
[Casual-Markdown-Doc](https://github.com/casualwriter/casual-markdown-doc) provide a quick solution
to use markdown as html document, and publish by web or share by file.
* include javascript lib `casual-markdown-doc.js`
* include css style ``casual-markdown-doc.css``
then start write document in markdown format!
### Credit
This project based on the design idea of [Strapdown.js](https://strapdownjs.com/).
but use [casual-markdown](https://github.com/casualwriter/casual-markdown) parser,
build-in css, vanilla javascript without any dependence. (support all browsers include IE9)
### Sample
* Introduction of Casual-Markdown-Doc. src: [sample.html](source/sample.html) => [preview](https://raw.githack.com/casualwriter/casual-markdown-doc/main/source/sample.html)
* Supported Markdown Syntax https://casualwriter.github.io/casual-markdown/casual-markdown-syntax.html
## Usage Guide
1. create your document in html format. e.g. `casual-markdown-syntax.html`
2. use below first 5 line as header, and start draft content in markdown format
3. at line 5, revise title to your document title
4. start draft document in markdown format
~~~
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://casualwriter.github.io/dist/casual-markdown-doc.css" rel="stylesheet">
<script src="https://casualwriter.github.io/dist/casual-markdown-doc.js"></script>
<body class="dark" title="Supported Syntax of Casual-Markdown">
## Heading
content in markdown format
~~~
### Table of Content
* table-of-content will be auto-generated from markdown heading
* hotkey [alt-t] to toggle table-of-content popup-box
* hotkey [ctrl-p] to print document, table-of-content will be inserted as first page automatically.
* if donot want table-of-content printout. please close TOC box first, then print document.
* table-of-content will be hidden if screen width less than 1024 (e.g. mobile).
### Themes
The following themes are available, by adding ``class="theme-name"`` in body tag.
They are pre-defined in `casual-markdown-doc.css` (sorry not good at UI design, set your style if you like)
~~~
/* ==== theme for casual-markdown-doc.css ==== */
.dark, .dark div, .dark pre, .dark code { background:#383838!important; color:#ccc }
.dark h2, .dark h3, .dark h4, .dark a { color:white } .dark header{ background:#888 } .dark .active {color:pink}
.ukraine header { background: linear-gradient(to bottom right, #0057b8, #ffd700); }
.skygreen header { background: linear-gradient(to bottom, skyblue, green); }
.skyblue header { background: skyblue; }
.coffee header { background:#6F4E37 } .coffee .toc h3, .coffee .toc .active { color:#6F4E37 }
.purple header { background:Purple } .purple .toc h3, .purple .active { color:Purple }
.pink header { background:MediumVioletRed } .pink .toc h3, .pink .active { color:teal }
~~~
### How it works
The main program is very simple by doing the following steps.
1. read markdown content from ``<body>``
1. update document title
2. call casual-markdown parse, convert to html and update to content area.
3. generate table-of-content with scrollspy feature.
~~~
//=============================================================================
// 20220719, convert markdown-document in <body> tag into HTML document
//=============================================================================
window.onload = function () {
var html = '<div class="container" style="margin:auto; max-width:1024px; padding:4px;">'
html += '<header id=heading>' + (document.body.title||document.title) + '</header>'
html += '\n<div id=tocbox><button style="float:right" onclick="this.parentElement.style.display=\'none\'">'
html += 'X</button><div id="toc"></div></div>'
html += '\n<div id=content>' + md.html(document.body.innerHTML.replace(/\>/g,'>')) + '</div></div>';
document.body.innerHTML = html
document.body.style.display = 'block';
md.toc( 'content', 'toc', { scrollspy:'body' } )
}
~~~
### Modification History
* 2022/07/22, v0.70, initial release.
* 2022/08/06, v0.80, support themes, cater mobile, and some minor fix.