Выделение кода с помощью semantic-ui

Question

Я использую семантику для веб-сайта, и я хочу знать, является ли подсветка кода фактической функцией, которую она поддерживает.

В блоке показаны коды кода с выделенным кодом, но я не могу найти информацию о том, как использовать его в моем проекте.

После просмотра исходного кода своей страницы я попытался создать следующие дивы, которые не выдвигают на первый план код:

<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 они используют highlight.js библиотеку для вставки code.Then необходимо инициализировать initHighlightingOnLoad() функцию, чтобы использовать их код синтаксис:

hljs.initHighlightingOnLoad();

<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>