プラグイン

【WordPressプラグイン】コードを綺麗に表示する「HTML Editor Syntax Highlighter」

2020年4月27日

【WordPressプラグイン】コードを綺麗に表示する「HTML Editor Syntax Highlighter」

ウェブサイト・ブログを運営している中で、HTML・PHP・CSSなどソースコードを書きたい場合があると思うのですが、WordPressのデフォルトのフォーマットの「コード」ブロックでは、少し味気無い感じに見えてしまいます。

そんな時に、コードをちょっとおしゃれに綺麗に表示してくれるプラグイン「HTML Editor Syntax Highlighter」について解説していきます。

コードを綺麗に表示する「HTML Editor Syntax Highlighter」

HTML Editor Syntax Highlighterとは

HTML Editor Syntax Highlighterの概要

HTML Editor Syntax Highlighterは、WordPressで構築したウェブサイトの記事内でソースコードを綺麗に表示させるプラグインです。複数のソースコードに対応しており、文字色も変わるため見やすい表示ができます。

HTML Editor Syntax Highlighterの特徴

  • ソースコードを綺麗に表示できる

HTML Editor Syntax Highlighterのダウンロード先

【WordPress公式ページ】HTML Editor Syntax Highlighter
https://ja.wordpress.org/plugins/html-editor-syntax-highlighter/

HTML Editor Syntax Highlighterの設定

HTML Editor Syntax Highlighterは基本の設定のままでも問題なく利用できます。

設定はお好みで設定を変更してください。当ブログで行っている設定変更は以下になります。

【基本設定】

言語の表示:「コードブロックに言語名を表示する」にチェックをつける

行数の表示設定:「コードブロックに行数を表示する」にチェックをつける

コードカラーリング(フロント側):「Light」

コードカラーリング(エディター側):「Light」

フォントサイズ(PC):「font-size16px」

フォントサイズ(SP):「font-size16px」

高度な設定に関しては、デフォルトのままで設定しています。

「使用する言語セット」や「独自カラーリングファイル」「prime.js」など表現の幅を広げる設定も可能です。

HTML Editor Syntax Highlighterの使い方

左メニューから「投稿」>「新規追加」をクリックします。

投稿画面では、ブロックの追加から「Higlighing Code Block」を選択して追加できます。

あとはHTML・PHPやCSSなどのソースコードを記述して、左下から言語を選択すれば完了です。プレビューボタンをクリックして、公開側の表示を確認しましょう。

タグやクラス名の色が適切に分かれているので、おしゃれで見やすい表示になっています。

ちなみに「コードカラーリング(フロント側)」で「Dark」を選択した場合は、上記の画像のような表示になります。個人的には少し見にくく感じたので、「Light」に変更しています。

当サイトで申込みが多いプログラミングスクール・教室はこちら!

【1位】ポテパンキャンプ:Webエンジニア輩出率No1

【2位】CodeCamp:満足度96.6%のプログラミングレッスン

【3位】DMM WEBCAMP:プログラマー転職成功率98%

【4位】TechAcademy:プログラミングスクール受講者数No1

【5位】GEEK JOB:満足度・転職率が高い・20代社会人経験者向け

-プラグイン