15 скриптов для подсветки синтаксиса кода


Подсветка синтаксиса кода — SyntaxHighlighter

Привет всем моим посетителям блога! Сегодня наша тема — подсветка синтаксиса кода в Blogger. Syntax Highlighter от Alex Gorbatchev — JavaScript библиотека для подсветки синтаксиса исходных кодов на веб-страницах.

JavaScript библиотека для подсветки синтаксиса кода легко интегрируется с любыми сайтами и блогами. В нашем случае SyntaxHighlighter будем устанавливать в наш любимый Blogger.

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

На данный момент включена в дистрибутив поддержка следующих языков: Java, C++, XML, CSS, HTML, JavaScript, Bash, C#, Delphi, Diff, Groovy, PHP, Plain, Python, Ruby, Scala, SQL, Visual Basic. Благодаря этому завоевала огромную популярность. Но по моему нам столько языков не нужно. У себя в блоге на платформе Blogger, я использую только несколько основных: HTML, CSS, JavaScript. Этого достаточно будет и вам, если Вы ведете блог на вроде моего, о гаджетах, виджетах и так далее. Сегодня я покажу вам два различных способа установки подсветки синтаксиса в блог Blogger.

Как установить SyntaxHighlighter для подсветки кода в Blogger

Первый способ, которым пользуюсь я у себя в блоге, подсветка будет выглядеть так:

Syntax Highlighter от Alex Gorbatchev

Очень удобная подсветка кода, посетитель может нажать на значок копировать в правом в верхнем углу и откроется небольшое окошко с кодом. Для установки подсветки синтаксиса кода в блог зайдите в панель управления Blogger — Шаблон — Изменить HTML. Поиск (обычно в начале шаблона) и вставляем чуть ниже код:

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

Для «JavaScript», Вы можете использовать «JS» или «JScript» или «JavaScript»:

Аналогично и для стилей «CSS» использовать:

Ну и последнее для js использовать:

Теперь дорогие друзья, я покажу вам другой способ подсветки кода. Время неумолимо движется вперед и конечно появляются различные способы подсветки кода. Более легкий Highlight.js, с добавлением различных стилей CSS. Вот например темный стиль.

Вид подсветки CSS:

Вид подсветки HTML:


Темный стиль подсветки кода html

Если хотите такой стиль установить в блог, тогда зайдите в Blogger — Шаблон — Изменить HTML. Находим тег: ]]> и перед ним (чуть выше) добавляем код:

Затем, находим тег и чуть выше вставляем JavaScript:

Этим способом пользоваться легче, при вставке кода в сообщение, код заключаем всего лишь в такие теги:

Всё готово, пользуетесь на здоровье. Далее, если вам нужен светлый стиль.

Светлый стиль подсветки кода CSS

Подсветка кода HTML:

Подсветка синтаксиса кода HTML

Тогда перед тегом ]]> вставляем светлый стиль:

Вот и всё. Скрипт для вставки в шаблон тот же и заключать в теги так же.

Позвольте на этом попрощаться с вами. Удачи. До новых встреч.

Подсветка синтаксиса кода в тексте статьи скриптом SyntaxHighlighter

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

Подключение скрипта SyntaxHighlighter на сайт.

Итак, для начала необходимо скачать скрипт. Сделать это можно на официальной странице.
Сама установка скрипта не вызовет сложностей даже у начинающего вебмастера. Нужно всего лишь подключить файлы скрипта между тегами .
Скорее всего в скачанном архиве Вы обнаружите множество файлов. Нам нужны не все.
Обязательными являются файлы стилей скрипта, его ядро и функция подсветки.

Цукерберг рекомендует:  12 текстовых редакторов HTML5

Затем необходимо добавить файлы ответственные за подсветку определенного языка. В скачанном архиве их много и Вам необходимо выбрать какие нужны. В моем случае это файлы для языков php, c++, javasript, css. Их так же нужно поместить между тегами страницы. В моем случае ни выглядят так:


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

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

Но для того, чтобы код не выполнялся на странице, а только отображался, его необходимо привести в подходящий вид — специальные символы HTML-сущности. Я рекомендую делать это в текстовом редакторе NotePade++.

Скорее всего Вы заметили, что свой код я оборачиваю дивом с классом code_sample. Я использую его для задания стилей. У меня он выглядит так:

Как видите в этом нет ничего сложного. Подключить и настроить скрипт SyntaxHighlighter очень просто.

Простая подсветка кода на сайт

Эта запись написана мною в 2014 году. В те времена деревья были высокими, а доллар стоил меньше 40 рублей. С тех пор прошло много времени и многое изменилось. Учитывайте это, читая.

