A Pen by Zachary Beyer on CodePen.
Created
March 19, 2015 01:24
-
-
Save Zbeyer/2eb14b4174aa318828ee to your computer and use it in GitHub Desktop.
Directive wrapping highlight.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html ng-app="ngApp" > | |
| <head> | |
| </head> | |
| <body ng-controller="MainCtrl"> | |
| <!--<label><input type="checkbox" ng-model="wordWrap" ngChange="onWordWrapChange()"> | |
| <span>Wordwrap should break words</span> | |
| </label>--> | |
| <snippet class="code-stuff" ng-style="wrapBreak"> | |
| // Forked from: | |
| // http://plnkr.co/edit/3rtp1v | |
| .directive('snippet', ['$timeout', '$interpolate', function ($timeout, $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(hljs.highlightAuto(tmp).value); | |
| } | |
| }; | |
| }]); | |
| </snippet> | |
| <a href='http://stackoverflow.com/questions/13385535/angularjs-highlight-js-to-evaluate-string-with-expression-in-directive/13405548#13405548' target="_blank">Original Attribution - stackoverflow </a> | |
| <div class="main"> | |
| <label><input type="checkbox" ng-model="show"></input><span>Click To Show Unrelated Msc. Code</span></label> | |
| </div> | |
| <div class="code-stuff" ng-if="show"> | |
| <h3>Objective-C</h3> | |
| <hr> | |
| <snippet> | |
| //Objective-C | |
| [NSString stringWithFormat:@"Hello World"]; | |
| int i = 6; | |
| int v = i - 6; // 0 | |
| NSString * myString = @""; | |
| NSString * yourString = [NSString stringWithFormat:@"%@",myString]; | |
| </snippet> | |
| <h3>AngularJS</h3> | |
| <snippet> | |
| //AngularJS | |
| app.controller('MainCtrl', ['$scope', function ($scope) { | |
| $scope.cdnPath = "//path/to/cdn/"; | |
| $scope.version = "1.0"; | |
| }]); | |
| </snippet> | |
| <h3>Java</h3> | |
| <snippet> | |
| //Java | |
| class HelloWorldApp { | |
| public static void main(String[] args) { | |
| System.out.println("Hello World!"); // Display the string. | |
| } | |
| } | |
| </snippet> | |
| </div> | |
| <div class="main"> | |
| <label><input type="checkbox" ng-model="showCSS"></input><span>Click To Show intellij Darcula inspired theme (CSS) used in this CODEPEN</span></label> | |
| </div> | |
| <div ng-if="showCSS" class="code-stuff"> | |
| <h3>CSS</h3> | |
| <snippet> | |
| /* CODE STYLES */ | |
| pre code { | |
| display: block; | |
| padding: .5em; | |
| background: #393939; | |
| border: 1px solid #474747; | |
| word-wrap: break-word; | |
| } | |
| pre code,pre .subst,pre .tag .title,pre .lisp .title,pre .clojure .built_in,pre .nginx .title { | |
| color: #B6C4D0; | |
| } | |
| pre .string,pre .title,pre .constant,pre .parent,pre .tag .value,pre .rules .value,pre .rules .value .number,pre .preprocessor,pre .ruby .symbol,pre .ruby .symbol .string,pre .aggregate,pre .template_tag,pre .django .variable,pre .smalltalk .class,pre .addition,pre .flow,pre .stream,pre .bash .variable,pre .apache .tag,pre .apache .cbracket,pre .tex .command,pre .tex .special,pre .erlang_repl .function_or_atom,pre .markdown .header { | |
| color: #A68CB7; | |
| } | |
| pre .comment,pre .annotation,pre .template_comment,pre .diff .header,pre .chunk,pre .markdown .blockquote { | |
| color: #68936E | |
| } | |
| pre .number,pre .date,pre .regexp,pre .literal,pre .smalltalk .symbol,pre .smalltalk .char,pre .go .constant,pre .change,pre .markdown .bullet,pre .markdown .link_url { | |
| color: #639EC5; | |
| } | |
| pre .label,pre .javadoc,pre .ruby .string,pre .decorator,pre .filter .argument,pre .localvars,pre .array,pre .attr_selector,pre .important,pre .pseudo,pre .pi,pre .doctype,pre .deletion,pre .envvar,pre .shebang,pre .apache .sqbracket,pre .nginx .built_in,pre .tex .formula,pre .erlang_repl .reserved,pre .prompt,pre .markdown .link_label,pre .vhdl .attribute,pre .clojure .attribute,pre .coffeescript .property { | |
| color: #FFCF78; | |
| } | |
| pre .keyword,pre .id,pre .phpdoc,pre .title,pre .built_in,pre .aggregate,pre .css .tag,pre .javadoctag,pre .phpdoc,pre .yardoctag,pre .smalltalk .class,pre .winutils,pre .bash .variable,pre .apache .tag,pre .go .typename,pre .tex .command,pre .markdown .strong,pre .request,pre .status { | |
| font-weight: bold; | |
| color: #DD8B4A; | |
| } | |
| pre .markdown .emphasis { | |
| font-style: italic; | |
| } | |
| pre .nginx .built_in { | |
| font-weight: normal; | |
| } | |
| pre .coffeescript .javascript,pre .javascript .xml,pre .tex .formula,pre .xml .javascript,pre .xml .vbscript,pre .xml .css,pre .xml .cdata { | |
| opacity: .5; | |
| } | |
| </snippet> | |
| </div> | |
| <script src="http://yandex.st/highlightjs/7.3/highlight.min.js"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var app = angular.module('ngApp', []) | |
| .directive('snippet', ['$timeout', '$interpolate', function ($timeout, $interpolate) { | |
| "use strict"; | |
| return { | |
| restrict: 'E', | |
| template: '<pre><code ng-transclude></code></pre>', | |
| replace: true, | |
| transclude: true, | |
| link: function (scope, elm) { | |
| scope.onWordWrapChange = function() { | |
| if(scope.wordWrap === true) { | |
| scope.wrapBreak = {'word-wrap':'blue'}; | |
| } else { | |
| scope.wrapBreak ={}; | |
| } | |
| }; | |
| var tmp = $interpolate(elm.find('code').text())(scope); | |
| elm.find('code').html(hljs.highlightAuto(tmp).value); | |
| } | |
| }; | |
| }]); | |
| app.controller('MainCtrl', ['$scope', function ($scope) { | |
| }]); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @backgroundColor: #333; | |
| @textColor: #FFF - @backgroundColor; | |
| @linkColor: #FFA - @backgroundColor; | |
| input[type=checkbox] | |
| { | |
| /* Double-sized Checkboxes */ | |
| -ms-transform: scale(2); /* IE */ | |
| -moz-transform: scale(2); /* FF */ | |
| -webkit-transform: scale(2); /* Safari and Chrome */ | |
| -o-transform: scale(2); /* Opera */ | |
| padding: 2em; | |
| margin:2em; | |
| vertical-align: text-middle; | |
| } | |
| .code-stuff { | |
| text-align:left; | |
| } | |
| .main { | |
| padding:16px; | |
| } | |
| a { | |
| color:@linkColor; | |
| } | |
| body { | |
| background: @backgroundColor; | |
| color:@textColor; | |
| /* Override default body padding / margin & force center*/ | |
| padding: 0; | |
| margin: 0 auto; | |
| font-family: Arial, Helvetica, sans-serif; | |
| text-align: center; | |
| font-size:16px; | |
| } | |
| .embedded { | |
| //min-width:320px; | |
| width: 98vw; | |
| padding-top:8px; | |
| margin:0 auto; | |
| } | |
| /* CODE STYLES */ | |
| pre code { | |
| display: block; | |
| padding: .5em; | |
| background: #393939; | |
| border: 1px solid #474747; | |
| font-size:inherit; | |
| } | |
| pre code,pre .subst,pre .tag .title,pre .lisp .title,pre .clojure .built_in,pre .nginx .title { | |
| color: #B6C4D0; | |
| } | |
| pre .string,pre .title,pre .constant,pre .parent,pre .tag .value,pre .rules .value,pre .rules .value .number,pre .preprocessor,pre .ruby .symbol,pre .ruby .symbol .string,pre .aggregate,pre .template_tag,pre .django .variable,pre .smalltalk .class,pre .addition,pre .flow,pre .stream,pre .bash .variable,pre .apache .tag,pre .apache .cbracket,pre .tex .command,pre .tex .special,pre .erlang_repl .function_or_atom,pre .markdown .header { | |
| color: #A68CB7; | |
| } | |
| pre .comment,pre .annotation,pre .template_comment,pre .diff .header,pre .chunk,pre .markdown .blockquote { | |
| color: #68936E | |
| } | |
| pre .number,pre .date,pre .regexp,pre .literal,pre .smalltalk .symbol,pre .smalltalk .char,pre .go .constant,pre .change,pre .markdown .bullet,pre .markdown .link_url { | |
| color: #639EC5; | |
| } | |
| pre .label,pre .javadoc,pre .ruby .string,pre .decorator,pre .filter .argument,pre .localvars,pre .array,pre .attr_selector,pre .important,pre .pseudo,pre .pi,pre .doctype,pre .deletion,pre .envvar,pre .shebang,pre .apache .sqbracket,pre .nginx .built_in,pre .tex .formula,pre .erlang_repl .reserved,pre .prompt,pre .markdown .link_label,pre .vhdl .attribute,pre .clojure .attribute,pre .coffeescript .property { | |
| color: #FFCF78; | |
| } | |
| pre .keyword,pre .id,pre .phpdoc,pre .title,pre .built_in,pre .aggregate,pre .css .tag,pre .javadoctag,pre .phpdoc,pre .yardoctag,pre .smalltalk .class,pre .winutils,pre .bash .variable,pre .apache .tag,pre .go .typename,pre .tex .command,pre .markdown .strong,pre .request,pre .status { | |
| font-weight: bold; | |
| color: #DD8B4A; | |
| } | |
| pre .markdown .emphasis { | |
| font-style: italic; | |
| } | |
| pre .nginx .built_in { | |
| font-weight: normal; | |
| } | |
| pre .coffeescript .javascript,pre .javascript .xml,pre .tex .formula,pre .xml .javascript,pre .xml .vbscript,pre .xml .css,pre .xml .cdata { | |
| opacity: .5; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment