コードなど折り畳みの例

はじめに

markdownで記事を書いているときにどうしても長いコードを書く必要が出てしまいました。
しかし、長すぎて記事が見にくい…
そこで、HTMLを使ってその問題を解消できそうなので紹介していきます。

実装する内容

<!-- 折りたたみ展開ボタン -->
<div onclick="obj=document.getElementById('menu1').style; obj.display=(obj.display=='none')?'block':'none';">
<a style="cursor:pointer;">▼ コード(クリックで展開)</a>
</div>
<!--// 折りたたみ展開ボタン -->

<!-- ここから先を折りたたむ -->
<div id="menu1" style="display:none;clear:both;">

<!-- ここに折りたたむ内容を記入 -->

</div>
<!--// ここまでを折りたたむ -->

コードを書き込むときは次の様に

<!-- 折りたたみ展開ボタン -->
<div onclick="obj=document.getElementById('menu1').style; obj.display=(obj.display=='none')?'block':'none';">
<a style="cursor:pointer;">▼ コード(クリックで展開)</a>
</div>
<!--// 折りたたみ展開ボタン -->

<!-- ここから先を折りたたむ -->
<div id="menu1" style="display:none;clear:both;">

<pre class="prettyprint lang-" title="">

<!-- ここにコードを書き込む -->

</pre>

</div>
<!--// ここまでを折りたたむ -->

そして実際にできたもの

{
    "text": "Choose a game to play",
    "fallback": "You are unable to choose a game",
    "callback_id": "wopr_game",
    "color": "#3AA3E3",
    "attachment_type": "default",
    "actions": [
        {
            "name": "game",
            "text": "Thermonuclear War",
            "style": "danger",
            "type": "button",
            "value": "war",
            "confirm": {
                "title": "Are you sure?",
                "text": "Wouldn't you prefer a good game of chess?",
                "ok_text": "Yes",
                "dismiss_text": "No"
            }
        }
    ]
}

これで記事を見やすくできる!かも???