WordPress内の記事でコードを綺麗に表示できる「Prism For WP」のちょっとしたカスタマイズ方法

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

本日は業務メモを兼ねたちょっとしたカスタマイズです。技術系のブログでhtmlタグやJavascriptなどをコピペしやすい状態で表示するためのツールは「シンタックスハイライター」と呼ばれています。

当サイトは記事のなかでは「ソースコードを掲載」するために「Prism For WP」を使っています。シンタックスハイライターは基本的に『技術者が使う専門性の高いツール』なので記事として取り上げたことはありませんが、初心者でも出来るカスタマイズ方法があったので業務メモとして残しておきます。

記事でコードを綺麗に表示できる「Prism For WP」をカスタマイズする方法

参考までにhtmlタグを表示させると以下の通りです。

Prism For WPでソースコードを表示した例

<html>
<head>
<meta charset="utf-8">
<title>タイトルが入ります</title>
</head>
<body>
メインのコンテンツが入ります
</body>
</html>

ただ、「html」を表示しているのに下記の通り言語部分に「markup」と表示されてしまいます。できれば「html」と表示させたいですよね。htmlは「HyperText Markup Language」なのでマークアップ言語なのは間違いありませんが、一般的にはhtmlと表記した方がわかりやすいのは言うまでもありません。

ソースコードを差し込むときにhtmlが選べない

言語を選択する画面に「html」はありません。htmlの表示は「Markup」を選ぶしか方法がありません。

markupをhtmlに変更した例

しかし、実は後から少しだけ手を加えると下記の通り「markup」を「html」に変更できます。

<html>
<head>
<meta charset="utf-8">
<title>タイトルが入ります</title>
</head>
<body>
メインのコンテンツが入ります
</body>
</html>

方法はシンプルで「エディター」をテキストモードに切り替えて<code class="language-markup">となっている部分を<code class="language-html">に置き換えるだけでOK。カンタンですよね。

Search Regexで一括で入れ替える

ただ、毎回毎回ソースを差し込むたびに「差し込んでは入れ替えて」と作業をするのは少し面倒なので後から一気に入れ替える方法がおすすめです。入れ替え作業には「Search Regex」を使います。

Search patternに「language-markup」と入れて、Replace patternに「language-html」と入れた状態で「Replace & Save」を押せばすべての記事にある「markup」が「html」へ置き換えられます。

なお「Search Regex」については別記事にしましたので下記をご一読くださいませ。

WordPressサイトで過去記事の文章をあとから全部一括で置き換える方法

Prism For WPをインストールする方法

プラグインのインストールは「プラグイン > 新規追加」から「Prism For WP」と検索すればOKです。

すると下記が表示されますのでインストールして有効化をすればOKです。

ちなみにプラグインの更新は数年前のまま止まっていますが、シンタックスハイライター系のプラグインを色々と試した上でもっとも使いやすかったのが「Prism For WP」なので現在も愛用しています。

まとめ

シンタックスハイライター系はプラグインを導入しなくてもテーマに直接導入する方法もあります。見た目の好みと対応している言語によって最適な方法は異なってくるのでいくつか試してみてくださいませ。

最新式の無料プラグインを事前公開

WordPressは公式サイトに登録されているプラグインだけでは機能を補足しきれません。当サイトでは使いやすさを追求した魅惑的なプラグイン無料でダウンロードいただけます。運営ホームページのマーケティング力をさらに高めるチャンスです。まずは無料でDLしてお試しくださいませ。
改良されたプラグインを確認する