-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathREADME.html
More file actions
256 lines (227 loc) · 18 KB
/
README.html
File metadata and controls
256 lines (227 loc) · 18 KB
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
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
<!DOCTYPE html>
<html lang="en">
<!--
//
//
generated by lurkdown
https://github.com/obsfx/lurkdown
//
//
-->
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>lurkdown</title>
<!--@favico-->
<style>@font-face {
font-family: 'Inter';
src: url('src/inter/Inter-MediumItalic.woff2') format('woff2'),
url('src/inter/Inter-MediumItalic.woff') format('woff');
font-weight: 500;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: url('src/inter/Inter-ExtraBold.woff2') format('woff2'),
url('src/inter/Inter-ExtraBold.woff') format('woff');
font-weight: 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: url('src/inter/Inter-BlackItalic.woff2') format('woff2'),
url('src/inter/Inter-BlackItalic.woff') format('woff');
font-weight: 900;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: url('src/inter/Inter-Regular.woff2') format('woff2'),
url('src/inter/Inter-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: url('src/inter/Inter-LightItalic.woff2') format('woff2'),
url('src/inter/Inter-LightItalic.woff') format('woff');
font-weight: 300;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: url('src/inter/Inter-SemiBoldItalic.woff2') format('woff2'),
url('src/inter/Inter-SemiBoldItalic.woff') format('woff');
font-weight: 600;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: url('src/inter/Inter-BoldItalic.woff2') format('woff2'),
url('src/inter/Inter-BoldItalic.woff') format('woff');
font-weight: bold;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: url('src/inter/Inter-SemiBold.woff2') format('woff2'),
url('src/inter/Inter-SemiBold.woff') format('woff');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: url('src/inter/Inter-Black.woff2') format('woff2'),
url('src/inter/Inter-Black.woff') format('woff');
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: url('src/inter/Inter-ExtraLightItalic.woff2') format('woff2'),
url('src/inter/Inter-ExtraLightItalic.woff') format('woff');
font-weight: 200;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: url('src/inter/Inter-Light.woff2') format('woff2'),
url('src/inter/Inter-Light.woff') format('woff');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: url('src/inter/Inter-Bold.woff2') format('woff2'),
url('src/inter/Inter-Bold.woff') format('woff');
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: url('src/inter/Inter-ExtraLight.woff2') format('woff2'),
url('src/inter/Inter-ExtraLight.woff') format('woff');
font-weight: 200;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: url('src/inter/Inter-Medium.woff2') format('woff2'),
url('src/inter/Inter-Medium.woff') format('woff');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: url('src/inter/Inter-ExtraBoldItalic.woff2') format('woff2'),
url('src/inter/Inter-ExtraBoldItalic.woff') format('woff');
font-weight: 800;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: url('src/inter/Inter-Thin.woff2') format('woff2'),
url('src/inter/Inter-Thin.woff') format('woff');
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: url('src/inter/Inter-ThinItalic.woff2') format('woff2'),
url('src/inter/Inter-ThinItalic.woff') format('woff');
font-weight: 100;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: url('src/inter/Inter-Italic.woff2') format('woff2'),
url('src/inter/Inter-Italic.woff') format('woff');
font-weight: normal;
font-style: italic;
font-display: swap;
}
/**
* Minified by jsDelivr using clean-css v4.2.1.
* Original file: /npm/@exampledev/new.css@1.1.2/new.css
*
* Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
*/
:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#000000;--nc-tx-2:#1A1A1A;--nc-bg-1:#FFFFFF;--nc-bg-2:#F6F8FA;--nc-bg-3:#E5E7EB;--nc-lk-1:#0070F3;--nc-lk-2:#0366D6;--nc-lk-tx:#FFFFFF;--nc-ac-1:#79FFE1;--nc-ac-tx:#0C4047}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#ffffff;--nc-tx-2:#eeeeee;--nc-bg-1:#000000;--nc-bg-2:#111111;--nc-bg-3:#222222;--nc-lk-1:#3291FF;--nc-lk-2:#0070F3;--nc-lk-tx:#FFFFFF;--nc-ac-1:#7928CA;--nc-ac-tx:#FFFFFF}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}::selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote :last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer;color:var(--nc-lk-tx)}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:default;opacity:.5;cursor:not-allowed}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd::before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}
/*# sourceMappingURL=/sm/4a51164882967d28a74fabce02685c18fa45a529b77514edc75d708f04dd08b9.map */:root {
--nc-tx-1: #ffffff;
--nc-tx-2: #eeeeee;
--nc-bg-1: #000000;
--nc-bg-2: #111111;
--nc-bg-3: #222222;
--nc-lk-1: #3291FF;
--nc-lk-2: #0070F3;
--nc-lk-tx: #FFFFFF;
--nc-ac-1: #7928CA;
--nc-ac-tx: #FFFFFF;
}</style>
</head>
<body>
<div class='ld-wrapper'><div class='ld-div'><h1 class='ld-h1'>lurkdown </h1></div><div class='ld-div'><a class='ld-a' href='https://badge.fury.io/js/lurkdown'><img class='ld-img' src='https://badge.fury.io/js/lurkdown.svg' alt='npm version'></a></div><div class='ld-div'><a class='ld-a' href='https://github.com/obsfx/lurkdown'>View the source code on GitHub</a> </div><br><div class='ld-div'><img class='ld-img' src='https://raw.githubusercontent.com/obsfx/lurkdown/gh-pages/demo.gif' alt='lurkdown'></div><br><div class='ld-div'><code class='ld-code'>lurkdown</code> is a command-line markdown transpiler tool that was built on <code class='ld-code'>NodeJS</code> with <code class='ld-code'>TypeScript</code> to create standalone, markdown-generated HTML files. <code class='ld-code'>lurkdown</code> converts all locally hosted image files to <code class='ld-code'>base64</code> to avoid dealing with images when we want to host that HTML files at somewhere. <em class='ld-em'>It is not perfect but works in most cases.</em></div><br><div class='ld-div'><h2 class='ld-h2'>installation</h2></div><div class='ld-div'>You can directly install via npm</div><br><div class='ld-div'><pre class='ld-pre hljs'><code><span class="hljs-built_in">npm</span> i -g lurkdown
</code></pre></div><br><div class='ld-div'>Or you can download the standalone executable version.</div><div class='ld-div'><a class='ld-a' href='https://github.com/obsfx/lurkdown/releases'>Standalone Executables</a></div><br><div class='ld-div'><h2 class='ld-h2'>disclaimer</h2></div><div class='ld-div'>some core features are not implemented:</div><div class='ld-div'><ol class='ld-ol' start='1'><li class='ld-li'> Combined blockquotes.<br></li><li class='ld-li'> Reference style images.</li></ol></div><div class='ld-div'>restrictions:</div><div class='ld-div'><ol class='ld-ol' start='1'><li class='ld-li'> <code class='ld-code'>lurkdown</code> doesn't deal with font files. You have to host them at somewhere and <code class='ld-code'>@import</code> the <code class='ld-code'>CSS</code> file of font definitions.</li></ol></div><br><div class='ld-div'><h2 class='ld-h2'>how to use</h2></div><div class='ld-div'>You can directly use with command-line parameters.</div><div class='ld-div'><ul class='ld-ul'><li class='ld-li'> <code class='ld-code'>--files</code> / <strong class='ld-strong'><em class='ld-em'>mandatory</em></strong> -> Specify file paths by enclosing with quotes and then separating with commas.<br> <code class='ld-code'>e.g. --files='./path/to/file.md, ./path/to/file2.md, ./path/to/file3.md'</code></li><li class='ld-li'> <code class='ld-code'>--theme</code> / <strong class='ld-strong'><em class='ld-em'>optional</em></strong> -> Available themes: dark, light. If you don't specify a theme, output files will be exported without any styling.</li><li class='ld-li'> <code class='ld-code'>--titles</code> / <strong class='ld-strong'><em class='ld-em'>optional</em></strong> -> Specify the titles that will be used in <code class='ld-code'>title</code> tag in output files. They should be specified in the same order as files and they should be enclosed with quotes and then separated with commas.<br> <code class='ld-code'>e.g --titles='file title, file2 title, file3 title'</code></li><li class='ld-li'> <code class='ld-code'>--outdir</code> / <strong class='ld-strong'><em class='ld-em'>optional</em></strong> -> If you don't specify an output directory, files will be exported in same directory as like input files.</li><li class='ld-li'> <code class='ld-code'>--styles</code> / <strong class='ld-strong'><em class='ld-em'>optional</em></strong> -> Specify the custom <code class='ld-code'>CSS</code> file paths If you want to customize the output files. They should be specified like files and titles. Enclose with quotes and then separate with commas.<br> <code class='ld-code'>e.g. --styles='./path/to/cssfile.css, ./path/to/cssfile2.css'</code></li><li class='ld-li'> <code class='ld-code'>--favico</code> / <strong class='ld-strong'><em class='ld-em'>optional</em></strong> -> Specify the path of favico file.</li></ul></div><br><div class='ld-div'>Example usage</div><br><div class='ld-div'><pre class='ld-pre hljs'><code>lurkdown <span class="hljs-attribute">--theme</span>=dark <span class="hljs-attribute">--files</span>=<span class="hljs-string">'./src/test/http_notes.md, ./src/test/post.md'</span> <span class="hljs-attribute">--titles</span>=<span class="hljs-string">'HTTP Notes, My First Blog Post'</span> <span class="hljs-attribute">--outdir</span>=./export <span class="hljs-attribute">--favico</span>=./src/icon.ico
</code></pre></div><br><div class='ld-div'>Or you can just pass a single <code class='ld-code'>config.json</code> file with the <code class='ld-code'>--config</code> parameter.</div><div class='ld-div'>Example usage:</div><br><div class='ld-div'><pre class='ld-pre hljs'><code class='json'>{
<span class="hljs-attr">"favico"</span>: <span class="hljs-string">"./favicon.ico"</span>,
<span class="hljs-attr">"outdir"</span>: <span class="hljs-string">"./ld-output"</span>,
<span class="hljs-attr">"theme"</span>: <span class="hljs-string">"dark"</span>,
<span class="hljs-attr">"styles"</span>: [
<span class="hljs-string">"./src/custom.css"</span>,
<span class="hljs-string">"./src/custom2.css"</span>
],
<span class="hljs-attr">"files"</span>: [
{ <span class="hljs-attr">"path"</span>: <span class="hljs-string">"./src/test/test.md"</span>, <span class="hljs-attr">"title"</span>: <span class="hljs-string">"Test File"</span> },
{ <span class="hljs-attr">"path"</span>: <span class="hljs-string">"./src/test/event_loop.md"</span>, <span class="hljs-attr">"title"</span>: <span class="hljs-string">"Event Loops"</span> },
{ <span class="hljs-attr">"path"</span>: <span class="hljs-string">"./src/test/http_notes.md"</span>, <span class="hljs-attr">"title"</span>: <span class="hljs-string">"HTTP Notes"</span> }
]
}
</code></pre></div><div class='ld-div'><pre class='ld-pre hljs'><code>lurkdown --<span class="hljs-built_in">config</span>=./<span class="hljs-built_in">config</span>.json
</code></pre></div><br><div class='ld-div'><h2 class='ld-h2'>customization</h2></div><div class='ld-div'>You can customize the elements by using this <code class='ld-code'>CSS</code> class names.</div><br><div class='ld-div'><pre class='ld-pre hljs'><code class='css'><span class="hljs-selector-class">.ld-wrapper</span> { }
<span class="hljs-selector-class">.ld-div</span> { }
<span class="hljs-selector-class">.ld-blockquote</span> { }
<span class="hljs-selector-class">.ld-pre</span> { }
<span class="hljs-selector-class">.ld-code</span> { }
<span class="hljs-selector-class">.ld-em</span> { }
<span class="hljs-selector-class">.ld-strong</span> { }
<span class="hljs-selector-class">.ld-del</span> { }
<span class="hljs-selector-class">.ld-h1</span> { }
<span class="hljs-selector-class">.ld-h2</span> { }
<span class="hljs-selector-class">.ld-h3</span> { }
<span class="hljs-selector-class">.ld-h4</span> { }
<span class="hljs-selector-class">.ld-h5</span> { }
<span class="hljs-selector-class">.ld-h6</span> { }
<span class="hljs-selector-class">.ld-img</span> { }
<span class="hljs-selector-class">.ld-a</span> { }
<span class="hljs-selector-class">.ld-ol</span> { }
<span class="hljs-selector-class">.ld-ul</span> { }
<span class="hljs-selector-class">.ld-li</span> { }
<span class="hljs-selector-class">.ld-checkbox</span> { }
<span class="hljs-selector-class">.ld-table</span> { }
<span class="hljs-selector-class">.ld-thead</span> { }
<span class="hljs-selector-class">.ld-tbody</span> { }
<span class="hljs-selector-class">.ld-tr</span> { }
<span class="hljs-selector-class">.ld-th</span> { }
<span class="hljs-selector-class">.ld-td</span> { }
</code></pre></div><div class='ld-div'><hr></div><div class='ld-div'><code class='ld-code'>lurkdown</code> uses <a class='ld-a' href='https://github.com/highlightjs/highlight.js'>highlight.js</a> to deal with syntax highlighting so if you want to customize the syntax highlighting, you can pass the <a class='ld-a' href='https://highlightjs.org/static/demo/'>customized css files</a> with the <code class='ld-code'>--styles</code> parameter.<br></div></div>
</body>
</html>