プログラムのソースコードをブログ記事にスクロールで表示させる方法!折り返し・改行・タブを見やすく貼り付け

プログラムのソースコードをブログ記事に貼り付けるとき、

そのままべた書きでテキストで貼り付けるとソースコードの形がぐちゃぐちゃになってしまいます。

たとえば、

タブがなくなってしまったり、

改行の位置がおかしくなったり、

1行のソースコードが長い時は、折り返しで次の行に表示されてしまったり。

ソースコードの見やすさが非常に悪くなります。

一方で、はてなブログなどプログラミングをしている人がソースコードをバンバン載せているブログを見たところ、ソースコードが綺麗に貼り付けてあるのを見かけたことがあります。

横にスクロールバーがあって、長いソースコードでも一行に収まっていたり。

あれはどうやってやってるんだろうと思っていたところ、非常に簡単なツールが見つかりました。

それがこちら、srctohtmlというツール。

非常にありがたいサイトだったのでこちらに書いておきます。

プログラムのソースコードをブログ記事にスクロールで表示せるツール・折り返し・改行・タブを見やすく貼り付け

使い方は簡単です。

上記サイトに入って、ソースコードをべちゃっと貼り付けます。

そして、「HTMLに変換」ボタンを押したら、HTML 形式のコードに自動変換。

それをコピペして、ブログ記事の HTML 用の入力画面上にペタッと貼り付けるだけ。

それで綺麗にソースコードを貼り付けることができます。

例えば、下記のソースコードをベタ書きブログのテキストにべた書きするとこんな感じ（ソースコードは、VisualC#2019逆引き大全 500から引用）

↓

中かっこが、全て左側にひっついてしまって階層がわかりにくくなってしまってます。

それが、今回のツールを使うとこんな感じ。いいですね↓

2. namespace wpf418
3. {
4.     /// <summary>
5.     /// MainWindow.xaml の相互作用ロジック
6.     /// </summary>
7.     public partial class MainWindow : Window
8.     {
9.         public MainWindow()
10.         {
11.             InitializeComponent();
12.             this.Loaded += MainWindow_Loaded;
13.         }
15.         ViewModel _vm;
17.         private void MainWindow_Loaded(object sender, RoutedEventArgs e)
18.         {
19.             _vm = new ViewModel()
20.             {
21.                 Item = new Person()
22.                 {
23.                     ID = 0,
24.                     Name = “masuda”,
25.                     Age = 50,
26.                     Address = “板橋区”
27.                 }
28.             };
30.             this.DataContext = _vm;
31.         }
33.         private void Button_Click(object sender, RoutedEventArgs e)
34.         {
35.             _vm.Message = $”{_vm.Item.Name} さん、登録をありがとうございます”;
36.             _vm.Save(new Person()
37.             {
38.                 Name = _vm.Item.Name,
39.                 Age = _vm.Item.Age,
40.                 Address = _vm.Item.Address
41.             });
42.         }
43.     }
44. }

ありがたく、私の別サイトで使わせていただいています。