angular-highlightjs
Advanced tools
AngularJS directive for syntax highlighting with highlight.js
AngularJS directive for syntax highlighting with highlight.js.
Follow the instructions here to setup highlight.js.
Using a prebuilt version of highlight.js hosted at cdnjs here.
<!-- personal preference: github theme -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/styles/github.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js"></script>
Include angular-highlightjs module script with AngularJS script on your page.
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="https://pc035860.github.io/angular-highlightjs/angular-highlightjs.min.js"></script>
Add hljs to your app module's dependency.
angular.module('myApp', ['hljs']);
npm install angular-highlightjs
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.
bower install angular-highlightjs
Configuration works with highlight.js >= 8.0
In configuration phase, call hljsServiceProvider.setOptions() to configure with highlight.js options.
myApp.config(function (hljsServiceProvider) {
hljsServiceProvider.setOptions({
// replace tab with 4 spaces
tabReplace: ' '
});
});
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.
<!-- hljs start -->
<div hljs>
<!-- put your codes here -->
</div>
<!-- hljs end -->
<!-- Will get the same result as above -->
<div hljs
hljs-no-escape>
<!-- put your codes here -->
</div>
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 (<blah>).
To deal with the issue, use hljs-no-escape option with manually escaped code or switch to hljs-source or hljs-include for highlighting.
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.
Dynamically changed content.
<!-- buttons for put/clear $scope.subSource content -->
<button class="btn btn-primary show-source"
ng-click="toggleSource('subSource')"
ng-show="!subSource">put $scope.subSource</button>
<button class="btn btn-primary show-source"
ng-click="toggleSource('subSource')"
ng-show="subSource">clear $scope.subSource</button>
<div ng-show="subSource">
<br>
<!-- hljs connected with $scope.subSource -->
<div hljs
hljs-source="subSource"></div>
</div>
The expression. Beware of single-quotes.
<!-- hljs connected with independent string -->
<div hljs
hljs-source="'<html><head><body></body></head></html>'"></div>
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.
From text/ng-template script localOne. Beware of single-quotes in the expression.
<!-- load text/ng-template named 'localOne' -->
<div hljs
hljs-include="'localOne'"></div>
From partials/lang-perl XHR. Again, beware of single-quotes.
<!-- load "partials/lang-perl" -->
<div hljs
hljs-include="'partials/lang-perl'"></div>
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.
<!-- PHP codes highlight with language detection -->
<div hljs
hljs-include="'partials/lang-php'"></div>
<!-- PHP codes highlight with specified language: perl -->
<div hljs
hljs-include="'partials/lang-php'"
hljs-language="perl"></div>
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.
<div hljs
hljs-include="'interpolate-me'"
hljs-interpolate="true"></div>
FAQs
AngularJS directive for syntax highlighting with highlight.js
The npm package angular-highlightjs receives a total of 3,686 weekly downloads. As such, angular-highlightjs popularity was classified as popular.
We found that angular-highlightjs demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Newly introduced telemetry in devenv 1.4 sparked a backlash over privacy concerns, leading to the removal of its AI-powered feature after strong community pushback.
Security News
TC39 met in Seattle and advanced 9 JavaScript proposals, including three to Stage 4, introducing new features and enhancements for a future ECMAScript release.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.