HeaderImage

記事内でCSSやHTMLを引用してくるので、その見栄えを整えます。今後、プログラム系の記事も書くだろうから、C#/Java/Powershellとか、よく使ってる言語系もセットで入れてしまいます。

CONTENTS [非表示]

参考サイト

もちろん、ふじろじっくさんのところにある記事を参考に開始します。ここ。

ふじろじっく
highlight.js を導入しました
ソースコードの表示を見栄え良くして、便利なコピーボタンも付けました。
インドアな日々
Blogger ブログに表示するソースコードを見やすくしたい 【 highlight.js 】

選んだテーマ

普段、使ってるのは、VSCODEとかVS-Studio。Webでよくコード見るところって、GithubとかStackoverflowとか。VS2015と迷った末、Stackoverflow-Darkを選択いたしました。

結果、こんな感じになりました。

 
// Test C# Sample Code
using System;
using System.Collections.Generic;
 
class MyClass
{
    static void Main()
    {
        var list = new List();
        list.Add("Red");
        list.Add("Green");
        list.Add("Blue");
        Console.WriteLine(list[2]);
    }
}

行番号とコピーボタン追加

これやるにあたり、この二つは欲しいよなぁと思ってましたが、どちらも記事内に書かれていましたので、もうそのまんま真似していくだけですね。

まずは、行番号。紹介されている場所のスクリプトをインラインで追加しました。色はちょっと薄め、マージン多めとしました。

ボタンは、ほぼそのまんま。言語ラベルにC# やら、いろいろ追加しました。

例によって、そのまんま、ものまね導入でした。