После обновления блога мне показалось, что будет намного удобнее в блоках с кодом ввести подсветку синтаксиса.

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

Поэтому я решил написать свою простую подсветку кода в блоках на JavaScript, она будет работать для html, css, php, js.

UPD 05.01.2020: Я разработал плагин для WordPress, который вы можете использовать. Читать подробнее

Что бы скрипту было понятно где какой код, его нужно оборачивать в специальные блоки:

Так же, если это html код (ну или там просто встречаются теги), их нужно преобразовывать в специальные символы. Хотя это вроде и так понятно, иначе теги просто не будут видны, ибо браузер их обработает как теги. UDP: В новой версии скрипта это уже не обязательно, он всё сделает за вас.

Работает скрипт на основе регулярных выражений, просто оборачивая нужные символы в span теги для соответствующей окраски. Он делает это не идеально, присутствуют различные баги, но с задачей в общем случае справляется — цель скрипта просто сделать код, размещаемый в блоге, читабельным

Код скрипта и пример использования вы можете взять на github.


Пример его работы вы видите на моём блоге.
Хуже всего подсветка реализована для JavaScript, т.к. я мало пишу на нём, для html, css и php более-менее. Со временем буду дорабатывать и выкладывать тут информацию об обновлениях.

UPD 13.07.2014: Теперь скрипт сам заменит html символы на соответствующие им, чтобы их можно было корректно вывести. Предварительная обработка не обязательна.

UPD 20.07.2014: Введена поддержка html кода в PHP блоках, теперь при смешении html и php кода подсвечивается и тот, и другой (в PHP блоках).

UPD 24.07.2014: Исправлен баг, если в блоках с PHP кодом не встречается блоков , то весь блок подсвечивается по PHP правилам.

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

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

Цукерберг рекомендует:  Обучение - Маршрутизация

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

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

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

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

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

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

Подсветка синтаксиса с помощью Highlight.js — оформляем код в тексте

Авторам, регулярно публикующим статьи со вставками кода, желательно позаботиться о комфортном чтении пользователями этого кода. Листинг воспринимается легче при наличии подсветки синтаксиса. Существует много инструментов, помогающих настроить подсветку синтаксиса на блоге.

Мой выбор пал на Highlight.js — супер легкий, простой и при этом универсальный инструмент с возможностью тонкой настройки под себя. Не смотря на поддержку многих языков программирования, чаще всего достаточно подключения стандартной сборки. Именно ее мы и научимся подключать на свой сайт.

Настройка Highlight.js на сайте вручную


Подробно о Highlight.js можно почитать на официальном сайте. Там же доступна полная информация, исходники и последняя версия для скачивания. Нам же загрузка не понадобится и подключать скрипт будем немного другим путем.

Подключение и инициализация скрипта

Подключать скрипт рекомендую из JavaScript библиотеки Яндекса (использование CDN способствует ускорению загрузки сайта). Переходим на страницу, копируем статический адрес скрипта последней версии (сейчас актуальна версия 8.2) и добавляем 2 строчки в код сайта с подключением и инициализацией (перед закрывающим тегом

Подсветка синтаксиса кода для uCoz

Активно создаются сайты для программистов и от программистов, в том числе и на uCoz. Таким проектам просто необходим плагин подсветки синтаксиса.

На нашем сайта другая подсветка синтаксиса, более простая, вам же мы рекомендуем плагин «highlight.js». На странице установки можно выбрать нужное количество или все языки программирования.

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

Поддерживает 125 языков и имеет 63 стиля:

Установка

Управление дизайном — Модуль (Каталог файлов / Новости сайта / и т.д.) — Страница материалов и комментариев к нему

1. Загрузите файлы JS и CSS из архива на свой сайт (скачивание с официального сайта, нужно выбрать нужные языки и стили).

2. Вставьте код между и , заменив пути к файлу скрипта и файлу стилей на свои:

3. Следующий код вставить на этой же странице перед закрывающим тегом

highlight.js — лучшая подсветка синтаксиса кода

Сравним какая подсветка синтаксиса кода лучше. На сегодняшний день мы имеем уже большее количество всяких скриптов которые делают это. Загуглим: code syntax highlighting. и рассмотрим список самых популярных скриптов подсветки синтаксиса:


Зачем тратить на это время. Нам нужно чтобы работало быстро, не нагружало страницу лишними скриптами, и заморачиваться не хочется с внедрением скрипта в сайт. Надо также чтобы отображалось красиво, как в нашем ide, типа PHPStorm или любом другом. Чтобы так, один раз поставил и забыл.

Отлично, я свой выбор сделал и тебе советую: highlight.js

Зацени как клево смотрится официальный сайт

Итак краткая инструкция по установке:

Добавляем в это:

Тут мы добавили css, js скрипт и запустили обработку этого скрипта.

Подсветка синтаксиса кода работает. По умолчанию скрипт применяется к такой html конструкции:

Тебе надо подсветить код в WordPress и ты ищешь какой-то вордпрессовский плагин? Не советую мусорить в Вордпрессе дополнительными плагинами. Просто добавь highlight.js в head и не заморачивайся. А вот тебе сразу инструкция: Как правильно добавлять скрипты в WordPress.

Цукерберг рекомендует:  Обучение - BigWorld движок.

Более подробная документация по скрипту и дополнительные опции можно найти в официальной документации highlight.js. Там же можно найти много различных тем и стилей подсветки кода.

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

Подсветка синтаксиса кода на сайте google-code-prettify

Довольно часто необходимо вывести исходный код на страницу красиво, с подсветкой синтаксиса и форматированием. Для этого есть html тег который предназначен для вывода программного кода, но на счет красивой подсветки синтаксиса при использовании этого тега можно поспорить, а про нумерацию строку можно и не говорить (ее вообще нет). Однако есть готовые, бесплатные скрипты, для решения данной задачи. Одно из них — google-code-prettify.

И так перейдем к примеру подключения и настройки скрипта google-code-prettify для подсветки кода на сайте

Google-code-prettify — это подсветка синтаксиса множества языков программирования и разметки.

Рассмотрим примеры интеграции

Пример #1, автозагрузка


Вы можете загрузить JavaScript и CSS с помощью одной строки

Перед закрывающимся тегом

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

CGI параметры Значение по умолчанию Действие
autoload=(true | false) true авто запуск после загрузки страницы
lang=. none название языка для подсвекти. Если указан несколько раз, то загружаются все( ?lang=CSS&lang=html )
skin=. none Тема. Если указана несколько раз, то срабатывает первая успешно загруженная
callback=js_ident Вызов при верстке

Пример вызова с параметрами:

Пример #2, собственные JavaScript и CSS

Перед закрывающимся тегом :

, работает только подключив через 1 способ.

PHP скрипт подсветки HTML-кода

Для подсветки HTML-кода я использую PHP-скрипт, который написал сам. Цвета подсветки я взял с Adobe Dreamweaver.

Незнаю как многие, но я не люблю использовать готовые решения, всякие фреймворки и левые скрипты — это не для меня, исключение наверно составит форум, а так люблю все делать сам. И опыта в программировании набираешься, да и свое родное внедрить проще.

Ниже показан класс написанный на PHP, который подсвечивает HTML-синтаксис.

Пример подсветки HTML

Все достаточно просто, создаем объект класса HTMLHighlight и передаем исходный код HTML, в виде строки, в метод HTMLHighlight::html($html)


$HTMLHL = new HTMLHighlight ();

Кто такой Федоров Артем

Кто же такой Артем Федоров

Я — гражданин Российской Федерации.

В детсве немножко застал СССР, ходил две недели в детский сад, затем учился в школе,
потом в колледже, и наконец в институте.

Подсветка синтаксиса исходного кода на сайте

Как сделать подсветку кода на сайте? На самом деле тут нет нечего сложного достаточно просто выбрать каким плагином для этого воспользоваться.

Highlight.js – Популярный скрипт, поддерживает много языков программирования, может выполняться как на сервере так и у клиента.

SyntaxHighlighter — Тоже можно сказать популярный скрипт для подсветки кода, поддерживает много языков, выполняется у клиента и имеет несколько готовых тем оформления.

Google Code Prettify – плагин от корпорации добра Google как и многие знает много языков и выполняется на стороне клиента, но главная его достоинство это малый вес самого скрипта. Если на сайте используете Фреймворк Bootstrap то мне лучше и легче использовать Google Code Prettify.

Что бы подключить Google Code Prettify на сайт скачиваем необходимые файлы с сайта Google ( или prettify.zip )

Подключаем файл стилей:

В конце страницы, перед закрытием тега Body добавляем клиентские скрипты:

Что бы наши примеры кода теперь подсвечивались добавляем к тегу PRE класс prettyprint

Если необходимо нумеровать строки то необходимо добавить еще класс linenums

Малый вес скрипта влияет на скорость загрузки страницы и в отличии от Syntax Highlighter практически не отъедает ресурсов.

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих
Исходный код | HTML-исходного кода
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95