kenshin-tanaka.com

北九州在住フリーランス。web、デザインなど好きなこと書きます。

PHP web WordPress

プラグインなし!ブログでコードを表示させるJS ライブラリ highlight.js を使ってみた

投稿日:2018年5月21日 更新日:

ブログ(WordPress)でコードを表示させたい。

 

けども、WordPressのプラグインって有名所だと重いらしいし、いい感じのやつ見つけても最終更新が1年近く前だったり微妙なものしか見つからない…

そこでいつもお世話になっているLIGブログってどうなのかな、って思ってみてみるとhighlight.jsというJavaScriptライブラリを使用していることが分かりました。

 

こんにちは、@田中謙臣です。北九州でフリーランスのwebデザイナーしております。

ここでは、その概要WordPressでの構築方法ならび使用方法を紹介します。

 

JavaScriptプラグイン”highlight.js”とは?

出典:highlight.js : https://highlightjs.org/

highlight.jsとは、176のプログラミング言語を79のスタイルで表現できるJavaScriptプラグイン

BSDライセンスなので、そのルールを守って使用することが出来ます。

制作者はIvan Sagalaevさん。

 

highlight.jsのデモ

以下のような感じで使えます。

<html>
    <body>
        ...
    </body>
  </html>

これは”Monokai Sublime”というテーマ。

読み込むスタイルシートを変更することによって、デザインを変更できます。

highlight.jsのデザイン例

その他のデザイン例を見たい場合は、こちらから見れます。

highlight.js demo : https://highlightjs.org/static/demo/

 

highlight.jsの2つの構築方法

highlight.jsの構築方法は、以下の2つの方法から

  1. CDNで読み込む
  2. ダウンロードして使用

CDNから読み込む方法

CDNだと主要な23のプログラミング言語で使用できます。

参考:主要な23のプログラミング言語

Apache, Bash, C#, C++, CSS, CoffeeScript, Diff, HTML, XML/HTTP, Ini, JSON, Java, JavaScript, Makefile, Markdown, Nginx, Objective-C, PHP, Perl, Python, Ruby, SQL, Shell Session

 

ダウンロードして使用

ダウンロードする場合だと使用するプログラミング言語はカスタマイズできるので、使用する言語によって決めると良いでしょう。

ダウンロードだと、上記の23のプログラミング言語以外にも、以下が使えます(長い)。

参考:highlight.jsで使えるプログラミング言語一覧

1C:Enterprise (v7, v8) ARM Assembly AVR Assembler Access log ActionScript Ada AppleScript Arduino AsciiDoc AspectJ Augmented Backus-Naur Form AutoHotkey AutoIt Awk Axapta Backus–Naur Form Basic Brainfuck C/AL CMake CSP Caché Object Script Cap’n Proto Ceylon Clean Clojure Clojure REPL Coq Crystal D DNS Zone file DOS .bat Dart Delphi Device Tree Django Dockerfile Dust ERB (Embedded Ruby) Elixir Elm Erlang Erlang REPL Excel Extended Backus-Naur Form F# FIX Flix Fortran G-code (ISO 6983) GAMS GAUSS GLSL Gherkin Go Golo Gradle Groovy HSP HTMLBars Haml Handlebars Haskell Haxe Hy IRPF90 Inform 7 Intel x86 Assembly Julia Julia REPL Kotlin LDIF LLVM IR Lasso Leaf Less Linden Scripting Language Lisp LiveCode LiveScript Lua MEL MIPS Assembly Mathematica Matlab Maxima Mercury Microtik RouterOS script Mizar Mojolicious Monkey MoonScript N1QL NSIS Nimrod Nix OCaml OpenSCAD Oracle Rules Language Oxygene Parser3 Pony PowerShell Processing Prolog Protocol Buffers Puppet PureBASIC Python profile Q QML R RenderMan RIB RenderMan RSL Roboconf Rust SCSS SML SQF STEP Part 21 Scala Scheme Scilab Smali Smalltalk Stan Stata Stylus SubUnit Swift TP Tagger Script Tcl TeX Test Anything Protocol Thrift Twig TypeScript VB.NET VBScript VBScript in HTML VHDL Vala Verilog Vim Script XL XQuery YAML Zephir crmsh dsconfig jboss-cli pf

