angularjs module/directive for Syntax Highlighting

Question

I'm looking for a good angularjs module/directive for Syntax Highlighting (js and a whole html page). I found http://ngmodules.org/modules/angular-highlightjs it's good but it cuts off in ie

<!DOCTYPE html>
    <html ng-app>
        <head>
            <title>Simple app</title>
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"></script>
        </head>
        <body>
            <input ng-model="name" type="text" placeholder="Your name">
            <h1>Hello {{ name }}</h1>
        </body>
    </html>

DOCTYPE html head and body

Do you know any tool out there to highlight a whole html page like the above ?

Is there a angular wrapper for https://google-code-prettify.googlecode.com/svn/trunk/README.html

enter image description here

Ended up

using http://pc035860.github.io/angular-highlightjs/example/#/hljs-source

Erik Donohoo · Accepted Answer · 2014-07-20 01:01:16Z

2

I made one back in the day for my website

It does require the google-prettify code to work. Play with it if it suits you

angular.module('myModule').directive('code',[function(){
var dir = {};
dir.scope = {
    plunk: '@'
};
dir.restrict = 'E';
dir.template = '<div class="ed-code clearfix"><pre class="prettyprint"></pre><a ng-href="{{plunk}}" target="_blank"><i class="code-link fa fa-toggle-down fa-2x" title="View in Plnkr"></i></a></div>';
dir.transclude = true;
dir.link = function(scope, elem, attr, ctrl, transclude) {
    var code = angular.element('<div>').append(transclude());
    code = code.html().indexOf('<span class="ng-scope">') != -1 ? code.find('span').html() : code.html();
    code = code.replace(/</g,"&lt;").replace(/>/g,"&gt;");
    elem.find('pre').append(prettyPrintOne(code.replace(/ ng-scope/g,"").replace(/ class="ng-scope"/g,"").replace(/\t/g,"").replace(/</g,'&lt;').replace(/>/g,'&gt;')));
};
return dir;
}])

Made a post about it here

answered Jul 20, 2014 at 1:01

Erik Donohoo

6533 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Whisher Over a year ago

Thanks I'll take it a try. BTW edLoad very smart and cool I nicked it :)

Whisher Over a year ago

I've updated my post added a screenshot of the resul as you can see the doctype and so on is still cut off :(

Erik Donohoo Over a year ago

Dang. Sorry about that. It worked for most things I used it for. Glad you liked <ed-load> though. Haha

Collectives™ on Stack Overflow

angularjs module/directive for Syntax Highlighting

Ended up

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Ended up

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related