AngularJS directive for syntax highlighting with highlight.js
npm install angular-highlightjshtml
`
Include angular-highlightjs module script with AngularJS script on your page.
`html
`
Add hljs to your app module's dependency.
`js
angular.module('myApp', ['hljs']);
`
Install with npm
`sh
npm install angular-highlightjs
`
Install with Bower
There's currently no official bower package of highlight.js (see here). You should either build highlight.js yourself or use the pre-built one on cdnjs.
`sh
bower install angular-highlightjs
`
Configuration
Configuration works with highlight.js >= 8.0
In configuration phase, call hljsServiceProvider.setOptions() to configure with highlight.js options.
`js
myApp.config(function (hljsServiceProvider) {
hljsServiceProvider.setOptions({
// replace tab with 4 spaces
tabReplace: ' '
});
});
`
Directive usage
$3
This is a required directive. Without any other supportive directives, it provides basic inline highlight function. For better understanding, some notes about using it are specified in the live example page.
The directive automatically escapes its content HTML entities by default. Can be turned off with explicitly configuration hljs-escape="{expression evaled to false}" or hljs-no-escape, and they're only applicable for "just-hljs" usage.
Live example
`html
hljs-no-escape>
<!-- put your codes here -->
Frequently Asked Question
Since the code inside hljs will be parsed by browser even before AngularJS bootstraped, it sometimes demonstrates strange highlight result when the code you put inside hljs have HTML-tag-like syntax ().
To deal with the issue, use hljs-no-escape option with manually escaped code or switch to hljs-source or hljs-include for highlighting.
#### hljs-source (optional)
Type: expression
Default: undefined
If hljs-source is presented, the hljs directive will evaluate the expression and highlight the result string. This is pretty useful for dynamically changed content.
Live example
Dynamically changed content.
`html
ng-click="toggleSource('subSource')"
ng-show="!subSource">put $scope.subSource
ng-click="toggleSource('subSource')"
ng-show="subSource">clear $scope.subSource
hljs-source="subSource">
The expression. Beware of single-quotes.
`html
hljs-source="''">
#### hljs-include (optional)
Type: expression
Default: undefined
Works as the built-in ng-include directive, utilizes $templateCache and $http to retrieve content from text/ng-template scripts or from XHR.
Live example
From text/ng-template script localOne. Beware of single-quotes in the expression.
`html
hljs-include="'localOne'">
From partials/lang-perl XHR. Again, beware of single-quotes.
`html
hljs-include="'partials/lang-perl'">
#### hljs-language (optional)
Type: string
Default: undefined
Tells the highlight.js which language syntax should be used to highlight the codes. If not specified, highlight.js will highlight with built-in language detection.
Live example
`html
hljs-include="'partials/lang-php'">
#### hljs-interpolate (optional)
Type: expression
Default: undefined
Interpolates the highlighted code and links it with current scope.
The attribute works with all methods of highlighting: hljs, hljs-source and hljs-include.
Live example
`html
hljs-include="'interpolate-me'"
hljs-interpolate="true">
``