index.html

<!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>&lt;!-- ToC begin --&gt;</code>/<code>&lt;!-- ToC end --&gt;</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>
                    
                    &ensp;
                    
                    <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>
                    
                    &ensp;
                    
                    <label for="fullMD"
                        title="Output the full Markdown file? Needs &lt;!-- ToC begin/end --&gt; or [TOC] comments for inserting the ToC.">Full MD:</label>
                    
                    <input type="checkbox" id="fullMD" name="fullMD" />
                    
                    &ensp;
                    
                    <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>
                    
                    &ensp;
                    
                    <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>
                    
                    &ensp;
                    
                    <label for="useID" title="Use id= instead of name= for anchors?">Use id:</label>
                    
                    <input type="checkbox" id="useID" name="useID" />
                    
                    &ensp;
                    
                    <button onclick="doIt(); return false;">TOC it!</button>
                </td>
            </tr>
        </table>
    </body>
</html>