Comments (7)
According your description, you're actually required to have post.content
compiled by AngularJS again for directive (like hljs
) to work.
// In your controller, don't forget to inject `$templateCache`
$templateCache.put('postContent-xxx', ctrl.post.content);
<!-- use `ng-include` to render post content from `$templateCache` -->
<div class="single_post_content" ng-include="'postContent-xxx'"></div>
Another options is to write a new directive specialized for displaying post.content
's HTML code, as well as adding code highlightling with highlight.js
.
angular.module('myApp')
.directive('singlePostContent', function (hljsService, $window) {
return {
restrict: 'A',
link: function (scope, iElm, iAttrs) {
scope.$watch(iAttrs.singlePostContent, function (content) {
if (content) {
iElm.html(content);
// You don't even require angular-highlightjs for this
var service = $window.hljs || hljsService;
service.highlightBlock(iElm[0]);
}
else {
iElm.html('');
}
});
}
};
};
});
<div class="single_post_content" single-post-content="sm.post.content"></div>
Here's a working demo on Plunker: http://plnkr.co/edit/ZfB4tamhQIOLx0z9WUMH?p=preview
from angular-highlightjs.
Hi, for some weird reason. the directive highlighted the whole content, even though the part that's not code
from angular-highlightjs.
Try replacing the highlightBlock
call on <pre>
or <code>
elements.
var service = $window.hljs || hljsService;
service.highlightBlock(iElm.find('pre > code')[0]);
// or
service.highlightBlock(iElm.find('pre')[0]);
from angular-highlightjs.
I've update the plunk with iElm.find('pre')[0]
, and it seems to work correctly now.
http://plnkr.co/edit/ZfB4tamhQIOLx0z9WUMH?p=preview
from angular-highlightjs.
@pc035860 Hey, it still doesn't work. There was an issue from my end too. I write a post via TinyMCE editor, and when I write code with its inbuilt code tool, it adds an additional class to the pre
tag.
I removed that in the following manner:
ctrl.post.content = ctrl.post.content.replace(/<pre class="language-javascript">/g, '<pre>')
And then, it just styles the outer block. it isn't highlighting anything. So I inspected the element and found out that no language class has been added to my code
tag. So, I manually added javascript
, just to test things out, but it still didn't work.
What could be the reason for this?
from angular-highlightjs.
Can you make a demo of your problem with plunker or something similar?
I can't figure out why it's not working with current available information.
from angular-highlightjs.
@pc035860 Hey, so I made it work with a few tweaks, one of them really bizarre to me. First, I stored the post's content in a scope variable and passed that to the directive, like this
ctrl.content = ctrl.post.content;
and then plugged that into the directive:
<div class="single_post_content" single-post-content="sm.content">
and it worked. I don't know why. The next issue was that it was only working for the first code block, so I changed it to this:
let codeBlocks = element.find('code');
let service = $window.hljs || hljsService;
for(let key in codeBlocks){
if(codeBlocks[key]){
service.highlightBlock(codeBlocks[key]);
}
}
And this works, but I get an error in the console
TypeError: e is undefined
Now, i can ignore that, but I really want to keep it clean.
Long story short, I made it work, but I don't know how.
from angular-highlightjs.
Related Issues (20)
- Electron App: Uncaught Error: Cannot find module 'angular' HOT 3
- Comments added when <?php tags are included in the snippet HOT 1
- Nested hljs HOT 1
- HLJS content rendered event HOT 4
- Allow use of <pre><code> tags instead of <div hljs> HOT 2
- "hljs-source" needs to be changed to "source" in the README HOT 1
- Showing "loading" message HOT 4
- Some blank lines are deleted HOT 6
- use require.js was Error HOT 2
- end element is getting added automatically HOT 1
- There are a compatibility problem with highlight v 9
- Less-than-sign displaying as < HOT 2
- dependency on highlight.js issue HOT 9
- make editable and set on ngmodel
- How to use with Webpack? HOT 3
- Cant figure out hljs-source HOT 2
- yarn.lock with [email protected] HOT 1
- security issue with dependencies HOT 2
- Command Injection vulnerability found in shelljs dependency HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular-highlightjs.