Allow use of <pre><code> tags instead of <div hljs>

[DavidZemon]

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.

<li>Multi-line comments are marked with <code>/*</code> and <code>*/</code>
<pre><code hljs class="cpp">/*
 A multi-line comment!
 */</code></pre>

<li>Multi-line comments are marked with <code>/*</code> and <code>*/</code>
<div hljs class="cpp">/*
 A multi-line comment!
 */</div>

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.

[pc035860]

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>

[DavidZemon]

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