使用语义-ui 突出显示代码

Question

我正在为网站使用语义-ui，我想知道代码突出显示是否是它支持的实际功能。

在整个库 docs pages 中显示了带有突出显示代码的代码块，但我找不到有关如何在我的项目中使用它的任何详细信息。

查看他们页面的源代码后，我尝试创建以下未突出显示代码的 div：

<div class="ui segment">
  <div class="ui ignored code" data-type="bash" data-title="commands">
    #!/bin/bash

    # test
    echo 'hello there'
  </div>
</div>

也试过包括这个脚本： http://semantic-ui.com/javascript/library/highlight.min.js

我是不是编码有误，或者代码高亮显示甚至不是库的一部分？

Answer 1

正如 jlukic 在这个 post they use highlight.js 库中所说，要插入 code.Then 你需要初始化 initHighlightingOnLoad() 函数来使用他们的代码语法：

hljs.initHighlightingOnLoad();

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
<script src="https://semantic-ui.com/javascript/library/highlight.min.js"></script>

<div class="ui segment">

  <pre><code class="bash">

      #!/bin/bash

      # test
      echo 'hello there'
    </code></pre>
</div>

使用语义-ui 突出显示代码

Code highlighting with semantic-ui

javascript

semantic-ui