Skip to content

Instantly share code, notes, and snippets.

@mikomatic
Created July 17, 2014 14:02
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save mikomatic/65adf6d909c4781c94bd to your computer and use it in GitHub Desktop.
Save mikomatic/65adf6d909c4781c94bd to your computer and use it in GitHub Desktop.
Angularjs directive with prism code highlight
/**
* Usage
*
* <ng-prism class="language-css">
* body {
* color: red;
* }
* </ng-prism>
*
* the files prismjs and prism css must be included in HTML, use class "language-XXX" to specify language
* */
app.directive('ngPrism',['$interpolate', function ($interpolate) {
"use strict";
return {
restrict: 'E',
template: '<pre><code ng-transclude></code></pre>',
replace: true,
transclude: true,
link: function (scope, elm) {
var tmp = $interpolate(elm.find('code').text())(scope);
elm.find('code').html(Prism.highlightElement(tmp).value);
}
};
}]);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment