pc035860 / angular-highlightjs

AngularJS directive for syntax highlighting with highlight.js
http://pc035860.github.io/angular-highlightjs/example/
MIT License
294 stars 53 forks source link

Render Angular Expression Output #55

Closed realph closed 8 years ago

realph commented 8 years ago

Is it possible to render the output of an Angular expression? I'm trying to render an Angular object called blob, but when I put it inside a <div> with an attribute of hljs, it prints the curly-braced expression rather than the output of that expression.

This:

<div hljs>{{ blob }}</div>

Outputs this:

<div hljs>{{ blob }}</div>

When it should output this:

"name": {
  "first": "Krystal",
  "last": "Osborn"
}

Any idea on how to do this with angular-highlightjs?

Any help is appreciated. Thanks in advance!

pc035860 commented 8 years ago

Hi @realph ,

I've modified the demo in the README a bit. http://plnkr.co/edit/CdwxGQ?p=preview

Note that the hljs-interpolate makes the interpolation after highlighting, so it'll stay no-color.

realph commented 8 years ago

@pc035860 This doesn't seem to work with ng-repeat.

pc035860 commented 8 years ago

@realph Can you provide an example of using ng-repeat with it?

realph commented 8 years ago

@pc035860 http://plnkr.co/edit/uIsX0hYmy981HUSopX0j?p=preview

pc035860 commented 8 years ago

@realph The editObject in the original demo is a JSON string, so it won't work if your item is an object if you simply put them into toPrettyJSON method.

Here's a working version http://plnkr.co/edit/HZN9Dz9JQwUIqDRuX7HH?p=preview

And I made a new example which does only what you're asking for http://plnkr.co/edit/QQzG9530wk7gZRf6UYEd?p=preview

Check the examples about the usage of directives http://pc035860.github.io/angular-highlightjs/example/#/hljs-source

realph commented 8 years ago

@pc035860 It doesn't format the JSON anymore though. Have a look here: http://plnkr.co/edit/ep4YMRR2VgHPKD621UBf?p=preview

pc035860 commented 8 years ago

@realph The JSON formatting part is done using native browser JSON api.

So you can re-enable that simply feeding the number of spaces required as a parameter to the $scope.toPrettyJSONFromObj in html.

<!-- from -->
<div hljs hljs-source="toPrettyJSONFromObj(item)" ng-repeat="item in items track by $index"></div>

<!-- to -->
<div hljs hljs-source="toPrettyJSONFromObj(item, 4)" ng-repeat="item in items track by $index"></div>

With JSON formatting http://plnkr.co/edit/rD0ZNWW87isrWdDtnvsX?p=preview

Also check JSON.stringify API on MDN.

realph commented 8 years ago

@pc035860 Of course. I forgot to pass that parameter. Thanks for this!