2016年12月7日水曜日

Bloggerの記事をマークダウンで書けるようにする

この記事はAdventCalendar2016 7日目の記事です. 早くも2週目です.すかいです. 皆さん文章を書く時マークダウンを利用していますか? マークダウンを使うと簡単に良い感じのHTMLが書けるようになります. この記事もマークダウンを利用して書いています. 今回はそんなマークダウンをBloggerで利用できるようにします.
## 導入 Blogger自体にマークダウンで書ける仕組みがないのでフロント側に頑張ってもらいます. 仕組みとしてはJSのライブラリにマークダウンを読み込んでHTMLを吐き出してくれるライブラリがあるのでこれを利用します. ユーザーが表示する時に文章をHTMLに変換してもらうことで実現するわけです. ### テンプレートの編集 ※投稿者権限だと編集出来ません Bloggerのテンプレート -> HTMLの編集からテンプレート編集画面を開きます. 開いたら
<head>
    <script src='//rawgithub.com/chjj/marked/master/lib/marked.js'/>
    中略
と冒頭に追記します. そしてbodyタグの最後に変換用のコードを置いておきます.
    <script>
        marked.setOptions({
            gfm: true,
            breaks: true,
            langPrefix: ''
        });
        var mds = document.querySelectorAll(".md, .markdown");

        for(var i=0; i < mds.length; i++){
            var md = mds[i];
            var converted = document.createElement("div");
            var html = marked(md.innerHTML);
            md.innerHTML = html;
        }
    </script>
</body>
※Bloggerのテンプレート編集画面だと算術演算子として登場した<をHTMLタグの開始タグとして認識してしまうため<を&lt;と置き直す必要があります. これで記事を書く時に編集モードをHTMLにして
<div class="md">
マークダウン
</div>
と書いて投稿すれば良い感じにマークダウンとして表示してくれます. しかしこれだとコードのシンタックスハイライトをしてくれなかったり行番号が表示されないのでそこら辺のプラグインも追加します. 最終的にはこんな感じ ヘッダー部
<head>
    <link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/styles/atom-one-dark.min.css' rel='stylesheet'/>
    <script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/highlight.min.js'/>
    <script src='//rawgithub.com/chjj/marked/master/lib/marked.js'/>
    <script src='//rawgithub.com/wcoder/highlightjs-line-numbers.js/master/dist/highlightjs-line-numbers.min.js'/>
    <script>
        hljs.initHighlightingOnLoad();
        hljs.initLineNumbersOnLoad();
    </script>
    <style>
        /* 行番号用のスタイルシート */
        pre > code.hljs.hljs-line-numbers {
            background-color: #282c34;
            border-right: 1px solid;
            border-color: #abb2bf;
            color: #abb2bf;
            text-align: right;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
    </style>
bodyの末尾
    <script>
        marked.setOptions({
            gfm: true,
            breaks: true,
            langPrefix: ''
        });
        var mds = document.querySelectorAll(".md, .markdown");

        for(var i=0; i < mds.length; i++){
            var md = mds[i];
            var converted = document.createElement("div");
            var html = marked(md.innerHTML);
            md.innerHTML = html;
        }

        var codes = document.querySelectorAll(".md > code, .markdown > code");
        for(var i=0; i < codes.length; i++){
            hljs.highlightBlock(codes[i]);
            hljs.lineNumbersBlock(codes[i]);
        }
    </script>
</body>
追記1 書いてて思ったけどレイアウトからガジェットとして追加した方が管理し易い気がした. そのうちします.そのうち 追記2 既に導入されていたシンタックスハイライトのプラグインが描画の足を引っ張っていたので消しました. 過去の記事でシンタックスハイライトされなくなっているものを見かけたらそっと修正して下さい.

0 件のコメント:

コメントを投稿