Question

我有一个网页显示一些帖子，其中包含一些代码。我正在尝试使用突出显示j来突出显示代码。但是，几个小时后我仍然无法工作。这是我与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>

我还有一个x代码样式的css文件来自项目中的突出显示js'github repo。加载页面后，hljs作为类值添加到代码标记中，但代码标记内的代码保持不变，如下图所示。 code unchanged

任何想法为什么突出显示js没有改变代码？

如果我的描述不够清楚，我会添加更多信息。

Answer 1

@Gnijuohz

我使用highlight包进行了演示。

以下是Source Code和DEMO

这就是我使用它的方式。

Meteor-Version＆lt; 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);
    });

  }

关于新的Meteor版本（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);
        });
})

Answer 2

问题解决了。我按照@Florian的建议尝试在meteorpad上进行演示，并且它在某种程度上起作用所以我回到我的项目并重新组织它就像meteorpad上的演示项目一样，它以某种方式工作。我最终使用了simple:highlight包here。

不能使亮点js在流星js中起作用

2 个答案: