コードなど折り畳みの例

はじめに

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>
<!--// ここまでを折りたたむ -->

そして実際にできたもの

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

ハックノートをフォローして
最新情報をチェックしよう

AWS構築サービスの全てをまとめた資料を公開中

ハックノート(TOWN株式会社)では、AWSの導入や構築支援を行っています。AWS導入メニューやサービス詳細、構成例や費用を掲載した資料をダウンロードできます。

AWSの新規導入やAWSへの移行を検討の際は、ぜひご参考ください。


APNコンサルティングパートナー

TOWN株式会社はAmazon公認コンサルティングパートナーです。