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

1. npm install joswhite/ng-prism

2. angular.module('myApp', ['ng-prism']);

3. <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