개시하다

여러분이 GiitHub에서 Mardown을 읽을 기회가 의외로 많네요.긴 README 같은 디렉터리를 원합니다.
소매.kobake@github예전에 선생님이 쓰신 GiitHub의 Markdown에 TOC 책갈피 추가글을 보고 감사히 이용했는데 요즘은 GiitHub의 각 페이지에서 jQuery를 방문할 수 없을 것 같아요.그래서 나는 vanilla JS로 이쪽 책갈피를 다시 써 보았다.만약 무슨 문제, 의견, 지적 등이 있으면 메시지를 남겨 주세요!

Bookmarklet

a. 책갈피 페이지
b. URL을 다음과 같이 변경(복사)합니다.
bookmarklet

javascript:(function(){var e=(function(){/*.toc{border: 1px solid #aaa;padding: 4px 12px;margin-bottom: 12px;position: relative;padding-top: 30px;}.toc-title{display: inline-block;width: auto;background-color: #ccc;position: absolute;left: 0px;top: 0px;font-size: 8pt;padding: 2px 4px;padding-right: 8px;color: #666;}.toc-h{font-size: 11pt;}.toc-h1{}.toc-h2{margin-left: 20px;}.toc-h3{margin-left: 40px;}*/}).toString().match(/[^]*\/\*([^]*)\*\/\}$/)[1];var f=document.createElement('style');f.classList.add("toc-style");f.innerHTML='\n'+e+'\n';document.head.appendChild(f);var g=document.createElement('div');g.classList.add('toc');var i=document.createElement('div');i.classList.add('toc-title');i.innerHTML='TOC';g.appendChild(i);var j=document.querySelectorAll('.markdown-body')[0];j.insertBefore(g,j.firstChild);document.querySelectorAll('.markdown-body h1, .markdown-body h2, .markdown-body h3').forEach(function(a){var b=a.tagName.toLowerCase();var c=document.createElement("div");c.classList.add("toc-h");c.classList.add("toc-"+b);var d=document.createElement("a");c.appendChild(d);d.innerHTML="- "+a.childNodes[1].textContent;d.href=a.querySelectorAll('a')[0].href;g.appendChild(c)})})();

c. 좋아하는 GiitHub의markdown에서 책갈피 열기(실행)
d. 보기(예를 들어 페이스북/react의 README)

압축 전 코드

javascript: (function() {
    var style = (function () {/*
        .toc{
            border: 1px solid #aaa;
            padding: 4px 12px;
            margin-bottom: 12px;
            position: relative;
            padding-top: 30px;
        }
        .toc-title{
            display: inline-block;
            width: auto;
            background-color: #ccc;
            position: absolute;
            left: 0px;
            top: 0px;
            font-size: 8pt;
            padding: 2px 4px;
            padding-right: 8px;
            color: #666;
        }
        .toc-h{
            font-size: 11pt;
        }
        .toc-h1{
        }
        .toc-h2{
            margin-left: 20px;
        }
        .toc-h3{
            margin-left: 40px;
        }
    */}).toString().match(/[^]*\/\*([^]*)\*\/\}$/)[1];

    var styleEl = document.createElement('style');
    styleEl.classList.add('toc-style');
    styleEl.innerHTML = '\n' + style + '\n';
    document.head.appendChild(styleEl);

    var tocDiv = document.createElement('div');
    tocDiv.classList.add('toc');
    var tocTitleDiv = document.createElement('div');
    tocTitleDiv.classList.add('toc-title');
    tocTitleDiv.innerHTML = 'TOC';
    tocDiv.appendChild(tocTitleDiv);

    var markdownBody = document.querySelector('.markdown-body');
    markdownBody.insertBefore(tocDiv, markdownBody.firstChild);

    Array.prototype.forEach.call(document.querySelectorAll('.markdown-body h1, .markdown-body h2, .markdown-body h3'), function(node){
        // level
        var tagName = node.tagName.toLowerCase();

        // link div
        var linkDiv = document.createElement('div');
        linkDiv.classList.add('toc-h');
        linkDiv.classList.add('toc-' + tagName);

        // link
        var aEl = document.createElement('a');
        aEl.innerHTML = '- ' + node.childNodes[1].textContent;
        aEl.href = node.querySelector('a').href;
        linkDiv.appendChild(aEl);

        // append
        tocDiv.appendChild(linkDiv);
    });
})();

시험을 준비하다

stylekobake@github나는 선생님의 물건을 유용했다.문제가 있으면 메시지를 남겨 주세요.

aEl.innerHTML = "- " + node.childNodes[1].textContent의 부분을 조정하면 각 제목의 외관을 조정할 수 있다.

querySelectorAll은 비교적 새롭지만 IE8 이상에서 실행될 것 같다(미확인)

동작 확인은 크롬만 했다.

앞으로 GiitHub상의 구조 변화가 있을 수 있으니 리뷰 등을 통해 알려주세요.

TODO

jQuery의remove부분은 조건분할이 귀찮아서 건너뛰었습니다.필요하면 써.

압축 전 코드를 GiitHub 또는 Gist

로 이동

history

querySelectorAll이 필요 없는 부분을querySelector

로 변경

통일quotation의 종류

Array.prototype.forEach

미니피(Minify) 방법 약간 변경