forked from imthenachoman/nGitHubTOC
-
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
156 lines (132 loc) · 7.91 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>gh-toc</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Quickly create Table-of-Content Markdown for GitHub Markdown files." />
<meta property="og:url" content="https://moonbase59.github.io/gh-toc/" />
<meta property="og:type" content="website" />
<meta property="og:title" content="gh-toc" />
<meta property="og:description" content="Quickly create Table-of-Content Markdown for GitHub Markdown files." />
<meta property="og:image" content="https://moonbase59.github.io/gh-toc/gh-toc.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1280" />
<meta property="og:image:height" content="640" />
<meta property="og:author" content="Moonbase59" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="gh-toc" />
<meta name="twitter:description" content="Quickly create Table-of-Content Markdown for GitHub Markdown files." />
<meta name="twitter:image" content="https://moonbase59.github.io/gh-toc/gh-toc.png" />
<meta property="article:published_time" content="2024-04-06T03:43:40+02:00" />
<meta property="article:modified_time" content="2024-04-06T03:43:40+02:00" />
<meta property="article:author" content="Moonbase59" />
<style>
table {
width: 100%;
}
td {
padding: 5px;
}
textarea {
width: 100%;
height: 200px;
}
input {
width: 16px;
}
</style>
<script src="gh-toc.js"></script>
<script>
function doIt() {
var inputMD = document.querySelector("#inputMD").value;
var minHeading = document.querySelector("#minHeading").value;
var maxHeading = document.querySelector("#maxHeading").value;
var fullMD = document.querySelector("#fullMD").checked;
var addAnchors = document.querySelector("#addAnchors").value;
var addBL = document.querySelector("#addBL").value;
var useID = document.querySelector("#useID").checked;
if(minHeading > maxHeading) {
alert("Minimum heading level cannot be greater than maximum heading level");
return;
}
document.querySelector("#outputMD").value = tocIt(inputMD, minHeading, maxHeading, fullMD, addAnchors, addBL, useID);
}
</script>
</head>
<body>
<h1>gh-toc</h1>
<p>Quickly create Table-of-Content Markdown for GitHub Markdown files. (<a href="https://github.com/moonbase59/gh-toc">Source code</a>)</p>
<blockquote><em>I could never find a <strong>do-it-all</strong>, easy to use, online Table-of-Content maker for GitHub (and other) Markdown files. There were many solutions that required downloading or installing something on my computer. For such a trivial task I felt that was unnecessary.</em></blockquote>
<p>Indeed. This began as a fork and has meanwhile evolved to a <em>full-fledged solution</em>:</p>
<ul>
<li>Full Unicode support, all international characters.</li>
<li>Much better code block support (indented, backticks, tildes, different number of backticks/tildes).</li>
<li>YAML/Jekyll/LaTeX front matter support.</li>
<li>GitHub, HTML and <a href="https://pandoc.org/" target="_blank">Pandoc</a>/<a href="https://michelf.ca/projects/php-markdown/extra/" target="_blank">PHP Markdown Extra</a>-compatible anchor generation for easy navigation.</li>
<li>Options galore—hover mouse over checkbox labels for longer description.</li>
</ul>
<p>Try the <a href="https://github.com/Moonbase59/gh-toc/blob/master/testing.md?plain=1">testing.md</a> example: <strong>No other online ToC-Generator I could find handled this correctly!</strong></p>
<p><strong>None of your data is transferred to the Internet.</strong> All work happens in your browser, using JavaScript. Use Markdown ATX headings (<code>###</code>), and <code><!-- ToC begin --></code>/<code><!-- ToC end --></code> or <code>[TOC]</code> on separate lines to <em>insert</em> a ToC.</p>
<h2>The Real Magic</h2>
<table>
<tr>
<th>Markdown input</th>
<th>Table of Content output</th>
</tr>
<tr>
<td><textarea id="inputMD"></textarea></td>
<td><textarea id="outputMD"></textarea></td>
</tr>
<tr>
<td colspan="2">
<label for="minHeading"
title="Minimum heading level to include in ToC">Min heading:</label>
<select id="minHeading">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
 
<label for="maxHeading"
title="Maximum heading level to include in ToC">Max heading:</label>
<select id="maxHeading">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6" selected>6</option>
</select>
 
<label for="fullMD"
title="Output the full Markdown file? Needs <!-- ToC begin/end --> or [TOC] comments for inserting the ToC.">Full MD:</label>
<input type="checkbox" id="fullMD" name="fullMD" />
 
<label for="addAnchors" title="Generate/overwrite anchors? (— for GitHub, HTML or {#…} for other uses)">Anchors:</label>
<select id="addAnchors">
<option value="none" selected>—</option>
<option value="HTML">HTML</option>
<option value="braces">{#…}</option>
</select>
 
<label for="addBL" title="Generate backlinks? (—=no, ⇧ToC=Table of Contents, or ⇧Top=Top of document)">BL:</label>
<select id="addBL">
<option value="none" selected>—</option>
<option value="toc">⇧ ToC</option>
<option value="top">⇧ Top</option>
</select>
 
<label for="useID" title="Use id= instead of name= for anchors?">Use id:</label>
<input type="checkbox" id="useID" name="useID" />
 
<button onclick="doIt(); return false;">TOC it!</button>
</td>
</tr>
</table>
</body>
</html>