Qiitaなんかの技術ブログみたいに
エディタ風のソースコードを表示させる方法をご紹介します。
3753817_m

完成形としてはこんな感じです。

fetch('http://example.com/movies.json')
  .then(response => response.json())
  .then(data => console.log(data));


code-prettifyのダウンロード

Googleの開発したcode-prettifyをダウンロードします。
これをはっつけるだけで
かんたんにクールにソースコードを表示できます。
以下からダウンロードできます。

code-prettifyをダウンロードする

「Code」→「Download.zip」と進んでダウンロードします。
スクリーンショット 2021-02-04
            2.49.50
ダウンロードしたファウのうち以下の3つを使用し、
それぞれ自分のブログにコピーします。

ファイル名 移動場所
prettify.js jsフォルダ
lang-css.js jsフォルダ
prettify.css cssフォルダ

head内への記述

<link rel="stylesheet" href="/css/prettify.css">  
ライブドアブログの場合は
「ブログ設定」→「デザイン設定」→「カスタムJS」→「head内」
に記述します。
スクリーンショット 2021-02-04
            3.07.53

body要素最下部への記述

<script src="/js/prettify.js"></script>
<script src="/js/lang-css.js"></script>
<script>
  prettyPrint();
</script>
ライブドアブログの場合は「body内」に記述します
スクリーンショット 2021-02-04
            3.07.05

使い方

<pre class="prettyprint">
<!-- ここにソースコードを貼り付ける -->
</pre>
基本はこれだけで使えます。

行数を表示させる場合

linenumsをクラスに追加します。
<pre class="prettyprint linenums">
<!-- ここにソースコードを貼り付ける -->
</pre>

最低限のカスタマイズ

行数表示の際にコードがはみ出る問題の改善

デフォルトのままで行数を表示させようとすると、
コードがはみ出てしまうのがきになると思います。
prettify.cssに以下の記述を追加します。
li.L0, li.L1, li.L2, li.L3, li.L4, li.L5, li.L6, li.L7, li.L8, li.L9 {
    list-style-position: outside;
    margin-left: 36px;
    padding-left: 16px;
    border-left: 1px solid #75715e;//縦線
  }

使用しているテーマ

私の以下のテーマを使用しています。

Google-prettify-monokai-themeをダウンロードする

ダウンロードしてprettify.cssを上書きするだけです。

その際に上記の行数表示修正のコードを
追記するもの忘れないようにアップロードし直しましょう。

以上となります。お疲れさまでした。

参考

参考にさせていただきました。