ng-prism

Provides dynamic syntax highlighting for your documentation app using PrismJS and AngularJS.

Eliminates the need to painfully copy and escape HTML in your code demos
Can be used with routing libraries such as UI-Router
See this Plunkr for a live demo

Installation

npm install joswhite/ng-prism
angular.module('myApp', ['ng-prism']);
<script src="ng-prism.js">
<link rel="stylesheet" href="ng-prism.css">

Use

See examples in src/index.html

General Uses

pre > code[highlight="language-xxxx"] (highlights the code inside it)
- highlight attribute specifies PrismJS language (default: language-javascript)
- HTML markup needs to be escaped
PrismJS direct use (see PrismJS website)
- If using a routing library, use pre > code[highlight] instead

Dynamic Uses

repeat-as-code attribute (retains HTML element and highlights the code that created it)
- repeat-as-code="inner" highlights the code that created its HTML children elements
- If present, prism-insert-id attribute specifies where the highlighted code should be inserted
toggle-repeat-code attribute (repeat-as-code with a "Show Code" button)
toggleable-code element ("Show Code" button to show/hide everything inside it)

Documentation Examples App

Run npm start and navigate to localhost:8080.

Development

npm install -g gulp

Build: gulp build:development
Watch: gulp
Works with LiveReload

Notes

Default theme is prism-okaidia. You can change this in src/main.scss
The consuming application is responsible for styling the "Show Code" button
ng-prism converts 4 spaces to the tab character and forces LTR display on the code block
This project uses ng-gulp