Плагин для подсветки кода на любом сайте

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

Сразу после этого решил переделать подсветку кода в более приличный вид.

Лучшее что я встретил - это плагин (или скрипт, называйте как хотите) SyntaxHighlighter.

Скачать архив вы можете тут.

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

Теперь нам нужно подключить ко всем страницам (где планируется подсветка кода) данные javascript модули.

<script type="text/javascript" src="sh/scripts/shcore.js"></script>
<script type="text/javascript" src="sh/scripts/shbrushcss.js"></script>
<script type="text/javascript" src="sh/scripts/shbrushjscript.js"></script>
<script type="text/javascript" src="sh/scripts/shbrushphp.js"></script>
<script type="text/javascript" src="sh/scripts/shbrushsql.js"></script>

<link type="text/css" rel="stylesheet" href="sh/styles/shcore.css"/>
<link type="text/css" rel="stylesheet" href="sh/styles/shthemedefault.css"/>

<script type="text/javascript">
	SyntaxHighlighter.config.clipboardSwf = 'sh/scripts/clipboard.swf';
	SyntaxHighlighter.all();
</script>

В данном примере я подключил подсветку кода только следующих языков: php, javascript, sql, css.

Все остальные вы можете посмотреть в папке sh/scripts/

Если вы открывали тестовый файл, вы могли заметить что шрифт кода очень большой. Чтобы это исправить, нужно создать дополнительный стиль.

А пока посмотрим пример того что у нас должно получится.

<?php

$a = 'Привет Мир!';

echo $a;

?>

Код который вы хотите оформить, будет помещаться между тегами:

<div class="code_sample"><pre class="brush: php;">
Тут код
</pre></div>

Создадим стиль для нашего блока с классом code_sample, у меня получилось вот так:

.code_sample {
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

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

Поделитесь ссылкой если мы вам помогли!

Читайте также:

Как сменить раскладку клавиатуры?

Введение в HTML5 визуальное программирование Canvas

HTML5 Теги - Плеер, полоса загрузки, Doctype и прочие!

Рисуем линии, квадрат и круг с помощью Canvas

Работа с изображением в html5 canvas

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

Минимум 100 символов.
Модераторы detected!

Вы ввели сообщение длиной символов

Три + Пять ? =