HugoのStackというテーマ

下記サイトで新しいテーマを設定していました。

🔗 k-kaz が Hugo で遊ぶサイト

先週、とりあえず公開できるようになった時点でアップしましたが、その後も調整を続けて、ようやく見られるようになったかなと思います。
正直、まだ弄りたいところもありますけどね。

コードブロックにファイル名を表示

これも実現したのですが、ついでに当サイトでもやってみました。

config.yaml
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

services:
    disqus:
    shortname: ""
    googleAnalytics:
    id: ""
    instagram:
    accessToken: ""
    disableInlineCSS: false
    rss:
    limit: -1
    twitter:
    disableInlineCSS: false

実際の記述

表示上は見えていない設定部分を抜き出し。

```yaml {name=config.yaml linenos=true}

コード（1行目～12行目）のすぐ上に書くので、0行目にこれがあるイメージです。

記述メモ
```yamlコードブロックの記述形式
name=config.yamlファイル名として表示する文言
linenos=true行番号を表示（非表示はfalse）

ハイライトをすると行番号の位置がちょっとズレる

ハイライトを付ける機能もあるんですね。

4行目と6行目にハイライトを入れてみました。
行番号の位置がズレます。 ← 2024/09/11 直しました。
行番号用のスクロールバーが出てきて、動かすと番号は確認できます。

config.yaml
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

services:
    disqus:
    shortname: ""
    googleAnalytics:
    id: ""
    instagram:
    accessToken: ""
    disableInlineCSS: false
    rss:
    limit: -1
    twitter:
    disableInlineCSS: false

ちなみにハイライトはこんな感じで書きます。
```yaml {name=config.yaml linenos=true hl_lines=[4,6]}

最後のhl_lines=[4,6]です。

スタイルシートをイジれば直せそうですが、ちょっとやってみて面倒だったので ハイライト使わないもん！ といったん放置しました。

いつかここの表示が直っていたら、 頑張ったんだな と思ってください。

2024/09/11 ハイライトで行番号がズレるのを直しました

コードブロックに行番号を表示した場合はtableが使われ、行番号とコードがtdで分かれます。

イメージ
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<table>
    <tr>
    <td> <!-- 幅を調整したいところ（ここから） -->
      <span>No.1</span>
      <span>No.2</span>
    </td> <!-- 幅を調整したいところ（ここまで） -->
    <td>
      <span>1行目のコード</span>
      <span>2行目のコード</span>
    <td>
    </tr>
</table>

最初のtdだけに幅を調整するスタイルを適用するのってどうやったっけ？

こういうときはGemini先生に尋ねるのが早いです。
また、他でtableを使っているところに影響が出ないように、コードブロックで使われるテーブルだけに適用したい。

こんな場合はコードブロック部分のソースを丸ごとGemini先生に投げてあげれば、そのままCSSファイルにコピペできる形で答えてくれます。ありがたや。

回答
1
2
3

.code-block-content table tr td:first-child pre {
    width: 40px; /* ここは自分で設定して調整 */
}

行番号が見切れないようにできました。

本当は固定値じゃなくて可変のほうが良いんだろうけど、開発者ツールで複数の画面サイズを試して支障なさそうだったので良しとします。