-
Notifications
You must be signed in to change notification settings - Fork 7
/
index.html
103 lines (94 loc) · 3.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
<html>
<head>
<title>nGitHubTOC</title>
<style>
table
{
width: 100%;
}
td
{
padding: 5px;
}
textarea
{
width: 100%;
height: 200px;
}
input
{
width: 50px;
}
</style>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-66393354-2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-66393354-2');
</script>
<script src="nGitHubTOC.js"></script>
<script>
function doIt()
{
var inputMD = document.querySelector("#inputMD").value;
var minHeading = document.querySelector("#minHeading").value;
var maxHeading = document.querySelector("#maxHeading").value;
if(minHeading > maxHeading)
{
alert("minimum heading level cannot be greater than maximum heading level")
return;
}
document.querySelector("#outputMD").value = tocIt(inputMD, minHeading, maxHeading);
}
</script>
</head>
<body>
<h1>nGitHubTOC</h1>
<p>a simple web page to quickly create table of content markdown for GitHub markdown files</p>
<p><a href="https://github.com/imthenachoman/nGitHubTOC">https://github.com/imthenachoman/nGitHubTOC</a>
<h2>Overview</h2>
<p>I could never find an easy to use, online table-of-content maker for GitHub 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.</p>
<p>This page just uses JavaScript to extract headings from a markdown file and return table-of-content markdown.</p>
<h2>The Magic</h2>
<p>
<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">minimum heading level:</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>
<br /><br />
<label for="maxHeading">maximum heading level:</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>
</td>
</tr>
<tr>
<td colspan="2"><button onclick="doIt(); return false;">TOC it</button></td>
</tr>
</table>
</p>
</body>
</html>