highlight.jsにLaravelのテンプレートbladeのシンタックを追加する



Webページなどでプログラミン言語のハイライトをしてくれるjavascriptのライブラリに
hightligh.jsという便利なパッケージがあります。

Page: highlight.js

しかしながら、Laravelなどでお馴染みのbladeファイルはハイライトされません。

今回はhighlight.jsに既存のPHPのシンタックスライブラリを利用して、
bladeテンプレート用のプラグインを入手、ビルドしていきます。
( ビルドをする必要があるので、事前にnode.jsをインストールしておいて下さい * node.js 4.1.1でも問題なくビルド出来ました )

 

プラグイン作成にあたっての大まかな流れ 

  1. githubからhighlight.jsのソースの入手
  2. 依存するパッケージのインストール
  3. プラグインファイルの作成
  4. ファイルをビルド

* 全てコマンドライン上で進めていきます

 

bladeシンタックス プラグインの導入 

ソースは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系のブログなどを書いている人以外は使いドコロが難しいですが、
機会があれば参考にしてください。

この記事のカテゴリ
プログラミング

この記事のタグ