角JS不使用Prism.js

Question

请你看一下This Demo，让我知道为什么Prism.js不能工作吗？

<div ng-app="">
<p>Background : <input type="text" ng-model="tax" placeholder="Enter Bg Here"></p>
 <pre class="line-numbers language-css" >
<code>
.navbar-app {
    background-color: #{{tax}};
}

</code>
</pre>
</div>

特纳克

Answer 1

该演示程序没有显示足够的代码，特别是app.js。如果你想使用棱镜的角度，那么你可以使用一个指令。

<script src="bower_components/prismjs/prism.js" "data-manual"></script>
<script src="bower_components/prismjs/plugins/line-numbers/prism-line-numbers.js"></script>

加上图书馆。

<code-highlight source="codeToHighlight" type="{{ codeType }}" disable-highlighting="{{ disableHighlighting }}"></code-highlight>

代码-高亮显示可以添加到html文件中的指令。

angular.module('app')
  .directive('codeHighlight', ['$compile', '$timeout',
    function ($compile, $timeout) {
      return {
        restrict: 'E',
        scope: {
          type: '@',
          source: '=',
          disableHighlighting: '@'
        },
        link: function(scope, element) {
          var timeout;
          scope.$watch('source', function(value) {
            if (!value) return;
            element.html('<pre class="line-numbers"><code>{{ source }}</code></pre>');
            $compile(element.contents())(scope);
            var code = element.find('code')[0];
            code.className = 'language-'+scope.type;
            if (scope.disableHighlighting !== 'true') {
              timeout = $timeout(function() {
                Prism.highlightElement(code);
              }, 0, false);
            } else {
              element.find('pre')[0].className = 'language-'+scope.type + ' line-numbers';
            }
          });

          scope.$on('$destroy', function () {
            $timeout.cancel( timeout );
          });
        }
      };
    }
  ]);

并将其添加到codeHighlight.js文件中，并将其包含到页面中。