Gist | k-kaz が好きなことを書く

スタイル確認用ページ

久し振りにスタイル確認用のページを更新しようと思いまして、これまではこういう風に表示されますよという結果だけを載せていましたが、どのような記述をするとその結果が出てくるのかも書いてあったほうが親切だと思いました。私に。だって私の確認用だもの。

通常のMarkdownで用いられる機能は問題無く書けるんですけどね。
こんな感じで。

[タイトル](リンク先のURL)

リンク先のタイトル ← URL設定していないので404になります。

ただ、Hugoの中で作っているショートコードは、元の記述が表示されずに展開されちゃうんですよね。

<div class="memo">
    <span class="memo-title">メモ</span>
    <p>
メモ書きを記事内に挿入するためのショートコードです。
うまく出来ているでしょうか。
</p>
</div>

メモ

メモ書きを記事内に挿入するためのショートコードです。うまくできているでしょうか。

本当は＜div class =“memo”＞から＜p＞までは、｛｛％ memoメモ％｝｝と記述したんです。
↑ 表示するように一部全角で書きました。

GitHubの中にある機能で、Gistというものがあります。
「ギスト」なのか、「ジスト」なのかという戦いもあるようですが、Wikipediaによると「ギスト」でした。
私はGitHubが「ギットハブ」なので、同じく「ギ」で始まるだろうと「ギスト」読みだったので安心しました。

簡単に書くと、スニペットの管理、公開ができる機能です。
ブログなんかに貼り付けることができるので、今回のように展開されたくないコードなんかを紹介するにはうってつけ。

さきほどの困ったショートコードもこの通り。

素晴らしい。

ただし、こちらのサイトで表示させたとき2つの問題がありましたので、少々手直しをしました。

コードが表示されている部分のスタイルが、このようになっていました。不要なところは削除済み。

.gist-data {
background-color: var(--bgColor-default, var(--color-canvas-default))
}

私が使っているスタイルシートには --bgColor-default も --color-canvas-default も定義されていないので、「じゃあ、白にする」と判断されるみたい。
結果、背景も文字も白で見えなくなると。

それぞれを theme-vars.css に定義しても良いのですが、記事の表示を担当している post-single.css で強制（!important）指定しました。

.gist-data {
    background-color: var(--entry) !important;
  }

--entry は、theme-vars.css に定義されていて、ライトモードのときは白っぽい色、ダークモードのときは黒っぽい色が指定されています。

どこかしらの影響でしょうが、2行しか表示されず、スクロールバーも出ません。
こちらもスタイルシートの post-single.css に追記しました。

.markdown-body > * {
    overflow: auto;
  }

この2つの修正で、文字が見えるようになり、途中で切れることも無くなりました。
めでたしめでたし。