word pressでコードを見やすくする方法

未分類

wordpressにコードを載せる場合、コードブロックがありますがデフォルトの状態だと行番号も色もなくみづらいです。

const VideoData = () => {
  axios.get('http://localhost:3000/videos/index')
    .then((response) => {
      videos.value = response.data
      console.log(response.data)
    })
    .catch( (error) => {
      console.log(error)
    })
};

本記事では上記のような読みづらいコードを改善するために「Highlighting Code Block」というpluginを使用して、見やすく、高機能化する方法を紹介します!

ちなみに、plugin追加後の見た目は下記のようになります!

const VideoData = () => {
  axios.get('http://localhost:3000/videos/index')
    .then((response) => {
      videos.value = response.data
      console.log(response.data)
    })
    .catch( (error) => {
      console.log(error)
    })
};

Highlighting Code Blockを追加することで、

  • シンタックスハイライト(コードに色がつく)が適用されコードの見やすさが上がる
  • copyボタンがあり、簡単にコピーができるようになる。
  • 行番号がつく
  • 言語名が表示される。

などなど、コードを書くブログを書いている場合は、このplugin導入で見やすいブログを実現することができます。

Highlighting Code Blockを導入する

まずは、プラグインをインストールします。

Highlighting Code Blockをインストールする

管理画面から、サイドバーのプラグインから「Highlighting Code Block」を検索して、下図のプラグインをインストールします。

「今すぐインストール」をクリック後、「有効化」をクリックします。

これでインストール完了です。ブロック選択時に、Highlighting Code Blockが追加されています!

Highlighting Code Blockをカスタマイズする

Highlighting Code Blockは、「設定」⇨「[HCB] 設定」からカスタマイズの設定をすることができます。

上記のように背景を黒くしたい場合は、「コードカラーリング(フロント側)」をDarkに設定します。

編集画面も黒い画面で確認したい場合は、「コードカラーリング(エディター側)」もDarkに設定します。設定が終了したら、下までスクロールして「変更を保存」をクリックすると変更が反映されます。

保存しないと、変更しても反映されないので注意しましょう。

Highlighting Code Blockを実際に使ってみる

wordpressの編集画面で、「/code」と入力すると、Highlighting Code Blockが追加されているので、クリックしましょう。そうすると、編集画面が起動します。

以下が編集画面になります。

①は言語の選択画面です。その言語に合ったシンタックスハイライトが適用されます。

②はコードのタイトルです。右上の小窓に②に記載したファイルの名前が表示できます。

③では行のハイライトを指定できます。

実際に上記の設定を適用したものが↓になります。

const VideoData = () => {
  axios.get('http://localhost:3000/videos/index')
    .then((response) => {
      videos.value = response.data
      console.log(response.data)
    })
    .catch( (error) => {
      console.log(error)
    })
};

まとめ

以上、Highlighting Code Blockの設定方法でした。個人的に、自分の書いたブログを見直すことが多く、コードが見やすくなることでストレスが減るので、すごくいいpluginだと感じています。

ブログでコードを掲載している人はぜひHighlighting Code Blockを導入していただき、見やすいブログづくりの手助けになればと思います。

コメント

タイトルとURLをコピーしました