ソースコードを見やすくハイライト表示する - Angular Highlightjs
Angular Highlightjsは、与えられたソースコードをハイライト表示するためのモジュールです。標準で118種類の言語に対応していますので、日常的によく利用している言語であれば、ほぼ問題なく対応できます。また、54種類のスタイルを提供していますので、サイトデザインに応じて表示を差し替えるのも自由です。
Angular Highlightjsは、Bowerを利用することで、以下のコマンドで実行できます。
> bower install --save angular-highlightjs highlightjs
では、具体的な例もみてみましょう。
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS</title>
<!-- （2）スタイルシートをインポート -->
<link rel="stylesheet" href="bower_components/highlightjs/styles/default.css" />
<!-- （1）highlight.pack.min.js、angular-highlightjs.min.jsをインポート -->
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/highlightjs/highlight.pack.min.js"></script>
<script src="bower_components/angular-highlightjs/angular-highlightjs.min.js"></script>
<script src="scripts/highlight.js"></script>
</head>
<body ng-controller="MyController">
<!-- （4）ソースコードをハイライト -->
<div hljs>
angular.module('myApp', ['hljs'])
.controller('MyController', ['$scope', function($scope) {
}]);
</div>
</body>
</html>
// （3）hljsモジュールへの依存関係を設定
angular.module('myApp', ['hljs'])
.controller('MyController', ['$scope', function($scope) {
}]);
Angular Highlightjsでは、内部的にhighlight.jsというライブラリを利用しています。Angular Highlightjsを利用する際には、highlight.js→Angular Highlightjsの順でインポートするようにしてください（1）。また、ハイライト表示のためのスタイルシートを/highlightjs/stylesフォルダー配下からインポートしておきます（2）。本節冒頭でも触れたようにスタイルシートはさまざまな種類が標準で用意されていますので、サイトデザインに応じて適宜差し替えても構いません。
あとは、アプリモジュール（myApp）からはhljsモジュールへの依存関係を宣言して、Angular Highlightjsを有効化できます（3）。ハイライト表示したいソースコードをコンテナー要素（ここでは<div>要素）で括り、hljsディレクティブ（属性）を付与して完了です（4）。
ここでは、シンプルにソースコードをテンプレート内にそのまま埋め込んでいますが、hljs属性と合わせて、以下の属性を利用することで、スコープ変数や外部ファイル経由で、ハイライト対象のソースコードを引き渡すこともできます。
- source：スコープ変数
- include：外部ファイル
AngularJS Highlightjsの動作オプション
hljsServiceProviderプロバイダーのsetOptionsメソッドを利用することで、AngularJS highlightljsの細かな挙動を変更することもできます。setOptionsメソッドには「オプション名: 値」のハッシュ形式で、以下のようなオプションを指定できます。
プロバイダーは、サービスがインスタンス化される前に設定を完了する必要がありますので、configメソッドの中で呼び出します。
| 属性名 | 概要 |
|---|---|
| tabReplace | タブ文字を置き換える文字 |
| useBR | 改行を<br>要素で置き換えるか |
| languages | 利用する言語（デフォルトは自動判定） |
たとえば以下は、タブ文字を空白4個で置き換えるようにした設定です。
angular.module('myApp', ['hljs'])
.config(['hljsServiceProvider', function (hljsServiceProvider) {
hljsServiceProvider.setOptions({
tabReplace: ' '
});
}])
.controller('MyController', ['$scope', function($scope) {
}]);
補足：Angular Markedでhighlight.jsを利用する
先ほど触れたAngularJS Markedからhighlight.jsを引用することで、Markdown形式のテキストに含まれるソースコードをハイライト表示することもできます。
前節で紹介したコードを、以下のように書き換えてみましょう。
<!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8" /> <title>AngularJS</title> <!-- （1）highlight.jsのライブラリ／スタイルシートをインポート --> <link rel="stylesheet" href="bower_components/highlightjs/styles/default.css" /> <script src="bower_components/highlightjs/highlight.pack.min.js"></script> <script src="bower_components/angular/angular.min.js"></script> <script src="bower_components/marked/marked.min.js"></script> <script src="bower_components/angular-marked/dist/angular-marked.min.js"></script> <script src="scripts/marked_highlight.js"></script> </head> <body ng-controller="MyController"> <marked> # ui-event [](https://travis-ci.org/angular-ui/ui-event) ...中略... Add the specific module to your dependencies: </marked> </body> </html>
angular.module('myApp', ['hc.marked'])
.config(['markedProvider', function(markedProvider) {
markedProvider.setOptions({
highlight: function (code) {
// （2）highlightAutoメソッドを呼び出し
return hljs.highlightAuto(code).value;
}
});
}])
.controller('MyController', ['$scope', function($scope) {
}]);
ハイライト機能を適用するには、まずhighlight.jsのライブラリ／スタイルシートをインポートしておきましょう（1）。
そのうえで、markedProviderプロバイダーのsetOptionsメソッドからhighlightオプションを指定します。highlightオプションは、引数として対象となるコード（テキスト）を受け取り、ハイライトした結果を返すだけの窓口にすぎません。ハイライト加工そのものは、highlight.jsのhighlightAutoメソッドを呼び出します（2）。
以下のように、コード部分がハイライト表示されることを確認してください。
まとめ
以上、本稿ではテキストを整形するためのライブラリとして、Angular Marked／Angular Highlightjsについて解説しました。これらのライブラリを利用することで、Markdownテキストやソースコードをアプリの中で見栄え良く表示できるようになります。コンテンツ中心のアプリでは使い出のあるライブラリなので、ぜひ基本的な用法をおさえておいてください。
次回は、AngularJSアプリにGoogleマップを導入するためのAngular Google Mapsについて解説する予定です。
参考資料
- 『AngularJSアプリケーションプログラミング』（技術評論社）
- 『AngularJSライブラリ 活用レシピ 厳選 108』（WINGSプロジェクト）
