Trying to integrate highlight.js into an angular app that uses requirejs

Question

So I'm trying to make a simple little pastebin, this is mostly a tech learning exercise for me. I've got everything working on the frontend except highlight.js (library chosen arbitrarily)

Here's my controller

define([
    'highlight',
    'angular',
], function( hl ) {
    'use strict';

    return [      '$scope', '$location', '$routeParams', 'pastes',
            function ( $scope,   $location,   $routeParams,   pastes ) {
                    console.log( pastes );
                    var digest  = $routeParams.digest;
                    if ( pastes[digest] ) {
                            $scope.code = hl.highlightAuto( pastes[digest] ).value;
                            console.log( $scope.code );
                    }
                    $scope.view = function( view ) {
                            $location.path( view );
                    }
                    $scope.$apply();
            }];
 });

and my view

 <pre ng-controller="Render"><code class="pre-scrollable">
 {{code}}
 </code></pre>
 <button
    type="button"
    class="btn btn-primary pull-right"
    ng-click="view('/')"
 >New Paste</button>

to be fair this code works, the problem is that {{code}} seems to be sanitizing the html that is being spit out, so I need to find another way to do this. Tried a few other incantations of the library but no progress.

here's all my code in case I've left off a relevant bit

xenoterracide
– xenoterracide

2013-11-22 08:48:35 +00:00
Commented Nov 22, 2013 at 8:48 — xenoterracide
– xenoterracide, Commented Nov 22, 2013 at 8:48

marcoseu · Accepted Answer · 2013-11-22 09:05:46Z

1

If the problem is {{code}} being sanitized, have you tried ngBindHtmlUnsafe?

<pre ng-controller="Render">
    <code class="pre-scrollable" ng-bind-html-unsafe="code"></code>
</pre>

answered Nov 22, 2013 at 9:05

marcoseu

3,9622 gold badges21 silver badges36 bronze badges

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

1 Comment

xenoterracide Over a year ago

in this case it appears just ng-bind-html will work after I loaded ngSanitize into my angular module. I did not know about this prior, thanks

Collectives™ on Stack Overflow

Trying to integrate highlight.js into an angular app that uses requirejs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related