Unengineered Weblog

PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND

Unengineered Weblog のテーマを自作した

このブログのスクリーンショット

このブログのテーマを自作してみました。

このテーマはお堅い(?)ソフトウェア技術書から発想しました。「プログラミング言語C」とかちょっと前のオライリーの本とかをイメージしています。背景色に書籍の紙をイメージしたクリーム色、フォントは明朝体、ボーダーラインは少なめ、文章中の強調とセクションタイトルは太字のゴシック体といった感じです。 ちなみに書籍に使われているの淡いクリーム色の紙を淡クリームキンマリというそうです。初めて知りました。

シンタックスハイライト

コードのシンタックスハイライトを無くしてみました。技術書にはシンタックスハイライトがついていないことも多く、それを真似してみました。ただコメントには色をつけました。

package main

import (
    "fmt"
    "math/rand"
    "time"
)

func main() {
    for i := 0; i < 10; i++ {
        dur := time.Duration(rand.Intn(1000)) * time.Millisecond
        fmt.Printf("Sleeping for %v\n", dur)
        // Sleep for a random duration between 0-1000ms
        time.Sleep(dur)
    }
    fmt.Println("Done!")
}

go.dev/play の 「Sleep」サンプルを引用。

シンタックスハイライトを無くしてもそんなに読みづらくはないんじゃないかなと思っています。以前 Go の公式サイトにシンタックスハイライトが無いことが話題になりました。これも意識しています。とはいえ僕はコーディングするときはシンタックスハイライトが使えるなら使っています。シンタックスハイライトがあるとクオートの閉じ忘れの発見が簡単ですね。

blog.stenyan.jp

ただ diff の出力だけは着色によって見やすさが大きく変わるので、色をつけました。

--- main.go  2024-06-17 18:00:56
+++ main_new.go   2024-06-17 18:01:22
@@ -8,7 +8,7 @@
 
 func main() {
    for i := 0; i < 10; i++ {
-       dur := time.Duration(rand.Intn(1000)) * time.Millisecond
+       dur := time.Duration(rand.Intn(1000)) * time.Second
        fmt.Printf("Sleeping for %v\n", dur)
-       // Sleep for a random duration between 0-1000ms
+       // Sleep for a random duration between 0-1000s
        time.Sleep(dur)

横に長いコードの表示

横に長いコードを表示した時の挙動を次のようにしてみました。

  • ブラウザのウィンドウの横幅が長いときは全部表示

このブログのページのスクリーンショット。ブラウザのウィンドウの幅が広い。

  • ブラウザのウィンドウの横幅が短いときは横スクロール表示

このブログのページのスクリーンショット。ブラウザのウィンドウの幅が狭い。

全部表示にするとサイトのレイアウトが崩れることもありますが、見やすさを優先しました。ユーザーがブラウザのウィンドウを横に広げたときは広く表示されてほしいだろうからです。

長いコード列のサンプルです。

func QueryScan(ctx context.Context, db *sql.DB, query string, args ...any) iter.Seq2[scanfunc, error]

つくりかた

このテーマは hatena/Hatena-Blog-Theme-Boilerplate から改変して作りました。GitHub で公開しています。

github.com

つかいかた

テーマストアで公開しています。どうぞご利用ください。

blog.hatena.ne.jp