2015-04-03 2 views
2

У меня есть веб-страница с некоторыми сообщениями, в которых есть код. Я пытаюсь использовать подсветку js, чтобы выделить код. однако, я все еще не могу заставить его работать через несколько часов. Это мой первый день с Метеор, поэтому код был адаптирован из учебника на их сайте. Весь проект достаточно прост, вот мой главный JS файл:не может сделать подсветку js work in meteor js

Posts = new Mongo.Collection("posts"); 

if (Meteor.isClient) { 
    // This code only runs on the client 
    Template.body.helpers({ 
     posts: function() { 
     return Posts.find({}, {limit: 15}); 
     } 
    }); 

    Template.post.rendered = function(){ 
     $('pre code').each(function(i, block) { 
     hljs.highlightBlock(block); 
     }); 
    }; 
} 

HTML файл я использую:

<head> 
    <title>Posts</title> 
</head> 

<body> 
    <div class="container"> 
    <header> 
     <h1>Posts</h1> 
    </header> 

    <ul> 
     {{#each posts}} 
     {{> post}} 
     {{/each}} 
    </ul> 
    </div> 
</body> 

<template name="post"> 
    <h1 class="text">{{title}}</h1> 
    {{{ content }}} 
</template> 

У меня также есть топор код стиля CSS файл из GitHub ВЫСВЕТИТЬ Js' репо в проекте. После загрузки страницы в тег кода был добавлен hljs, а код внутри тега кода остался неизменным, как вы можете видеть на следующем изображении. code unchanged

Любая идея, почему подсветка js не изменила код?

Я добавлю дополнительную информацию, если мое описание недостаточно ясное.

+1

Помогло бы иметь демонстрацию [meteorpad] (http://meteorpad.com/). –

+1

@FlorianF. Привет, я поехал туда, сделал демо, и он работал там. Поэтому я реструктурировал свой проект, как демонстрационный проект, и он тоже работал. Спасибо за предложение! – Gnijuohz

ответ

0

Проблема решена. Я попытался сделать демо на meteorpad, как это предложил @Florian, и он как-то работал там.
Итак, я вернулся к своему проекту и реорганизовал его, как демонстрационный проект на метеораде, так или иначе он работал. Я закончил использовать пакет simple:highlighthere.

1

@Gnijuohz

У меня есть демо, используя highlight пакет.

Вот Source Code и DEMO

Это, как я его использовать.

Метеор-версия < 1,1

Template.example.rendered = function(){ 

    /* 
    Higligth Configuration using 
    https://highlightjs.org 
    */ 
    hljs.configure({ 
     tabReplace: ' ', 
     classPrefix: '', 
     useBR:true 

    }) 
    $('pre code').each(function(i, block) { 
    hljs.highlightBlock(block); 
    }); 

    } 

На новой версии Метеор (1.1).

Template.example.onRendered(function(){ 
/* 
     Higligth Configuration using 
     https://highlightjs.org 
     */ 
     hljs.configure({ 
      tabReplace: ' ', 
      classPrefix: '', 
      useBR:true 

     }) 
     $('pre code').each(function(i, block) { 
     hljs.highlightBlock(block); 
     }); 
}) 
+0

Спасибо! Я на самом деле решил это и уже ответил на этот вопрос. – Gnijuohz

+0

Я не могу получить highlighter.js, работая без ошибки «Uncaught ReferenceError: hljs is not defined» в консоли. Я пришел сюда, и все ссылки на все ответы нарушены. Сценарии выше не работают. – Deborah