記事にソースコードをきれいに表示する方法

ある程度ブログを書いていると、備忘録としてカスタマイズ方法などを記事にしたい時にHTML や CSS のコードを表示されないやきれいに記載したい場合はここで3つの方法を紹介します。

方法1. WordPressのデフォルトエディターを使用してコードを表示する

コードを表示するブログ投稿またはページを編集する時に、投稿の編集画面で、ブロック追加ボタンをクリックし、ブロック検索のところにコードを入れて検索したら<>を出てくるので、それを選んで普通にコード記事を書いてプレビュー表示で効果が分かります。

方法2.プラグインを使用してコードを表示させる

WordPressのダッシュボードから「プラグイン」「新規追加」で、検索窓に「Crayon Syntax Highlighter」と入力。
インストールして有効化したらプラグインの設定となるのですが、デフォルトのままでも十分使えます。
プレビューで確認すると、「Crayon Syntax Highlighter」プラグインによって綺麗にコードが表示されています。

方法3. WordPressでコードを手動で表示する(プラグインまたはブロックなし)

この方法はより多くの作業を必要とし、常に意図したとおりに機能するとは限らないため、上級ユーザー向けです。
まず、コードをオンラインのHTML entities encoder(貼り付けたソース言語をそのままHTML形式に変換してくれるツール)を使って変換する必要があります。次に、コードをentities encoderからコピーしてテキストエディターに貼り付け、<pre>と<code>タグで囲みます。
エディターでコードが化けている見えるですが、更新とプレビューを押したらきれいに表示されます。


以上、3つの方法を簡単で紹介しました。ちなみに、わたしは完全に初心者なので、方法1を使ってます。


コメントを残す