🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
DemoInstallSign in
Socket
DemoInstallSign in

angular-highlightjs

Package Overview
Dependencies
Maintainers
1
Versions
11
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

angular-highlightjs

AngularJS directive for syntax highlighting with highlight.js

0.7.1
latest
Source
npm
Version published
Weekly downloads
3.1K
-15.67%
Maintainers
1
Weekly downloads
 
Created
Source

angular-highlightjs npm Bower Join the chat at https://gitter.im/pc035860/angular-highlightjs

AngularJS directive for syntax highlighting with highlight.js.

Demos

Requirements

  • Highlight.js v7.0.0+
  • AngularJS v1.0.1+

Getting started

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']);

Install with npm

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.

bower install angular-highlightjs

Configuration

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: '    '
  });
});

Directive usage

hljs

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

<!-- hljs start -->
<div hljs>
<!-- put your codes here -->
</div>
<!-- hljs end -->

<!-- Will get the same result as above -->
<div hljs
    hljs-no-escape>
&lt;!-- put your codes here --&gt;
</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.

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.

<!-- 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>

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.

<!-- 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>

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

<!-- 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>

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

<div hljs
    hljs-include="'interpolate-me'"
    hljs-interpolate="true"></div>

Happy highlighting!!!

Keywords

angularjs
highlight.js
angular-highlightjs

FAQs

Package last updated on 28 Feb 2017

Did you know?

Socket

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.

Install

Related posts

Socket Now Supports pylock.toml Files

Product

Socket Now Supports pylock.toml Files

Socket now supports pylock.toml, enabling secure, reproducible Python builds with advanced scanning and full alignment with PEP 751's new standard.

By Trevor Norris  -  Jun 05, 2025