I have the problem with HTML highlighting by using Prism.js The problem was exactly the same with Prism HTML highlighter . But the solution there do not work in my case.
As you can see there, the code was not hightlighted
[Source Code]
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.4.1/themes/prism.min.css" rel="stylesheet" /> <div class="container" > <div class="jumbotron" style="text-align: center"> <h1>Lanyang Chat</h1> <h1><small>Presentation</small></h1> </div> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Testing</h3> </div> <div class="panel-body"> <pre><code class="language-markup"><script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.4.1/prism.min.js"></script></code></pre> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.4.1/prism.min.js"></script>
[Update]
There was nothing wrong the code, the problem was on implementation with AngularJS
[Temporary Solution] - by @Angelo
Link : http://webtoutsaint.com/prismjs_eng
I use page controller method and slightly change the code since the code provided in the link gave me some syntax error.
app.controller('PrismCtrl', function () {
console.log("Page Controller reporting for duty.");
Prism.highlightAll();
//Here is the problem, Prism is undefined if I include the js file on partial page, But work perfectly if I include it on index.html
});
The problem was solved when including the prism.js on index.html. But failed with undefined error while including the prism.js on the partial/template page.
*Note: I'm not familiar with Angular.js, anyone can solve me this problem?
main.js
var app = angular.module('LanyangChat', ['ngRoute']);
app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when("/", {templateUrl: "pages/login.html", controller: "PageCtrl"})
.when("/login", {templateUrl: "pages/login.html", controller: "PageCtrl"})
.when("/chat", {templateUrl: "pages/chat.html", controller: "PageCtrl"})
.when("/online", {templateUrl: "pages/online.html", controller: "PageCtrl"})
.when("/presentation", {templateUrl: "pages/presentation.html", controller: "PrismCtrl"})
.when("/timeline", {templateUrl: "pages/timeline.html", controller: "PageCtrl"})
.when("/changelog", {templateUrl: "pages/changelog.html", controller: "PageCtrl"})
.when("/privacy-tos", {templateUrl: "pages/privacy-tos.html", controller: "PageCtrl"})
.when("/about", {templateUrl: "pages/about.html", controller: "PageCtrl"})
.when("/404", {templateUrl: "pages/404.html", controller: "PageCtrl"})
.otherwise({redirectTo: '/404'});
}]);
app.controller('PageCtrl', function (/* $scope, $location, $http */) {
//console.log("Page Controller reporting for duty.");
});
app.controller('PrismCtrl', function () {
console.log("Page Controller reporting for duty.");
Prism.highlightAll();
});
Seems that prism.js and frameworks using AJAX as Angular, do not mix up. Although, it's not impossible. The following topic displays an example on how to use them together:
More helpful topics:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.