Gistをブログに貼るとタブ幅が8になる問題をCSSで解決

あなたはコードを書くときのインデントはタブ派ですか？それともスペース派ですか？
僕はタブ派なんですが、地味に困っていることがありました。
それは、Gistでブログにコードを貼ると、インデントがどうしても8文字分になってしまうんです。広すぎ…🤔

インデントサイズで2,4,8のどれを選んでも保存したら8になってしまいます。なぜ・・・？
みんなどうしてるんだろう、検索してみました。

【GitHub Gist】tab・タブ幅が自動インデントで<8>になるのを変更する方法 | 猟師の予備校！

GitHub Gist にコードをコピーした際のインデントを調整する方法 – へっぽこプログラマーの備忘録

こちらの記事を見つけてタブじゃなくてスペースにすれば4で貼れることが解ったんですが、タブ派なのでコードを修正して貼り付け直す度にスペースに変えなきゃいけないのも手間だし・・・😿

そこでスタイルシートでタブサイズを指定してみたところ、あっさり解決できました。

CSS

.gist table.tab-size td.blob-code {
	tab-size: 4;
	-moz-tab-size: 4;
}

要素指定は .gist {tab-size: 4} だけでも期待通りになるようですが、一応念のためtable要素も含めておきました。

結果

ゆるふわウェブ開発者なので機会はあまりないものの、ブログに見栄えよくコード貼るのって案外厄介なんですよね。
いくつか試してGistがいちばん気に入ったのですが、タブ問題だけがネックでした。

保存するとタブが勝手に8に変わるGistの謎仕様はいかんともしがたいですが、クセのあるiframeで出力するサービスと異なり、CSSでコントロール可能な出力コードになっているところはGistの大きなメリットですよね。

Related posts:

大画面での見え方を改善する老眼にも優しいCSSの提案 pannellum.jsをWebPやAVIF対応ブラウザなら自動切替したい