Подсвечиваем HTML код -> Как сделать сайт на html -> Как использовать Highlight.js

Подсветка кода на html странице

Часто в блоге или на сайте требуется вставить в HTML некоторый код на каком-либо языке (CSS, HTML, Perl, PHP, JS, C и т.д.). Особенно это актуально в программистских-технических блогах.

В тот раз я как выкрутился. Файл PHP переименовал в .phps - вызвал, он РНР подстветил мне код и я скопировал готовый HTML и вставил его в блог. Решение конечно интересно, но согласитесь, постоянно так извращаться - не выход. Нужно какое-то быстрое и простое решение.

Сейчас опять возникла необходимость во вставке кода PHP в HTML этого блога. Как? Недолго думая - я загуглил на эту тему и через 5 минут у меня было уже готовое решение, которое я тут же прицепил к этому блогу.

Ближе к делу…

Итак, если хотите красивую автоматическую подсветку любого известного языка программирования в Ваш блог - делаем следующее.

  1. Идём на сайт разработки проекта “Highlight.js“.
    Скачиваем там себе “Highlight.js” и распаковываем.
  2. Создаём тестовый файл для проверки test.html, где пишем: 
    <head>
...
<link rel="stylesheet" title="Default" href="styles/default.css">
</head>

<script type="text/javascript" src="highlight.js"></script>
<script type="text/javascript">
initHighlightingOnLoad('php', 'html', 'css');
</script>

<pre><code class="php">...тут РНР код...</code></pre>

Аналогичным образом можно подсвечивать не только РНР код. Этот проект поддерживает достаточное количество языков подсветки, судите сами:

Вызывать библиотеку можно ещё вот так:
initHighlightingOnLoad();
Но не советую инициализировать скрипт подобным образом, поскольку он попытается автоматически распознать подсвечиваемый язык, что не всегда можно сделать корректно и второе - это время затрачиваемое на данную операцию. Так естественно долже. Поэтому, если знаете какой язык нужно подсвечивать - пропишите его сразу в “class“.

Как подключить этот скрипт к WordPress?

Сделать это можно двумя путями. Простым и не очень.
Простой - это использовав плагин ВордПресса wp_highlight.js.php, который идёт в архиве с Highlight.js.

Посложнее путь - это самостоятельно расположить все файлы скрипта и вручную подключить его в тему.
Я выбрал именно этот путь. Зачем? Не доверяю я этим всем плагинам, из-за них частенько при апдейтах “ломается” вордпресс. А если не сложно сделать вручную, то зачем вешать лишний плагин?

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

<style type="text/css">@import url(wp-content/themes/THEME_NAME/highlight/highlight.css);</style>
<script type="text/javascript" src="wp-content/themes/THEME_NAME/highlight/highlight.js"></script>
<script type="text/javascript">
initHighlightingOnLoad('php', 'html', 'css');
</script>

В файлы темы THEME_NAME (замените на название Вашей темы оформления). Файлы такие:

Теперь код будет автоматически подсвечиваться.
Вы пока не обращайте внимания на то, что в блоге у меня не очень красивая подсветка.. я просто сейчас в процессе дизайна своей подсветки (это скрипт также предоставляет!). Поэтому, пока что провожу эксперименты с подходящим вариантом подсветки.

Ну вот и всё! Как грится, “вот и все чудеса”!
Надеюсь этот пост пойдёт кому-нибудь на пользу!
Наслаждайтесь!


Меню сайта

Подсветка кода на html странице
Подсветка кода на html странице