是否可能采用highlight.js内嵌模式？

Question

我能够像这样用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>

工作得很好！但是现在我也想在我的文本中有一些代码行，内联。如下所示：

<p> Info text inline code testing <code class="haskell">{-# OPTIONS_GHC -Wall #-}</code> maybe it works</p>

不管用..。你可以在我的网站查看他们

如何使用highlight.js制作内联代码？

Answer 1

你只需要一个小的CSS来使它内联。如何做到这一点取决于您自己，但如果它位于p标记中，则可以将其内联。

p > code.hljs { display: inline; }

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

Answer 2

在第一个示例中，您同时使用了一个<pre>和一个<code>标记。这不是你的第二次。

来自highlight.js使用页面

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

此外，我还从“使用”页面中获得了这个示例：

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

由于内联标记位于<span>标记中，也就是说，层次结构为span code，因此可以通过以下方式实现内联突出显示：

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

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

1. 迭代所有所需的元素
2. 应用hljs.highlightBlock(元素)

Answer 3

如果像这样在CSS中定义自己的inline类，就会简单得多

.inline{
    display: inline;
}

然后将代码标记的class属性设置为haskell inline。

就是这样，您可以通过用您选择的语言替换haskell来使其与任何其他语言相同。