Подсветка html текста: Подсветка кода через Rainbow | htmlbook.ru — Независимое театральное объединение "Зрительские симпатии"

Содержание

Подсветка кода через Rainbow | htmlbook.ru

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

Сам сайт скрипта, откуда его можно скачать.

https://craig.is/making/rainbows

У Rainbow есть ряд преимуществ:

поддержка популярных языков — HTML, CSS, JavaScript, PHP, C, Python и др.;
компактный размер — скрипт занимает всего несколько килобайт;
в комплекте идёт около 20 стилевых тем, которые меняются лишь сменой имени файла.

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

Для начала скачиваем программу, выбрав нужные языки.

Желательно указать версию Development (рис. 1), в архиве тогда будет идти папка с темами и сжатая версия скрипта.

Рис. 1. Выбор языков

Подключение скрипта происходит двумя методами, в зависимости от выбранной версии — Production или Development. Для Production версии все скрипты упакованы в один файл, его и достаточно только подключить. Заодно включаем желаемый стиль оформления.

<script src="js/rainbow.min.js"></script>
<link href="css/obsidian.css" rel="stylesheet">

Для Development версии подключение основного скрипта и скриптов с языками происходит раздельно.


  
<script src="js/rainbow.min.js"></script>
<script src="js/language/generic.js"></script>
<script src="js/language/python.js"></script>

Какую версию выбрать зависит исключительно от предпочтений разработчика. В код для добавления подсветки нужно вставить data-language=»html», где вместо html пишем желаемый язык. Обычно применяется сочетание элементов <pre> и <code>.

<pre><code data-language="html">&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
 &lt;head&gt;
  &lt;meta charset=&quot;utf-8&quot;&gt;
  &lt;title&gt;HTML&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
  &lt;p&gt;Бифуркация русла&lt;/p&gt;
 &lt;/body&gt;
&lt;/html&gt;</code></pre>

Изменение цвета элементов происходит автоматически, путём выделения отдельных фрагментов кода через <span> с классом. Поэтому задать цвет или другие параметры самостоятельно довольно легко, за основу можно взять готовую стилевую тему и на её основе сделать свою.

Подсветка текста в html-документе с помощью Nokogiri / Хабр

Хочу поделиться небольшим расширением для Nokogiri — библиотекой Hairaito для подстветки текста в html-документе.

Тривиальный пример использования:

doc = Nokogiri::XML('<body>abc def ghi</body>')
doc.  highlight(['def'])
doc.to_html # => '<body>abc <span data-snippet-id="0">def</span> ghi</body>'

Под катом описание изначальной проблемы, поиск её решения и ссылки по теме.

На проекте возникла необходимость реализации поиска по тексту html-документа с настройками морфологии. Исторически сложилось, что для этих целей используется Sphinx. Для связки с ruby существует гем Thinking Sphinx. Он поддерживает функцию подстветки результатов поиска

BuildExcerpts

через объект

ThinkingSphinx::Excerpter

Судя по документации, для подстветки в режиме полного текста используется параметр html_strip_mode: :retain, он сохраняет исходную html структуру. При этом, как оказалось, теряется функционал поиска с параметром html_strip: true из преднастроенного индекса.

Поясню на примере. Есть фрагмент документа:

<div>
Мама <i>мыла</i> раму
</div>

Если мы хотим искать по фразе целиком «Мама мыла раму» и используем

html_strip_mode: :index

для подстветки в тексте, то Sphinx удаляет inline-тег

i

, оставляя толькое его содержимое (

документация

), и подсвечивает весь сниппет.

При этом теряется оригинальное выделение слова «мыла» курсивом.

Если же мы используем html_strip_mode: :retain, то Sphinx ведет себя иначе — не удаляет inline-теги при поиске. При этом он уже не находит фразу целиком. Т.е. имеет место ложно отрицательный результат поиска. Оба варианта посчитали неподходящими.

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

Далее возникла следующая идея. Можно использовать ThinkingSphinx::Excerpter с параметром html_strip_mode: :index для получения полного списка найденных сниппетов с учетом всех настроек морфологии в индексе. После этого нужно найти в оригинальном документе все вхождения каждого сниппета и выделить их, но уже не средствами Sphinx.

У этого подхода сразу есть очевидный минус — это медленнее нежели бы это сделал сам Sphinx (по наблюдениям, сравнительных тестов не проводил). Однако других рабочих вариантов за короткий срок я не увидел.

Оставалось решить как именно подсвечивать найденные сниппеты. Рассмотрел варианты сделать это на фронте — нагуглил библиотеки jquery-highlight и rangy. Первая не подошла по функционалу, т.к. не умеет подсветку слов «разделенных» inline-тегами. Вторая довольно успешно справилась непосредственно с «качеством» подсветки (метод

findText, см. документацию). Однако при росте количества сниппетов время выполнения сильно увеличивалось, браузер начинал подвисать, полностью отжирая одно ядро. Вынести в Web Workers не получилось, т.к. взаимодействие с DOM.

Итогом стало решение делать подсветку на бэке. Беглый поиск не дал результатов — готовых решений найдено не было. Поэтому я решил написать собственное расширение для Nokogiri. Гем назвал «Hairaito», что в переводе с японского на английский дает «highlight». На русский переводится как «основной момент». Искренне надеюсь, что знатоки японского не вспомнят какой-нибудь неблагозвучный вариант перевода этого слова.

Hairaito умеет подсвечивать текст в html/xml, есть возможность настройки тегов и css-классов для подстветки, нумерации результатов.

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

Буду рад услышать комментарии. Возможно, кто-нибудь знает более элегантное решение начальной проблемы.

Ссылки по теме:

Sphinx Search
Thinking Sphinx
Nokogiri
jquery-highlight
rangy

Задача «Подсветка синтаксиса C++ в HTML (Декоратор)»

Задание

Используя паттерн декоратор, реализовать набор классов, позволяющий разнообразным образом переводить C++ код в HTML страницы: с подсветкой ключевых слов или токенов, расстановкой номеров строк и пр.

Описание

Реализовать класс, который принимает ссылку на текст в конструкторе, и имеет функцию write(ostream & out), которая записывает этот текст в выходной поток.
Реализовать несколько классов-декораторов над вышеописанным классам

Пример:

<html>
<body>
<pre># include &lt;iostream&gt;
void main() {
   std::cout &lt;&lt; &quot;Hellow world!&quot;;
}
</pre>
</body>
</html>

LineDecorator – простое добавление номеров строк в код. При обработке текста необходимо учесть ситуации, когда строк в коде более 10, 100, 1000, и т. п.

Пример:

<html>
<body>
<pre> 1| # include &lt;iostream&gt;
 2| <font color=0000FF>void</font> main() {
 3|    std::cout &lt;&lt; &quot;Hellow world!&quot;;
 4| }
</pre>
</body>
</html>

СPPDecorator – примитивная подсветка ключевых слов C++. Чтобы задать цвет текста в html можно использовать тег font с атрибутом color <font color=(цвет в hex представлении)>.

Цвет описывается в RGB представлении – по байту на компонент. То есть 000000 – черный, FF0000 – красный, 00FF00 – зеленый, 0000FF – синий.

Пример:

<html>
<body>
<pre># include &lt;iostream&gt;
<font color=0000FF>void</font> main() {
   std::cout &lt;&lt; &quot;Hellow world!&quot;;
}
</pre>
</body>
</html>

CodeReviewDecorator – подсветка всех одинаковых лексем (всех одинаковых имен, не являющихся ключевыми словами C++) одинаковым цветом. Например, если в коде встречается переменная flag, то она везде будет подсвечена одинаковым цветом. Аналогично с именами функций. Цвет для лексемы выбирается случайно, с превалированием к тёмным оттенкам (предполагается белый фон).

Пример для подражания

Возможности редактора кода — Visual Studio (Windows)

Статья
08/25/2021
Чтение занимает 4 мин

Были ли сведения на этой странице полезными?

Оцените свои впечатления

Да Нет

Хотите оставить дополнительный отзыв?

Отзывы будут отправляться в корпорацию Майкрософт. Нажав кнопку «Отправить», вы разрешаете использовать свой отзыв для улучшения продуктов и служб Майкрософт. Политика конфиденциальности.

Отправить

В этой статье

Редактор Visual Studio предоставляет множество возможностей, облегчающих написание кода и текста, а также управление им. Используя структуру, вы можете разворачивать и сворачивать различные блоки кода. Получить дополнительные сведения о коде можно с помощью технологии IntelliSense, окна Обозреватель объектов и иерархии вызовов. Для поиска в коде можно использовать такие функции, как Перейти, Перейти к определению и Найти все ссылки. Вставлять блоки кода можно с помощью фрагментов кода. Код также можно создавать с помощью функций, таких как Создание в результате использования. Если вы ранее не работали в редакторе Visual Studio, см. статью со сведениями об использовании редактора кода.

