HTML highlighting PRISM with Angular.js

Question

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">&lt;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();
});

Upload the code using the in-built code containers please, so that we can manipulate the code easier. You can find the tool in the edit menu. — Ahmed Aboumalek, Apr 01 '16 at 19:38
Have you tried downloading `prism.css` and `prism.js` then placing them into your website directory so that you can locally use them instead? — Ahmed Aboumalek, Apr 01 '16 at 19:49
@Angelo yes, I have tried that because my first assumption is that there's problem with the CSS or JS but when I tried to copy paste the code from their main website, there is no problem (it displayed correctly). But the code looked like this http://pastebin.com/NRXhK8P5 — LckySnday, Apr 01 '16 at 19:54
Can you add an HTML snippet below your code so that we can run a test on it please? You can use that yourself to see the results. ps: I've already tried running the code and it seemed to perfectly work. — Ahmed Aboumalek, Apr 01 '16 at 20:01
@Angelo it seems there is no problem with the code (JSFiddler) https://jsfiddle.net/5o3sur32/1/ So right now i don't know why it doesn't work on my machine, is there is something need to be done in order to implement it with AngularJS? — LckySnday, Apr 01 '16 at 20:09

score 2 · Accepted Answer · edited May 23 '17 at 12:07

2

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:

http://webtoutsaint.com/prismjs_eng

HTML highlighting PRISM with Angular.js

1 Answers1