You are trying to use the global context prettyPrint()
when you should be using the AMD module code.innerHTML = prettify.prettyPrintOne(code.innerHTML);
Using google-code-prettify with requireJS
-
23-07-2023 - |
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?
La solution
Autres conseils
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, "<")
.replace(/>/g, ">")
.replace(/ /g, " ")
.replace(/\'/g, "'")
.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
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow