[WordPress]コードを見やすく表示するシンタックスハイライトのプラグイン

当ページのリンクには広告が含まれています。
目次

はじめに

長くなるのでとばしていいです(笑)

ある日、

プログラムコードをかっこよく表示させているブログとかあるけど僕もあんな感じの記事かきたいな~…

と思い、かっこよく表示させる方法を探っていました。

そこで知ったのがシンタックスハイライトです!

シンタックスハイライトとは

シンタックスハイライトとは
可読性を上げるためにコードに色を付けて表示することを意味します。
とりあえず、かっこよく表示されるってことは分かったのでシンタックスハイライトのプラグインを探してみました。
webでは次の2つを紹介している記事が多かったです。

Crayon Syntax Highlighter

Highlighting Code Block

自分のイメージと近いCrayon Syntax Highlighterを導入し使おうと思ったのですが、

2020現在のWordPressではサポートしていないようでうまく使うことができませんでした。

そこでHighlighting Code Blockを導入してみたんですが、書きたかったVBAコードをシンタックスハイライトさせるにはprizm.jsを導入する必要があるとのこと…

prizm.js?なにそれ美味しいの???

とりあえず、webで調べて設定してみるも上手く使えず諦めモードに入ってしまいました…

諦めかけていたその時!

Urvanov Syntax Highlighter というプラグインに出会いました!

調べてみるとCrayon Syntax Highlighterの代替プラグインで現在のWordPressでも使えるじゃありませんか!

実際に導入して使ってみたらイメージ通りの記事を書けることができました。

長くなりましたが、本記事ではシンタックスハイライトのプラグインであるUrvanov Syntax Highlighter の導入から使い方まで説明します。

シンタックスハイライトとは

「はじめに」でも説明した通り、シンタックスハイライトとは可動性を上げるためにコードに色を付けて表示することを意味します。

使用例としてはこんな感じです。

シンタックスハイライトのプラグインUrvanov Syntax Highlighter

シンタックスハイライトのプラグインであるUrvanov Syntax Highlighterを使うとこのような表示をすることができます。

導入方法

Urvanov Syntax Highlighterの導入方法について説明いたします。

  • WordPressの「プラグイン」タブにアクセスし、左上にある「新規追加」をクリックして下さい。
  • 「プラグインの検索…」に「Urvanov Syntax」と入力し検索するとUrvanov Syntax Highlighterがヒットいたします。

  • プラグインを「有効」にして下さい。

お疲れ様です。これで導入完了になります。

設定

特に設定しなくても十分使うことができます!

表示スタイルは「テーマ」にあるプルダウンリストで変更することができます。

表示スタイルは「リアルタイムのプレビューを有効にする」にチェックを入れることで確認することができます。

使用方法

投稿エディタの「ツールバー」にある「<>」をクリックしてください。

するとUrvanov Syntax Highlighterのエディタが立ち上がります。

エディタ画面の基本的な項目について説明します。

タイトル:挿入したシンタックスハイライトに表示するタイトルを入力します。

プログラム言語:何のプログラム言語であるのか表示することができます。

コード:コードを記述する欄です。

まとめ

Urvanov Syntax Highlighterを導入することでシンタックスハイライトを使用することが出来、非常に見やすい記事を作ることができます。

コードの紹介をしたい記事を書くならば導入することをお勧めします。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

静岡で飲食店巡りやら釣りやらして自由気ままな生活を満喫している20代男性。
暮らしの中で感じたオススメ情報を発信し皆様の役に立てればとブログ運営をしてます。
ここんところウィスキーにはまってます。
■得意ジャンル:グルメ、Excelなど

コメント

コメントする

目次