Prism - подсветка синтаксиса в коде на сайте

Официальный сайт https://prismjs.com

Ссылка на мою сборку с темной темой Оkaidia

Ниже примеры оформления кода.

Подсветка кода HTML без экранирования с плагином Unescaped Markup

<script type="text/plain" class="language-markup">HTML код</script>

Ввод

Вывод

Подсветка кода HTML с экранированием (без плагина Unescaped Markup)

<pre><code class="language-markup">HTML код</code></pre>

Ввод

Вывод

    <div class="item-list">
        <p>Hello, code!</p>
    </div>
    

Подсветка кода CSS

<pre><code class="language-css">CSS код</code></pre>

    @media screen {
        div {
        text-decoration: underline;
        }
    }
    

Подсветка кода Javascript

<pre><code class="language-javascript">Javascript код</code></pre>

    $('#theModal').on('show.bs.modal', function (e) {
	        var button = $(e.relatedTarget);
	        var modal = $(this);
	        modal.find('iframe').attr('src', button.data("remote"));
	    });
        var youtube_src = $("#theModal iframe").attr("src");
        $("#theModal").on('hidden.bs.modal', function (e) {
            $("#theModal iframe").attr("src", null);
        });
    

Подсветка кода Kotlin

<pre><code class="language-kotlin">Kotlin код</code></pre>

//комментарий
  fun main(args: Array) {
      var arr = intArrayOf(0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89)
      println(arr.joinToString(prefix = "Числа Фибоначчи: ", limit = 10, truncated = "и т.д"))
  }
    

Подсветка кода Java

<pre><code class="language-java">Java код</code></pre>

    //комментарий
    class HelloWorld {
        public static void main(String[] args) {
            System.out.println("Hello World!");
        }
    }
    

Подсветка кода SQL

<pre><code class="language-sql">SQL код</code></pre>

    SELECT * FROM orders
    WHERE status = 'cancelled' AND sum NOT BETWEEN 3000 AND 10000
    

Установка Prism на сайт

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

В блоке Languages выбираем необходимые языки, проставляя чекбосы у нужных. В блоке Plugins аналогично выбираем необходимые плагины. Я выбрал Line Numbers для нумерации строк кода, Normalize Whitespace для удаления не нужных пустых строк и пробелов, и Unescaped Markup, который позволяет более удобно публиковать код на сайте (верхний пример). Подробнее о работе Unescaped Markup можно почитать здесь.

После того, как выбор нужных языков и плагинов сделан, внизу страницы скачайте 2 файла prism.js и prism.css, нажав соответствующие кнопки DOWNLOAD JS и DOWNLOAD CSS. Скаченные два файла необходимо подключить на вашем сайте.

Обратите внимание, что в скачанных файлах .js и .css первой строкой указана ссылка на вашу сборку, она будет полезна вам если возникнет необходимость в дальнейшем внести изменения в сборке. При переходе по такой ссылке, на странице загрузки уже будут отмечены все ваши прежние выборы.