Код можно просматривать различными способами. По умолчанию в обозревателе решений код упорядочен по файлам. Чтобы просмотреть код, упорядоченный по классам, можно выбрать вкладку Представление классов в нижней части окна.

Можно выполнять поиск и замену текста в одном или нескольких файлах. Дополнительные сведения см. в статье Поиск и замена текста. Регулярные выражения платформы используются для поиска и замены текста. Дополнительные сведения см. в статье Использование регулярных выражений в Visual Studio.

Разные языки Visual Studio предоставляют разные наборы функций, а в некоторых случаях одни и те же функции ведут себя по-разному в разных языках. Многие из этих отличий указаны в описаниях функций. Дополнительные сведения можно найти в разделах, посвященных конкретным языкам Visual Studio.

Возможности редактора

Функция	Описание
Цветовая раскраска синтаксических конструкций	Некоторые элементы синтаксиса кода и файлов разметки для наглядности выделяются разными цветами. Например, ключевые слова (такие как `using` в C# и `Imports` в Visual Basic) выделены одним цветом, а типы (такие как `Console` и `Uri`) — другим. Другие элементы синтаксиса (например, строковые литералы и комментарии) также выделены цветом. Язык C++ использует цвета для различения типов, перечислений и макросов среди других токенов. Вы можете узнать, какой цвет задан по умолчанию для каждого типа, и изменить цвет для любого элемента синтаксиса в диалоговом окне Fonts and Colors, Environment, Options Dialog Box, которое можно открыть с помощью меню Сервис.
Маркеры ошибок и предупреждений	В процессе добавления кода и сборки решения вы можете увидеть в коде (а) волнистые линии различного цвета (знак «тильда») или (б) лампочки. Красные волнистые линии обозначают ошибки синтаксиса, синие обозначают ошибку компилятора, зеленые — предупреждения, а фиолетовые — другие типы ошибок. Быстрые действия предлагают способы решения проблем и помогают легко применить их. Вы можете узнать, какой цвет задан по умолчанию для каждой пометки ошибки и предупреждения, в диалоговом окне Сервис > Параметры > Среда > Шрифты и цвета. Посмотрите пункты: Синтаксическая ошибка, Ошибка компилятора, Предупреждение и Другие ошибки.
Согласование скобок	Если курсор мыши поместить на открывающую фигурную скобку в файле кода, выделяются обе скобки — открывающая и закрывающая. Эта функция позволяет оперативно реагировать на неправильно поставленную или отсутствующую фигурную скобку. Парные фигурные скобки можно включить или отключить с помощью параметра Автоматически выделять разделители (Сервис > Параметры > Текстовый редактор). Цвет выделения можно изменить в разделе Шрифты и цвета (Сервис > Параметры > Среда). Используйте параметр Парные фигурные скобки (выделение) или Парные фигурные скобки (прямоугольник) .
Визуализатор структуры	Парные фигурные скобки в файлах кода соединяются пунктирными линиями, что делает работу с кодом более наглядной. Это поможет вам быстрее находить код в базе. Чтобы включить или отключить эти линии, используйте параметр Показать направляющие структуры в разделе Отображение на странице Сервис > Параметры > Текстовый редактор > Общие.
Номера строк	Номера строк могут отображаться в левом поле окна кода. По умолчанию они не отображаются. Этот режим можно включить в разделе Текстовый редактор > Все языки (Сервис > Параметры > Текстовый редактор > Все языки). Отображение номеров строк можно включить для определенных языков программирования, изменив параметры именно для этих языков (Сервис > Параметры > Текстовый редактор > <language> ). Чтобы номера строк выводились на печать, нужно установить флажок Включить номера строк в диалоговом окне Печать.
Отслеживание изменений	С помощью цвета левого поля окна можно отслеживать изменения, внесенные в файл. Если с момента открытия файла были внесены изменения и они не были сохранены, в левом поле окна (поле выделения) появляется желтая полоска. Если изменения сохранить, но оставить файл открытым, полоска станет зеленой. Если отменить изменения после сохранения файла, полоска станет оранжевой. Включить или отключить эту функцию можно с помощью параметра Отслеживать изменения в настройках текстового редактора (Сервис > Параметры > Текстовый редактор).
Выбор кода и текста	Текст можно выбрать в стандартном режиме в виде непрерывного потока или в режиме блока, когда выбирается прямоугольный фрагмент текста, а не набор строк. Чтобы сделать выбор в режиме блока, нажмите клавишу ALT при перемещении указателя мыши над фрагментом текста (или нажмите клавиши ALT+SHIFT+ <arrow key> ). В выделение попадают все символы внутри прямоугольника, определяемого первым и последним символами выделенной области. Текст, введенный или вставленный в выделенной области, помещается в одну и ту же точку в каждой строке.
Масштаб	Масштаб в любом окне кода можно увеличить или уменьшить. Для этого нужно, удерживая нажатой клавишу CTRL, вращать колесо прокрутки мыши (или использовать сочетание клавиш CTRL+SHIFT+ . для увеличения и CTRL+SHIFT+ , для уменьшения масштаба). Кроме того, можно указать конкретное значение масштаба в процентах в поле Масштаб, расположенном в левом нижнем углу окна кода. Функция масштабирования не работает в окнах инструментов.
Виртуальное пространство	По умолчанию строки в редакторах Visual Studio заканчиваются после последнего символа. Это означает, что при нажатии клавиши СТРЕЛКА ВПРАВО в конце строки происходит перемещение курсора в начало следующей строки. В некоторых других редакторах строка не заканчивается после последнего символа и вы можете поместить курсор в любое место в строке. Разрешить виртуальное пространство в редакторе можно, выбрав Сервис > Параметры > Текстовый редактор > Все языки. Обратите внимание, что вы можете включить только какой-либо один из режимов: Виртуальное пространство или Перенос по словам.
Печать	Используя параметры в диалоговом окне Печать , можно включить номера строк или скрыть свернутые области кода при печати файла. В диалоговом окне Параметры страницы вы можете также задать печать полного пути и имени файла, выбрав вариант Верхний колонтитул страницы. Параметры цветной печати можно задать в диалоговом окне Сервис > Параметры > Среда > Шрифты и цвета. Выберите пункт Принтер в списке Показать параметры для , чтобы настроить цветную печать. Для печати файла можно указать не такие цвета, как для редактирования файла.
Глобальные действия отмены и повтора	Команды Отменить последнее глобальное действие и Повторить последнее глобальное действие в меню Правка позволяют отменить или повторить глобальные действия, выполняемые над множеством файлов. К глобальным действиям относятся: переименование класса или пространства имен, выполнение операции поиска и замены по всему решению, рефакторинг базы данных или любое другое действие, приводящее к изменению множества файлов. Вы можете применить глобальные команды отмены и повтора для действий в текущем сеансе Visual Studio даже после закрытия решения, в котором применялись эти действия.

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

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

Функция	Описание
Форматировать документ	Установка правильного отступа строк кода и перемещение фигурных скобок для разделения строк в документе.
Форматировать выделенный фрагмент	Установка правильного отступа строк кода и перемещение фигурных скобок для разделения строк в выделенном фрагменте.
Преобразовать пробелы в знаки табуляции в выделенных строках	Замена начальных пробелов на знаки табуляции там, где это уместно.
Преобразовать знаки табуляции в пробелы в выделенных строках	Замена начальных знаков табуляции на пробелы. Если требуется преобразовать все пробелы в знаки табуляции в файле (или все знаки табуляции в пробелы), можно использовать команды `Edit. ConvertSpacesToTabs` и `Edit.ConvertTabsToSpaces` . Эти команды не включены в меню Visual Studio, но их можно вызывать из окна быстрого доступа или окна командной строки.
Все прописные	Перевод всех символов в выделенном фрагменте в верхний регистр или, если ничего не выбрано, перевод символа в позиции курсора в верхний регистр. Ярлык. CTRL+SHIFT+U.
Все строчные	Перевод всех символов в выделенном фрагменте в нижний регистр или, если ничего не выбрано, перевод символа в позиции курсора в нижний регистр. Ярлык. CTRL+U.
Переместить выбранные строки вверх	Перемещение выбранной строки вверх на одну строку. Ярлык. ALT+СТРЕЛКА ВВЕРХ.
Переместить выбранные строки вниз	Перемещение выбранной строки вниз на одну строку. Ярлык. ALT+ВНИЗ.
Удалить пустое пространство по горизонтали	Удаление символов табуляции и пробелов в конце текущей строки. Ярлык. CTRL+K, CTRL+ \
Показать пустое пространство	Отображение пробелов в виде приподнятых точек, а символов табуляции — в виде стрелок. Конец файла отображается как прямоугольный глиф. Если с помощью меню выбран вариант Сервис > Параметры > Текстовый редактор > Все языки > Перенос по словам > Показывать графические метки в местах переноса слов, этот глиф также будет отображаться.
Перенос по словам	В этом режиме все строки документа отображаются полностью в окне кода. Перенос по словам можно включить или отключить в разделе Все языки для текстового редактора (Сервис > Параметры > Текстовый редактор > Все языки).
Закомментировать выделенный фрагмент	Добавление символов комментария к выбранному фрагменту или текущей строке. Ярлык. CTRL+K, CTRL+C
Раскомментировать выделенный фрагмент	Удаление символов комментария из выбранного фрагмента или текущей строки. Ярлык. CTRL+K, CTRL+U
Увеличить отступ строки	Добавление символа табуляции (или эквивалентных пробелов) к выбранным строкам или текущей строке.
Уменьшить отступ строки	Удаление символа табуляции (или эквивалентных пробелов) из выбранных строк или текущей строки.
Выбрать тег	Выбор тега в документе, содержащем теги (например, XML или HTML).
Выделить содержимое тега	Выбор содержимого в документе, содержащем теги (например, XML или HTML).

Перемещение по коду и поиск

Перемещаться по редактору кода можно несколькими способами, включая переход назад и вперед к точкам вставки, просмотр определения типа или члена и переход к определенному методу с помощью панели навигации. Дополнительные сведения см. в статье Навигация по коду.

Поиск ссылок в базе коде

Чтобы найти, где именно в базе кода используются ссылки на элементы кода, можно использовать команду Найти все ссылки или нажать SHIFT+F12. Кроме того, когда вы щелкаете тип или член, функция выделения ссылок автоматически выделяет все ссылки на него. Дополнительные сведения см. в разделе Поиск ссылок в коде.

Настройка редактора

Вы можете использовать свои параметры Visual Studio совместно с другим разработчиком, привести параметры в соответствие со стандартом или вернуться к настройкам, заданным по умолчанию в Visual Studio, с помощью команды Мастер импорта и экспорта параметров в меню Сервис. В мастере импорта и экспорта параметров можно изменить выбранные общие параметры, а также зависящие от языка и проекта параметры.

Чтобы определить новые или переопределить существующие сочетания клавиш, выберите Сервис > Параметры > Среда > Клавиатура. Дополнительные сведения о сочетаниях клавиш см. в статье Сочетания клавиш по умолчанию в Visual Studio.

Параметры редактора для JavaScript см. в статье о параметрах редактора JavaScript.

См. также

Подсветка кода в статьях — как реализовать на CMS WordPress

Красивое выделение и подсветка кода в статьях блога на WordPress зачастую реализовывается при помощи установки дополнительных плагинов.

И чтобы разместить кусочек программного кода в своей статье я начал искать удобный и функциональный плагин. Перепробовал их наверное штук 5, но ничего из этого не вышло, так как рекомендуемые в интернете блогерами наиболее популярные плагины отказывались работать с версией WordPress 3.5.1, даже самый простой и нетребовательный WP-Syntax.

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

Пример использования плагина смотрите в этой статье. Этот плагин называется «Crayon Syntax Highlighter», установкой и тестированием которого мы и займёмся дальше.

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

Для установки плагина переходим в админпанель своего блога на вкладку «Плагины» и кликаем на кнопку «Добавить новый».

Вкладка «Плагины»

В поле поиска вводим слово «syntax» и нажимаем «Найти плагины».

Поиск плагина

В найденных плагинах ищем плагин под названием «Crayon Syntax Highlighter» и нажимаем ссылку «Установить сейчас».

Установка

Во всплывающем окне жмём на кнопку «ОК».

Окно с кнопкой «ОК»

После загрузки и распаковки плагина, кликаем на ссылку «Активировать плагин».

Ссылка для активации

В установленных плагинах видим нужный нам активированный плагин.

Все готово

Расширенные настройки плагина можно найти в меню «Настройки» админпанели блога в подменю «Crayon».

Пункт меню «Crayon»

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

Настройки плагина

Для того, чтобы воспользоваться плагином, нужно в статье отобразить её HTML-код нажатием на вкладку «Текст», где в нужном месте статьи поставить курсор и нажать кнопку «crayon».

Кнопка на панели

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

Выбор параметров отображения кода

Добавленный код вставится в статью, обрамлённый тэгами.

Теги

Сохранив свою статью мы увидим вот такое прекрасное оформление кода.

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

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

Расширенное управление блоком

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

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

Согласитесь, куда приятнее смотреть на отформатированный код с подсветкой синтаксиса как в какой ни будь среде разработки? Раньше в своем блоге я использовал сгенерированный HTML с кучей тегов и стилей для куска кода. Я получал желаемый эффект, но разметка HTML была уже не читабельна и любая корректировка кода вела к тому, что приходилось заново перегенерировать всю разметку. Делал я это при помощи сервиса Highlight your source code. И все было хорошо до того момента, как я начал писать очередную статью про ABAP. Дойдя до момента, когда нужно раскрасить код, пришло осознание, что сервис уже обновился и новая его редакция не работает с синтаксисом ABAP. Этот факт меня расстроил, но заставил задуматься об упрощении процесса вставки кусков кода в блог.
Первая мысль была как всегда глупая: «надо написать свою библиотеку». Подумав пару минут и осознав, что мысль и правда плохая, решил покопаться в Интернете на эту тему. Первое толковое, что попалось — это работа Alex Gorbatchev, но как-то не подружился я с ней, да и подсветки ABAP в ней нет.

Второе, на что наткнулся — это PRISM. Понравилась тем, что на странице скачивания есть конфигуратор, который собирает файл JavaScript и файл CSS для подсветки синтаксиса. Таким образом можно не перегружать скрипт ненужными словарями и надстройками, сэкономить на размере файла и не потерять в скорости загрузки страницы.

Встраивание в BLOGSPOT

Метод «в лоб»: идем Тема -> Изменить HTML. Ищем закрывающий </head>. Сразу над ним вставляем два блока:

В общем-то все. Этого достаточно, что бы в блоге можно было пользоваться функционалом библиотеки PRISM.

Конечно же есть подводный камень. Ссылки на эти файлы реализованы через протокол HTTP, а сам блог работает через протокол HTTPS. В результате в браузере появится значек о том, что сайт не является безопасным.

Как исправить?

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

Решением стало размещение этих файлов в каком-либо облаке, например DropBox или Google диск.

В результате меняем ссылки, которые были вставлены ранее на

Это мой пример с моими файлами на Google диске. Что бы был доступ к ним, нужно разрешить общий доступ к файлам. Ну, а как получить «правильные» ссылки, я расcкажу в следующей статье.

подсветка кода, подсветка синтаксиса, syntaxhighlighter

grigoriev

4813

Подсветка синтаксиса кода востребовано на многих сайтах. Много вебмастеров выкладывает на своих блогах листинги скриптов на разных языках программирования. Для более удобного восприятия и понимания листинга на сайте должна быть организованна подсветка синтаксиса. Для подсветки синтаксиса я использую js библиотеку SyntaxHighlighter. Разработал её Alex Gorbatchev и скачать можно здесь

Настройка syntaxhighlighter

После скачивания мы получаем архив syntaxhighlighter_3. 0.83-1.zip. В самом архиве нас интересуют папки scripts, src и style. В папке scripts находятся файлы, которые отвечают за подсветку кода определённого языка программирования. Syntax highlighter поддерживает следующие языки:

В src находятся файлы ядра. В папке styles находится главный фал css стилей и файлы стилей возможных шаблонов. И так мы разобрали структуру файлов библиотеки. Давайте теперь разберёмся как подключить syntaxhighlighter к простой html страничке. Для начала подключим скрипт shCore.js. Это ядро всей библиотеки. После этого подключаем скрипты нужных нам языков. Я обычно выбираю shBrushCss.js, shBrushXml.js и shBrushJScript.js shBrushPhp.js для HMTL CSS JavaScript и PHP.

                    
    <script type="text/javascript" src="/js/shCore.js"></script>
    <script type="text/javascript" src="/js/shBrushCss.js"></script>
    <script type="text/javascript" src="/js/shBrushXml. js"></script>
    <script type="text/javascript" src="/js/shBrushJScript.js"></script>

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

                    
 <script type="text/javascript">
        SyntaxHighlighter.all()
 </script>

Так же подключаем css стили. shCore.css шаблон ядра и дефолтный шаблон shThemeDefault.css. Можно потестить и другие шаблоны.

 
    <link rel="stylesheet" href="/css/shCore.css" type="text/css">
    <link rel="stylesheet" href="/css/shThemeDefault.css" type="text/css">

Теперь у нас всё готово для работы. Листинг, что нам нужно подсветить помещаем в тег pre и назначаем ему класс brush и алиас языка, какой мы подсвечиваем. Html код должен выглядеть так:

                                     
  <pre>                                     
    <div>
        <div>Hello world </div>
        <div> </div>
    </div>
  </pre>

Соответственно такой html код должен вывести пример, указанный ниже.

                                     
    <div>
        <div>Hello world </div>
        <div> </div>
    </div>

Примечание: После установки syntaxhighlighter мне не понравилось наличие в листинге вертикальной и горизонтальной полос прокрутки. Поковыряв css проблему победил, но появились трудности с правильным переносом и нумерацией строк. Короче не стал изобретать велосипед и взял shCore.js, shCore.css, shThemeDefault.css из wordpress плагина SyntaxHighlighter Evolved. Качаем его отсюда. Выше перечисленные файлы брал из syntaxhighlighter2, из папки style взял картинки printer.png, page_white_copy.png, page_white_code.png, magnifier.png, help.png и скопировал в ту же папку что и shCore.css

Подключение syntaxhighlighter к joomla

В отличии от подключения syntaxhighlighter к обычной html страничке, в joomla его надо подключать к шаблону сайта, который мы сейчас используем. Для этого идём в корень нашего сайта в папку template и выбираем шаблон, который выбран по умолчанию, пусть это будет beez_20. В папке beez_20 выбираем папку css и копируем туда shCore.css, shThemeDefault.css и картинки printer.png, page_white_copy.png, page_white_code.png, magnifier.png, help.png, затем выбираем папку javascript и копируем туда shCore.js, shBrushCss.js, shBrushXml.js и shBrushJScript.js shBrushPhp.js. Открываем в любом текстовом редакторе файл index.php (это и есть файл шаблона ) из папки beez_20. Перед закрывающим тегом </head> следующий код:

                                     
  <?php
//условие для подключения syntaxhighlighter только в определённых категориях
 if((JRequest::getVar('catid')==10)||(JRequest::getVar('catid')==11)||(JRequest::getVar('catid')==12)||(JRequest::getVar('catid')==13)||(JRequest::getVar('catid')==15)){
 ?>
//подключение нужных стилей и js файлов
<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/shCore. css" type="text/css" />
<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/shThemeDefault.css" type="text/css" />
<script type="text/javascript" src="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/javascript/shCore.js"></script>
<script type="text/javascript" src="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/javascript/shBrushCss.js"></script>
<script type="text/javascript" src="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/javascript/shBrushXml.js"></script>
<script type="text/javascript" src="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/javascript/shBrushJScript.js"></script>
<script type="text/javascript" src="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/javascript/shBrushPhp. js"></script>
//активация syntaxhighlighter   
    <script type="text/javascript">
             SyntaxHighlighter.all()
    </script>
<?php
    };
?>

Как выделить текст в HTML

Выделение текста с помощью тега Html5

Если мы хотим выделить текст в Html-документе с помощью тега , мы должны выполнить шаги, указанные ниже. Используя эти шаги, мы можем легко выделить текст.

Шаг 1: Во-первых, мы должны ввести HTML-код в любом текстовом редакторе или открыть существующий HTML-файл в текстовом редакторе, в котором мы хотим выделить текст.

<Голова> <Название> Выделите текст в Html <Тело> Текст, который мы хотим выделить.

Шаг 2: Теперь нам нужно поместить курсор в начало того текста, который мы хотим выделить. И затем мы должны ввести открывающий тег . Тег является парным тегом, поэтому мы должны закрыть этот тег сразу после того текста, который мы хотим выделить.

Я люблю свою Индию.

Шаг 3: И, наконец, мы должны сохранить HTML-файл, а затем запустить его в браузере.

<Голова> <Название> Выделите текст в Html <Тело> Я люблю свою Индию.

Протестируйте сейчас

Вывод приведенного выше HTML-кода показан на следующем снимке экрана:

Выделение текста с помощью внутреннего CSS

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

<Голова> <Название> Выделите текст с помощью CSS <Тело> Текст, который мы хотим выделить.

Шаг 2: Теперь мы должны поместить курсор в тег заголовка сразу после тега заголовка HTML-документа, а затем определить стили внутри тега