highlight.js 内联模式可能吗？答案

【问题标题】：highlight.js inline mode possible?highlight.js 内联模式可能吗？
【发布时间】：2016-12-07 21:53:13
【问题描述】：

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

没有用... 您可以通过my Site查看它们

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

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

您只需要一点 CSS 就可以使其内联。如何操作取决于您，但如果它在 p 标记内，您可以将其设为内联。

p > code.hljs { display: inline; }

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

【讨论】：

如果 OP 将块代码放入 <p> 标记内，就会出现问题。
怎么样？ CSS 选择器仅选择 p 元素的直接 code.hljs 子元素以内联显示。只要块代码在<pre><code> 标签内，它就会显示为一个块，即使它前面带有<p> 标签。

【解决方案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(element)

【讨论】：

什么？我不明白你在说什么......？
你的回答是 0 有用！这与内联突出显示有什么关系？？
我说你的第二个例子，内联，你有一个跨度内的代码标签。将代码标签包裹在一些前置标签中，看看是否有帮助！
不，当然不会，那么它是一个块而不是内联！
已编辑答案。希望对您有所帮助！

【解决方案3】：

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

.inline{
    display: inline;
}

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

【讨论】：