github-md-catalog

generate catalog in Github readme page

2020-09-30 기준 버전입니다. 최신 버전을 확인하세요.

이 스크립트를 설치하려면 Tampermonkey, Greasemonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

You will need to install an extension such as Tampermonkey to install this script.

이 스크립트를 설치하려면 Tampermonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey 또는 Userscripts와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 유저 스크립트 관리자 확장 프로그램이 필요합니다.

(이미 유저 스크립트 관리자가 설치되어 있습니다. 설치를 진행합니다!)

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

(이미 유저 스타일 관리자가 설치되어 있습니다. 설치를 진행합니다!)

// ==UserScript==
// @name         github-md-catalog
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  generate catalog in Github readme page
// @author       fengxxc
// @match        https://github.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    function main() {
        // 目录树缩进的步长
        const PADDINGLEFT_STEP_LENGTH = 20;

        if (window.location.hostname != 'github.com') return;
        const mdDom = document.querySelector('article.markdown-body');
        if (!mdDom) return;
        let catalogs = [];
        const titles = mdDom.querySelectorAll('h1,h2,h3,h4,h5,h6');
        for (let i = 0; i < titles.length; i++) {
            catalogs.push(
                getPaddingLeftEl(parseInt(titles[i].tagName.slice(1)), PADDINGLEFT_STEP_LENGTH)
                + '<a href="#' + titles[i].innerText + '">' + titles[i].innerText + '</a><br>'
            );
            titles[i].insertAdjacentHTML('afterbegin', '<a name="' + titles[i].innerText + '"></a>');
        }
        document.body.insertAdjacentHTML('beforeend', '<nav id="github_md_catalog" style="position: fixed; top: 115px; right: 5px; max-width: 257px">' + catalogs.join('') + '</nav>');
    }

    function getPaddingLeftEl(tabStep, stepLength) {
        return '<span style="display: inline-block; width: ' + tabStep * stepLength + 'px;"></span>';
    }

    main();
})();