entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

1voto

Highlights no funcina en template

Hola gente, soy nuevo con angularjs y me he encontrado un problemilla.

Tengo una web en la que voy cambiando el contentido de <div ng-view></div> usando ngRoute y quiero colorear la sintaxis de un bloque de código con highlights.js o prim.js. Si meto el código en el index.html lo colorea bien, pero si lo tengo en una página aparte que cargo desde app.js no actúa el coloreado.

INDEX.HTML

//<pre><code class="language-javascript">
    colour syntax is ok
//</code></pre>

APP.JS

ionicEsApp.config(function($routeProvider) {
    $routeProvider.
    when('/', {
        templateUrl: 'templates/content-principal.html',
        //controller: 'IonicEsController'
 }).

content-principal.html

//<pre><code class="language-javascript">
    colour syntax is NO work
//</code></pre>

Supongo que es porque angularjs renderiza una sola vez el html, ¿será ésta la causa? ¿cuál puede ser la solución?

Gracias & Salu2!!!

1 Respuesta

1voto

white Puntos75880

crea una directiva que formate los elementos <code>:

ionicEsApp.directive('ngPrism', [function() {
    return {
       restrict: 'A',
         link: function ($scope, element, attrs) {
            element.ready(function() {
                 Prism.highlightElement(element[0]);
             });
         }
    }
}]);

<pre><code ng-prism class="language-javascript">
    alert('1');
</code></pre>

fuente: http://blog.chorip.am/articles/prismjs-and-angularjs/

0voto

CarmaZone comentado

Gracias pero lo he puesto tal cual y sigue sin colorear, voy a investigar la fuente a ver si saco algo en claro, que al tema directivas aun no he llegado jajaja.

0voto

white comentado

Fíjate en este ejemplo que hice http://plnkr.co/edit/DPLKbCTaFH3ys4OJYzuJ?p=preview asegurate de que los tag code tengan el atributo ng-prism y de ver si se actualizo tu codigo fuera de cache.

0voto

CarmaZone comentado

Perfecto, ha funcionado white, resulta que la declaración de la directiva tiene que ir encima del .config.

0voto

CarmaZone comentado

Me gustaría añadir que hay un problema al mostrar código html. Debemos sustituir los símbolos de apertura < por < Ejemplo:

<pre><code class="language-markup">
&lth1> Hola! &lt/h1>
</code></pre>

0voto

white comentado

buen detalle! hize un fork en plunker sobre eso http://plnkr.co/edit/hSFlz3SbRPtWpWZ6ArFr?p=preview

element.html().replace(/(<|>|")/g, function(chr) {
    return {
        '<': '&lt;',
        '>': '&gt;',
        '"': '&quot;'
    }[chr];
})

aunque si los datos vienen del servidor es mejor escaparlos desde ahí.

0voto

CarmaZone comentado

Uo gracias, veo que controlas bastante de angularjs. Y lo de las directivas parece que tienen mucha potencia.
Por cierto, tu plunker tiene un fallo, si te fijas, el html no se coloréa, has puesto mal la clase, es class="language-markup", de esa forma va perfecto ;-)

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta