Webページなどでプログラミン言語のハイライトをしてくれるjavascriptのライブラリに
hightligh.jsという便利なパッケージがあります。
Page: highlight.js
しかしながら、Laravelなどでお馴染みのbladeファイルはハイライトされません。
今回はhighlight.jsに既存のPHPのシンタックスライブラリを利用して、
bladeテンプレート用のプラグインを入手、ビルドしていきます。
（ ビルドをする必要があるので、事前にnode.jsをインストールしておいて下さい * node.js 4.1.1でも問題なくビルド出来ました ）
- githubからhighlight.jsのソースの入手
- 依存するパッケージのインストール
- プラグインファイルの作成
- ファイルをビルド
* 全てコマンドライン上で進めていきます
ソースはgithubからコマンドライン上でgitコマンドを打って入手するか、zipファイルを入手します
git clone https://github.com/isagalaev/highlight.js.git
highlight.jsというフォルダが作成され、その中にソースファイルが格納されます。
次にビルドに必要なパッケージをnpmコマンドを使ってインストールします。
> cd highlight.js
> npm install # 環境によってはsudoを使う
依存するパッケージを入手した後、highlight.js/test/detectフォルダにbladeというフォルダを作り、
その中にdefault.txtというテキストファイルを作成します
> cd test/detect
> mkdir blade
> cd blade
> touch default.txt # ブランクファイルで問題ありません
次にシンタックスハイライトに必要なファイルを入手します。
このファイルはphp用のハイライトファイルに変更を加えたものです。
> cd ../../../src/languages
> wget https://gist.githubusercontent.com/cupof-github/2b3dce91be740486045a/raw/37541ab671be984b200a71e43a4ed40816ad3b2e/blade.js
（* ファイルの中身を確認したい方や、wgetコマンドが使えない環境の場合はコチラからダウンロードし、
hightlightjs/src/languagesフォルダにblade.jsファイルを設置してください）
設置を終えると、次はビルド作業に入ります。
highlightjsのルートフォルダで以下のコマンドを入力してビルドします。
> cd ../../
> node tools/build.js -t browser
buildというフォルダが作成されhighlight.pack.jsファイルが作成されると完了です。
htmlのcodeタグ中のpreタグ内で”language-blade hljs”のクラスを指定すると使用出来るようになります。
{{-- <pre><code class="language-blade hljs"> </code> </pre> --}}
@inject('users', 'App\User')
@can('update', $post)
{{-- The Current User Can Update The Post --}}
@endcan
@extends('layouts.master')
@section('title', 'Page Title')
@endsection
@foreach($users as $user)
{{ $user->firstname }} / {{ $user->lastname}}
@endforeach
@unless (Auth::check())
You are not signed in.
@endunless
一見、手間の掛かる作業に思えますが、
言語用のプラグインさへ完成していれば、ビルドまで2 - 3分で出来ます。
blade用のプラグインファイルも書いたのですが、既存のPHP用のものに変更を加えただけなので、
あまり時間が掛かりませんでした。(* 把握も含めて一時間前後)
IT系のブログなどを書いている人以外は使いドコロが難しいですが、
機会があれば参考にしてください。
