Подсветка синтаксиса кода — 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

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

SyntaxHighlighter
Syntax Highlighter от Alex Gorbatchev

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

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

Для кода HTML:

<pre class="brush:html">
Здесь будет ваш код HTML
</pre>

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

<pre class="brush:JavaScript">
Здесь ваш код JavaScript
</pre>

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

<pre class="brush:css">
Здесь ваш код css
</pre>

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

<pre class="brush: js">
Ваш скрипт здесь
</pre>

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

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

css
Подсветка CSS

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

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

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

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

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

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

Подсветка CSS:

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

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

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

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

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

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

С уважением, Сергей

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

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

Решите задачку: *