Angular.js ile PRISM'yi vurgulayan HTML

Question

Prism.js kullanarak HTML vurgulamasında sorun yaşıyorum Sorun, Prism HTML highlighter ile tamamen aynıydı. Ama çözüm benim durumumda çalışmıyor. Orada gördüğünüz gibi

, kod hightlighted değildi

[Kaynak Kodu]

<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>

---

[Güncelleme]

kod yanlış bir şey yok edildi, sorun angularjs ile uygulanmasına ilişkin oldu

---

[Geçici Çözüm] - @Angelo

Link: http://webtoutsaint.com/prismjs_eng

Sayfa denetleyici yöntemini kullanıyorum ve bağlantı gavunda sağlanan koddan beri kodu biraz değiştiriyorum bazı sözdizimi hatası.

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 
}); 

Sorun, prism.js'yi index.html üzerinde eklerken çözüldü. Ancak kısmi/şablon sayfasında prism.js'yi eklerken tanımlanmamış bir hatayla başarısız oldu.

* Not: Angular.js ile aşina değilim, herkes bu sorunu çözebilir mi?

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

Answer 1

AJAX olarak Açısal kullanarak prism.js ve çerçeveler, karıştırmak kalmamasıdır görünüyor. Bununla birlikte, imkansız değildir.

• http://webtoutsaint.com/prismjs_eng

Daha yararlı konular::

• Highlights don't work in external template
• http://prismjs.com/faq.html#basic-usage