Web関連

ブログでソースを見やすくする方法(シンタックスハイライト)

  • LINEで送る

前回書いた記事(ブログなどでソースコードを分かりやすくハイライト表示させる方法)
https://monocalla.com/web-blog160627

から、新しいプラグインへ変更したので、
導入方法や使い方の説明をしたいと思います。

導入の方法

step01/ プラグインをダウンロード

今回は「Prism Syntax Highlighter」というプラグインを使用します。

ダッシュボード →プラグイン →新規追加 → Prism Syntax Highlighterを検索。
有効化にすると、設定にPrism for WPの設定メニューが追加されます。

直接ファイルをダウンロードする場合は、公式サイトを確認してください。

公式サイト  Prism Syntax Highlighter

(!)プラグインを導入する際は、必ずバックアップを取ってから行ってください。

※プラグイン適用により何か問題が起こりましても責任は一切取れません。予めご了承下さい。個人のご判断でお願いいたします。

step02/ 設定する

ダッシュボード→設定→ Prism For WP
を選択すると下記の設定ページへ移動します。

モノカラが設定しているのは、
テーマ:Tomorrow
言語:Markup CSS
CSS Extras (Requires: css)
C-Like
Java-Script (Requires: clike)
PHP (Requires: clike)
機能: Copy to Clipboard
となります。

「変更を保存」をクリックすれば設定は完了です。

step03/ ブログ記事に適用させる

では早速ブログに適用させていきましょう。

適用させたいソースを下記のタグで囲みます。

<pre><code class="language-使用したい言語">ここに囲みたいソースを入れる。</code></pre>

「使用したい言語」の部分に言語の種類を入れます。
例えば、HTMLならMarkup、CSSならcssと入れます。
そうすると、言語に合わせてソースの色を変更してくれます。

大切なこと

表示させたいソースの中に
< や > が含まれている場合は、
そのまま入れてしまうとうまく表示されません。

変換する必要があります。

ニコニコ大百科(ヤマカッコ)
https://dic.nicovideo.jp/a/%26lt%3B%26gt%3B

たくさんのソースですと変換が大変なので、
文字列置き換えサイトで一気に変更したり、Dreamweaverで置換えたりしてください。

文字列一括置換え
http://etc.webclap.com/string_replacer/

エディタでも入れられる方法もあるようですが、新しくなったエディタで項目を探してみましたが見つけることができませんでした。

参考になりましたでしょうか?

ブログでシンタックスハイライトを使用すると、見ているユーザーも分かりやすく簡単にコピーもできるので、アクセスアップに繋がるのではないでしょうか。

参考になれば嬉しいです♪

  • LINEで送る