Skip to content

AngularJS directives for Prism code highlighting

License

Notifications You must be signed in to change notification settings

MicroFocus/ng-prism

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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