トップ > javascript > 【はてなブログ】長いコードを折りたためるようにする

【はてなブログ】長いコードを折りたためるようにする

javascript はてなブログ

技術ブログを書いていると、コードが長すぎてブラウザいっぱいにコードが表示される場合があります。

おそらく、この技術ブログにたどり着いた人はソースコードを読むために来ていただいているとは思いますが、
初見の圧迫感は利用者にとって苦痛なのかなと思ったりもします。

そこで、はてなブログでコードを折りたたむ方法について書いていきたいと思います。

要件

  • ソースコードがあると言う事がわかるように先頭数行は表示する
  • 長すぎないコードは折りたたむ必要が無いため折りたたまない

また、今回は一度開いたら閉じない前提で作成します。

開発の準備

今回は、jQueryを使用します。

はてなブログにアクセスし、ダッシュボードを開きます。

ダッシュボードの左メニューから「設定」 ->「詳細設定」タブ->「headに要素を追加」まで進み、
「headに要素を追加」下のテキストエリアに次のコードを追加します。

<script src="https://code.jquery.com/jquery-3.3.1.min.js">

jQueryのバージョンは2018年11月現在なので、必要に応じて変更してください。

スクリプト記載

次に、開閉用のスクリプトを実装します。

スクリプトはbodyの最後に書きたいのですが、はてなブログにはbodyの最後に追加する設定はありません。
そのため、footer付近に書くことにします。

ダッシュボードの左メニューから「デザイン」->「カスタマイズ」タグ->「フッター」まで進み、
「フッター」のテキストエリアに次のコードを追加します。

<script>
(function ($) {
    defalutHeight = 200
    btnClassName = "btn-viewcode"
    openTime = 450

    // はてなブログの場合、コードはpreタグにcodeクラスをつけるのでそれで判定
    $(".code").each(function (i, element) {
    
        // preにlang-(記述する言語名)が無ければ何もしない
        if (element.className.match(/lang/) == null) return;
        
        var $code = $(element)
        var height = $code.height()

        // 特定のコード量（高さ）に無いコードは何もしない
        if (height < defalutHeight) return;

        // はてなブログはpreタグ直下に直接コードを転記しているため、codeタグでラップする。
        $codeElement = $("<code></code>")
            .data("original-height", height)
            .html($code.html())
            
        var $elm = $("<span></span>")
        $elm.text("全て表示")
            .addClass(btnClassName)

        // コードの要素自体を<pre><code>にした状態で置換
        $code.html("")
        $code.css({
            "position": "relative",
            "overflow": "hidden",
            "height": defalutHeight + "px"
        }).append($codeElement).append($elm)
    })

    // 折りたたみ解除イベント
    $("." + btnClassName).click(function (event) {
        var $target = $(event.target);
        var $pre = $target.parent();
        var $code = $pre.find("code");
        var height = parseInt($code.data("original-height"), 10);
        $pre.css("overflow-x", "scroll").animate({
            "height": height
        }, openTime, "swing")
        $target.animate({
            "opacity": 0
        }, openTime, "swing", function () {
            $(this).remove()
        })
    })
})(jQuery)
< /script>

もし、ソースコード以外のpreも対象にしたい場合

今回のスクリプトでは、スーパーpreに対応しているコードエリアのみです。
help.hatenablog.com

上記でリンク先対応していない言語や、単純にpre表示したいものは対象にはなっていません。
もし、対象にする場合はif (element.className.match(/lang/) == null) return;の記述を削除してください。

折りたたみ時のボタンスタイル調整

折りたたみ時のスタイルを調整します。
ダッシュボードの左メニューから「デザイン」->「カスタマイズ」タグ->「デザインCSS」まで進み、
「デザインCSS」のテキストエリアに次のコードを追加します。
このスタイルについてはご自由に変更してください。

.btn-viewcode {
    position: absolute;
    display: block;
    bottom: 12px;
    border: 1px solid #333;
    margin: 0 auto;
    width: 92%;
    padding: 8px 0;
    cursor: pointer;
    text-align: center;
    color: #000;
    background-color: #F4F4F4;
}

これでコードの折りたたみができたと思います。

テスト

次のように長いコードが来た場合、折り畳んで表示します。

<p>スタート</p>

























<p>エンド</p>

参考URL

atuweb.net

以上です。
私自身、ブログ記事を読むときは、簡単にページを一読してから詳細に読み始めます。
そんな時に、折りたたみ機能があるといいなと思うこともあったので、追加して見た機能です。
また、過去のソースコードにも一律追加できます。

よろしければ、参考になさってください。

©︎2017-2018 WebSandBag