はてなブログでソースコードを折りたたんで表示してみた

はじめに

なにかしらのコードをはてなブログに載せようしたとき、コードがあまりに長すぎて見にくくなってしまった経験がないでしょうか？

ということで、今回は軽くソースコードの折りたたみ方を紹介していきたいと思います。

やり方

<details><summary>コードを表示する</summary>
ここに折り畳みたい内容を書き込む
</details>

コードを表示する

ここに折り畳みたい内容を書き込む

このような書き方をはてな記法かHTML記法で行います。

また、はてな記法の場合ではこのような感じのコードが書けます。

<details><summary>コードを表示する</summary>
>|cs|
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
 
namespace Sample101
{
    class Program
    {
        /*
         *  HelloWorld
         */
        static void Main(string[] args)
        {
            //  コンソールにHelloWorldと表示して終了
            Console.WriteLine("HelloWorld.");
        }
    }
}

| |<
</details>

コードを表示する

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
 
namespace Sample101
{
    class Program
    {
        /*
         *  HelloWorld
         */
        static void Main(string[] args)
        {
            //  コンソールにHelloWorldと表示して終了
            Console.WriteLine("HelloWorld.");
        }
    }
}