使用google-code-prettify with requireJS

时间:2014-05-15 10:20:58

标签: javascript requirejs

我的RequireJS是

requirejs.config({
    appDir:"/static",
    paths:{
        'jquery' : ["../bower_components/jquery/dist/jquery.min"],
        'angular': ["../bower_components/angular/angular"],
        'domReady': ["../bower_components/requirejs-domready/domReady"],
        "prettify": "/static/bower_components/google-code-prettify/src/prettify"
    },
    shim:{
        'angular':{
            "exports":"angular",
            deps: ["jquery"]
        }
    }
})

require(["jquery", "angular", "domReady", "prettify"],
    function($, angular, domReady, prettify){
    angular.module("docpage", ["desktop"])
        .controller("docController", function($rootScope){
            $rootScope.dataReady = function(){
                prettyPrint()
            }
        })
    domReady(function(){
        angular.bootstrap($("#doc"), ['docpage'])
        angular.bootstrap($("#news"), ['desktop'])
    })
})

我配置为https://github.com/tcollard/google-code-prettify所说的,但结果不正确,代码突出显示失败。我请求帮助,如何配置它具有代码突出显示的requireJS?

2 个答案:

答案 0 :(得分:0)

您应该在使用AMD模块prettyPrint()时尝试使用全局上下文code.innerHTML = prettify.prettyPrintOne(code.innerHTML);

答案 1 :(得分:0)

JS:

.controller("codeController", function($scope) {
    $scope.init = function(code){
        $scope.codedom = code
    }
})
.directive('prettyprint', function() {
    return {
        restrict: 'C',
        link: function postLink(scope, element, attrs) {
            element.html(prettyPrintOne(scope.codedom.content
                    .replace(/&/g, "&")
                    .replace(/\"/g, """)
                    .replace(/</g, "&lt;")
                    .replace(/>/g, "&gt;")
                    .replace(/ /g, "&nbsp;")
                    .replace(/\'/g, "&#39;")
                    .replace(/\n/g, "<br>"),
                scope.codedom.meta.lang.toLowerCase()))
        }
    }
})

HTML:

<div class="section sec-editable" ng-controller="codeController" ng-init="init(code)">
    <span>{{code.meta.lang}}</span>
    <pre class="prettyprint">{{code.content}}</pre>
</div