では、CDNを使った方法と、ダウンロードして使う方法と2つの構築方法を見てきましょう。

 

highlight.jsをCDNで構築する場合

CDNの場合はとてもカンタンです。

header.phpでCDNを読み込む

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

 

書きたいコードをエスケープ処理

hightlight.jsではコードをそのまま記載しても機能せず、エスケープ処理を行う必要があります。

エスケープ処理を行うには、以下のサイトが便利です。

HTML特殊文字変換|コードをホームページに載せる時に便利 | すぐに使える便利なWEBツール | Tech-Unlimited : http://tech-unlimited.com/escape.html

 

書くコードを<pre><code> … </pre></code>で括る

ブログに載せたいコードを<pre><code> … </pre></code>で括ります。

こんな感じですね。

<pre><code>
  <html>
    <body>
        ...
    </body>
  </html>
</code></pre>

 

 

highlight.jsをダウンロードして構築する場合

highlight.jsをダウンロード

まずは使用したいプログラミング言語にチェックを入れ、highlight.jsをダウンロードします。

 

hightlight.jsのアップロード

ダウンロードしたhiglight.zipを解凍し、highlightフォルダを任意の場所にアップロード。※今回はテンプレート内のjsフォルダ下層にフォルダごとアップロードしました

 

header.phpでhighlight.pack.jsを読み込む

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/js/highlight/styles/default.css">
<script src="<?php echo get_template_directory_uri(); ?>/js/highlight/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script> 
<!-- 子テーマを使っている場合は、<?php echo get_stylesheet_directory_uri();?>で読み込む -->

 

書きたいコードをエスケープ処理

hightlight.jsではコードをそのまま記載しても機能せず、エスケープ処理を行う必要があります。

エスケープ処理を行うには、以下のサイトが便利です。

HTML特殊文字変換|コードをホームページに載せる時に便利 | すぐに使える便利なWEBツール | Tech-Unlimited : http://tech-unlimited.com/escape.html

 

書くコードを<pre><code> … </pre></code>で括る

ブログに載せたいコードを<pre><code> … </pre></code>で括ります。

こんな感じですね。

<pre><code>
  <html>
    <body>
        ...
    </body>
  </html>
</code></pre>

 

まとめ

エスケープ処理をするのには少し手間がかかりますが、構築してしまえばあとはカンタンです。

ただ、<pre> <code>をベタ打ちするのが面倒なので、辞書登録してた方がいいかもですね。

-PHP, web, WordPress
-, ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

jQueryに依存しない高機能スライダー「Swiper」

  「どのスライダーライブラリを使うか」は、webデザイナーにとって宗教戦争のようなもので、私も1年ぐらいずっと悩んでました。 その戦争も終焉を迎えることになった。 そう、「Swiper」と …

webサイトのアクセス数を見える化!Googleアナリティクスの設定方法

webサイトを使って集客や認知度を向上するためには、「なんとなく」ではなくデータでしっかりと把握して改善していく必要があります。 把握するべきデータとしては「アクセス数」や「アクセス元」「滞在時間」「 …

no image

HTTPの危険性とHTTPS化(常時SSL)のメリット

現状 Google Chromeのバージョン68から全HTTPサイトで「保護されていません」の警告表示 Chromeのシェア率は55%以上(シェア率上昇中) Chromeのアップグレードは自動的に実施 …

no image

PHPの基礎が学べる本をまとめてみた

突然ですが、WordPressやEC-CUBEでのweb制作の幅を広げるために、PHPをもう一度基礎からみっちり学び直そうと決意。 「PHP 基礎 本」で検索して表示された上位10サイトを集計してみま …