Question

我能够使用PUT制作代码块，如下所示：

highlight.js

工作正常！但是现在我也希望在我的文本中有一些代码行，内联。像这样：

<pre>
  <code class="haskell">
    {-# OPTIONS_GHC -Wall #-}
    euclid :: Int -> Int -> Int
    euclid a b
      | a == 0    = b
      | b == 0    = a
      | a > b     = euclid (a-b) b
      | otherwise = euclid a (b-a)
  </code>
</pre>

不能工作...... 您可以在my Site

查看

如何使用<p> Info text inline code testing <code class="haskell">{-# OPTIONS_GHC -Wall #-}</code> maybe it works</p>生成内联代码？

Answer 1

你只需要一点CSS来使它内联。你是如何做的取决于你，但如果它在p标签内，你可以将它内联。

p > code.hljs { display: inline; }

示例：https://jsfiddle.net/ykyLcvnw/1/

Answer 2

在第一个示例中，您同时使用<pre>和<code>标记。在你的第二个案例中并非如此。

来自highlight.js usage page：

这将查找并突出显示<pre><code>标记内的代码;

我还从使用页面中获取了此示例：

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

由于您的内联标记位于<span>标记中，即层次结构为span code，因此您可以使用以下内容实现内联突出显示：

 $('span code').each(function(i, inline) {
   hljs.highlightBlock(inline);
 });

我在测试页面的控制台中运行了此代码，并且我看到了结果。假设您不使用jQuery，伪代码只是

迭代所有想要的元素
应用hljs.highlightBlock（元素）

Answer 3

如果您在CSS中定义自己的inline类

，这会简单得多

.inline{
    display: inline;
}

然后将代码标记的class属性设置为haskell inline 就是这样，通过用您选择的语言替换haskell，您可以使其与任何其他语言的方式相同。

highlight.js内联模式可能吗？

3 个答案: