Open DavidZemon opened 8 years ago
Hi @DavidZemon
Modify https://github.com/pc035860/angular-highlightjs/blob/master/src/angular-highlightjs.js#L276, replace hljsDir
with the following.
hljsDir = /*@ngInject*/ function ($parse) {
return {
restrict: 'EA',
controller: 'HljsCtrl',
compile: function(tElm, tAttrs, transclude) {
// get static code
// strip the starting "new line" character
var staticHTML = tElm[0].innerHTML.replace(/^(\r\n|\r|\n)/m, ''),
staticText = tElm[0].textContent.replace(/^(\r\n|\r|\n)/m, '');
// put template
// tElm.html('<pre><code class="hljs"></code></pre>');
return function postLink(scope, iElm, iAttrs, ctrl) {
var escapeCheck;
var attrs = attrGetter(iAttrs);
if (angular.isDefined(attrs('escape'))) {
escapeCheck = $parse(attrs('escape'));
} else if (angular.isDefined(attrs('no-escape'))) {
escapeCheck = $parse('false');
}
// ctrl.init(iElm.find('code'));
ctrl.init(iElm.addClass('hljs'));
if (attrs('onhighlight')) {
ctrl.highlightCallback(function () {
scope.$eval(attrs('onhighlight'));
});
}
if ((staticHTML || staticText) && shouldHighlightStatics(iAttrs)) {
var code;
// Auto-escape check
// default to "true"
if (escapeCheck && !escapeCheck(scope)) {
code = staticText;
}
else {
code = staticHTML;
}
ctrl.highlight(code);
}
scope.$on('$destroy', function () {
ctrl.release();
});
};
}
};
};
Rebuild the module with grunt
. Now you can use it with <pre><code></code></pre>
.
<pre><code hljs class="cpp">/*
A multi-line comment!
*/</code></pre>
I'm not sure if specifying highlight language in class
will work or not. If not, specify it with hljs-language
.
<pre><code hljs hljs-language="cpp">/*
A multi-line comment!
*/</code></pre>
Thank you so much, both for the edit and the quick response!
Personally, I think this should be default behavior so I would be happy to submit this as a merge request if you'd like. Otherwise, this ticket can be closed out. I'm happy :D
Can you please allow using the hljs directive inside a
<pre>
or<code>
tag instead of requiring it inside<div>
? When I do drop it in one of those, I get double boxes around my code in the rendered page.If this is something you'd rather not do for everyone, I'd be fine making the code change to my local copy of
angular-highlightjs.js
, but I don't know where to start.