Using google-code-prettify with requireJS

Question

My RequireJS is

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'])
    })
})

I configured as what https://github.com/tcollard/google-code-prettify said, but the result is not correct, Code highlighting was failed. I asked for help, how to configured the requireJS that it has code highlighting?

Answer 1

You are trying to use the global context prettyPrint() when you should be using the AMD module code.innerHTML = prettify.prettyPrintOne(code.innerHTML);

Answer 2

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