PRISMとCocoonを使ってHighlighting Code Blockでコードを表示できないときの解決策

はじめに

Prismaを使って実装のハイライトを変えようとした。
基本的にデフォルトだけだと言語の対応が少なかったので
以下の方法を参考にしてみた

WordPress プラグイン Highlighting Code Block 対応言語 追加 - しすろぐ

WordPress プラグイン Highlighting Code Block 対応言語 追加

syslog.life

しかし、実際にPrism.js,Prism.cssを指定してみたところ
なにかデザインが変なように見えたし、スタイルも適用できていないように見えた。
色々調べてみて修正方法がわかったのでメモ。

結果は以下のようなページで

StorybookのINITIAL_VIEWPORTSをストーリに指定する

概要 StoryBookのテストを作っているときに、画面サイズをIphone13 miniにしたいなと思った。 その時にどうやって画面サイズって調べるんだ?と思ったのでメモ 指定方法 StorybookのINITIAL_VIEWPORTSの

tech-blog.etolog.jp

結果

以下のようになった。

・修正前

const tmp = 1234
console.log(tmp)

・修正後

const tmp = 1234
console.log(tmp)

修正方法

現在私はClassicEditorを使って、コードを生成していたが
自動で生成された実装と干渉をして悪さをしていたようだ。
具体的には <div> クラスを削除することで正常に動作した

修正前
<div class="hcb_wrap">
  <pre class="prism line-numbers lang-ts" data-lang="TypeScript">
    <code>
      const tmp = 1234;
      console.log(tmp);
    </code>
  </pre>
</div>

修正後
  <pre class="prism line-numbers lang-ts" data-lang="TypeScript">
    <code>
      const tmp = 1234;
      console.log(tmp);
    </code>
  </pre>

さいごに

ブログで実装をメモするには大切なことなのでメモ
ただ一点問題があって、何故かドラフト投稿のときは設定がうまく反映されない….