О web-разработке
и даже немного больше...

Подсветка синтаксиса кода на вашем сайте

Довольно много сайтов содержат на своих страницах листинг кода, который может отличаться в зависимости от синтаксиса языка своей подсветкой. Подсветка кода позволяет улучшить визуальное восприятие информации на сайте. Если вы заметили, то на нашем сайте тоже есть код с подсветкой, и сейчас мы поговорим о том, как такое сделать на своих проектах. Существует довольно неплохая реализация плагина подсветки кода, написанная на javascript, называется highlight. По данным сайта, на котором размещен плагин, сегодня он умеет подсвечивать около 169 языков, и 77 стилей, а так же много имеет много других плюшек.
Вот пример, как может выглядеть код с подсветкой:

<!DOCTYPE HTML>
<html>
 <head>
   <meta charset="utf-8">
  <title>Тег А</title>
 </head>
 <body>
  <p><a href="images/xxx.jpg">Посмотрите на мою фотографию!</a></p>
  <p><a href="tip.html">Как сделать такое же фото?</a></p> 
</body>
</html>

Рассмотрим базовый пример, как можно прикрутить highlight плагин на свой сайт. Первым делом, вам необходимо скачать плагин hightlight с официального сайта.
Разместите файлы в директорию шаблона вашего сайта, затем в заголовке странице подключите скрипт и файл стилей плагина.

<link rel="stylesheet" href="/path/to/styles/default.css">
<script src="/path/to/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

Строка hljs.initHighlightingOnLoad(); инициализирует работу плагина.

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

<pre><code>…</code></pre>

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

<pre><code class="html">...</code></pre>

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

<pre><code class="nohighlight">...</code></pre>

Это базовые возможности использования плагина, но это не всё. О других способах использования вы можете наглядно ознакомиться на страницах документации по использованию плагина.

Опубликован: 26.02.2017 г.

См. также:

Делаем кнопки «Поделиться в соцсетях»
Стрелочные функции в JS
Мобильное меню для сайта на CSS
Опасность использования атрибута target="_blank"
Бесконечная анимация вращения на CSS
Анимация вращения при наведении курсора
Стилизация выделения номера телефона в мобильных браузерах
Эффекты кнопок для сайта

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Комментарии
  • Загрузка...
Друзья сайта