0

I have a pastebin-like app. I want to be able to paste in code, and output the code to a user, with some highlightings and other fanciness. The code can be of ANY language. I use google's prettify.js for this.

The code is saved in a db as a string. Heres how i get the data:

$http.get('/paste/' + $scope.paste).success(getCallback);

var getCallback = function(data) {
    setTimeout(function() {
        $scope.paste = data[0].code;
        $scope.$apply();
    }, 0);
};

So far so good. When i want to apply some highlighting to the pasted code i have done this.

app.filter('pretty', function() {
    return function(text) {
        // a method in the prettify.js
        return prettyPrintOne(text, '', true);
    };
});

And i apply it like this:

<pre ng-bind-html="paste|pretty"></pre>

The result is a nice-looking paste. However the angular sanitizer fails when theres tags like <?php of similar that it does not understand, or tags that are pure html elements <div> So how could i bind the expression with the html formatting to the paste.

If i only do ng-bindi actually get the correct data showing, including tags like <?php (in html comments?) but the formatting goes out of the window.

pat
  • 5,757
  • 5
  • 25
  • 30
  • to see if I understand it: you want to keep displaying code (using bind-html), and at the same time apply html style formatting to that code? – Jorg Feb 22 '14 at 13:00
  • have you taken a look at this? http://docs.angularjs.org/api/ng/service/$sce – Mark-Sullivan Feb 22 '14 at 13:01
  • @Jorg Yeah, the code needs to be styled, not just "plain" there has to be code highlighting. The prettify gives me generated html, and that can be bound to ng-bind-html, but the parser dont dig html/php (possibly other language) elements. – pat Feb 22 '14 at 13:23
  • @Mark-Sullivan Yeah, just had a look at that. Will have to investigate on how to implement this. – pat Feb 22 '14 at 13:24

1 Answers1

0

It looks like prettify.js does not understand PHP correctly. When you enter some PHP code, it just creates a line which is not commented. This works using $sce with JavaScript and other languages supported by "prettify.js" though:

http://plnkr.co/edit/ajQrnmBB83SLmFvzfiBr?p=preview

user3340645
  • 1
  • Thanks for your Plunker. However, i'm absolutely sure that this is not a prettify.js thing. If you try your plunker with a html element it will also fail. In fact anything with starting with "<" will fail. (
    ,
    – pat Feb 22 '14 at 13:47
  • I have updated the Plunkr with a small PHP snippet and console.log(text). At least the "prettyPrintOne" function gives me that:`"
    "`. According to http://stackoverflow.com/questions/1270221/how-to-format-code-in-html-css-js-php, PRISM is a better alternative to prettify.js - it is even used on Brendan Eich's personal blog. https://soundcloud.com/istdochmiregal/neo-magazin-prism-is-a-dancer     – user3340645 Feb 22 '14 at 14:04
  • Ok, thanks, ill investigate further. I have already implemented prettyprint, but maybe ill try with the nsa.js instead and open a backdoor. – pat Feb 25 '14 at 10:09