Code highlighting with semantic-ui

Question

I'm using semantic-ui for a website and I want to know if code highlighting is an actual feature it supports.

There are code blocks shown throughout the library's docs pages with highlighted code but I can't find any details about how to use it in my project.

After looking at their page's source code I tried creating the following divs which did not highlight the code:

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

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

Also tried including this script: http://semantic-ui.com/javascript/library/highlight.min.js

Am I coding it wrong or is code highlighting not even part of the library?

Answer 1

As jlukic said in this post they use highlight.js library to insert code.Then you need to initialize initHighlightingOnLoad() function to use their code syntax:

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>