search

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

Problem using compile="true" and language attribute/directive #35

Closed jugglingcats closed 8 years ago

jugglingcats commented 9 years ago

It seems that adding language attribute affects the compilation feature. I'm finding that the compile behaviour is a bit unpredictable - sometimes it works, sometimes not. But here is a plunkr based on the JSON pretty print example modified to show this issue.

http://plnkr.co/edit/2toXC6bCDpYNR8JPSTgD?p=preview

Notice that the expression {{editObject}} inside the last div is not being compiled. If you remove the language attribute it is compiled correctly.

Any suggested fix/workaround? It's not obvious looking at the code why this is happening.

Thanks!

jugglingcats commented 9 years ago

Think I've figured out why this is happening (maybe). If in the plunkr you change the lang to "http" and then inspect element it's a bit more obvious. What we get is:

<code class="hljs http">{{<span class="hljs-attribute">editObject}}</span></code>.

As you can see, the AngularJS inline expression is broken up by the highlighting markup and this seems to happen before the compile step, so it's not interpreted.

What is a bit odd is that if lang="json", the inline expression is intact but still isn't compiled.

Maybe this is wrong interpretation but could be possible cause...

jugglingcats commented 9 years ago

Another update. I found this link http://stackoverflow.com/questions/25581560/dynamic-syntax-highlighting-with-angularjs-and-highlight-js, and a slightly modified version of their directive (in the accepted answer) did the trick for me -- my use case is very simple.

pc035860 commented 9 years ago

Hi @jugglingcats , thanks for the reporting! I'm aware that the compile feature does have some issues. And I'm considering to rename the compile to interpolate, and that's what I really mean when implementing the feature.

The stackoverflow link is very helpful, thanks again.

JonnyBGod commented 9 years ago

Hi,

I am having this problem. I need to recompile every time a model is changed and this is not working. (not even compiling at startup)

Any plans to fix this behavior?

pc035860 commented 9 years ago

Hey @JonnyBGod ,

I've reviewed your PR. The real issue of language used with compile is that I didn't recompile the code after setting the language.

So I re-implement compile as a directive and avoid calling .highlight() too often with a debounce function. And I also fixed the issue reported by @jugglingcats that highlighted markup breaks angular expressions.

The code is now on master. Test it by including https://rawgit.com/pc035860/angular-highlightjs/master/build/angular-highlightjs.js