Question

我正在寻找一个好的angularjs模块/指令 for Syntax Highlighting（js和整个html页面）。我发现 http://ngmodules.org/modules/angular-highlightjs 它很好，但它切断了

<!DOCTYPE html>
    <html ng-app>
        <head>
            <title>Simple app</title>
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"></script>
        </head>
        <body>
            <input ng-model="name" type="text" placeholder="Your name">
            <h1>Hello {{ name }}</h1>
        </body>
    </html>

DOCTYPE html头部和身体

你知道有什么工具可以突出显示整个html页面吗？

是否有https://google-code-prettify.googlecode.com/svn/trunk/README.html

的角度包装器

enter image description here

结束

使用http://pc035860.github.io/angular-highlightjs/example/#/hljs-source

Answer 1

我在website

当天为我做了一个

确实需要google-prettify代码才能运行。如果它适合你玩它

angular.module('myModule').directive('code',[function(){
var dir = {};
dir.scope = {
    plunk: '@'
};
dir.restrict = 'E';
dir.template = '<div class="ed-code clearfix"><pre class="prettyprint"></pre><a ng-href="{{plunk}}" target="_blank"><i class="code-link fa fa-toggle-down fa-2x" title="View in Plnkr"></i></a></div>';
dir.transclude = true;
dir.link = function(scope, elem, attr, ctrl, transclude) {
    var code = angular.element('<div>').append(transclude());
    code = code.html().indexOf('<span class="ng-scope">') != -1 ? code.find('span').html() : code.html();
    code = code.replace(/</g,"&lt;").replace(/>/g,"&gt;");
    elem.find('pre').append(prettyPrintOne(code.replace(/ ng-scope/g,"").replace(/ class="ng-scope"/g,"").replace(/\t/g,"").replace(/</g,'&lt;').replace(/>/g,'&gt;')));
};
return dir;
}])

发表了一篇关于它的文章here

用于语法突出显示的angularjs模块/指令

结束

1 个答案: