コードをいい感じに表示させたりしたくて試行錯誤してました

してました。

ソースコードの表示とか。

#こういうの。
echo KOUIUNO

なんかその手の記事ってソースコードがいい感じに表示されますよね。（ふんわり導入）

そういうのにあこがれていたので、AWSの引っ越し記事を書くついでにそのへんの表示をうまいことできる方法を調べてました。

で、

つまってたんですが、ものすごくしょうもない理由で解消したので記念に記事を書いてます。

しょうもない理由というのは、その、ほんとにしょうもないんですが。

そのへんのブログから拾ったコードに全角スペースが混じってたのをそのままコピペしたせいでうまく読み込めてませんでした。

本当にしょうもないです。

コードの見せ方にはざっくりと2種類、

文章の途中でkonna-kanjiにちょっと雰囲気を変えた文字列として表示する方法と、

const KONNA_KANJI = ‘こんな感じ’;

みたいにブロックで表示する方法があります。

それぞれ、codeタグとpreタグで囲われるみたいです（preの方はさらに内側にcodeがいるらしい）。

codeの方はスタイルシートで見せ方を調整できて、preの方はプラグインやCocoonの設定にお世話になる感じみたいです。

codeのほうは単純にフォントを変えたりちょっと前後にスペースを開けたり背景色を付けたりして見やすくするだけですから、なんらかの方法でcssを追記するだけでどうにかできる範囲です。

preの方は、サイトによってはコード全体をコピーできるボタンがあったりとか、長いコードの場合は改行せず横にスクロールできたりだとかで、ちょっと特殊な操作ができたりしますよね。
そういうのには、プラグインやらテーマの設定でどうにかすることになるみたいです。

そのへんのサイトにやり方は書いてあります。

codeの方は……ちょっと罠に引っかかったので……その……。
なんか探せば出てきます。

preの方はこちらにお世話になりました。

プラグインのHighLighting Code Blockというのを使います。

このプラグイン、ブロックエディター標準のコードブロックとは別のコードブロックを提供するというプラグインです。
新しいブロック上で/hcくらいまで打ち込むと特定されます

なので、説明を読まずに使うと何も起きませんが！？となります。

起きてないのは自分の頭です。

ただこれ、当然ながら普通のコードブロックを置換するものではないので、いままで作成してきた記事のコードを置き換える必要があります。
そこはちょっと気になりますが、幸いにして始動して間もない新品サンドバッグですのでどうにかするとします。

ぶっちゃけ普通のコードブロックでも最低限の表示はできるので、気にしないという選択肢もありといえばありかなと思います。

コードの見た目を整えるために色々してました。

主に自縄自縛ですが。

しれっとできたら記事にするまでもなくしれっと適用しようかと思っていたのですがつまったのでネタにしておく構えです。

全角スペースには気をつけましょう。