用语义ui代码突出显示

时间:2016-04-14 16:13:37

标签: javascript semantic-ui

我在网站上使用semantic-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

我编码错误或代码突出显示甚至不是库的一部分吗?

1 个答案:

答案 0 :(得分:9)

正如jlukic在post中所说,他们使用highlight.js库来插入代码。然后你需要初始化initHighlightingOnLoad()函数来使用他们的代码语法:

&#13;
&#13;
hljs.initHighlightingOnLoad();
&#13;
<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>
&#13;
&#13;
&#13;