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

О Lighter.js написано достаточно, уже выпущена версия 2.0. Но одной черты все таки в нем не хватает - возможности скопировать в буфер обмена и выделить сырой исходник с правильными отступами. Задача не сложная, тем более, что ZeroClipboard уже есть с версии 1.5, но примеров использования на сайте нет.

Краткий обзор

Помимо библиотеки MooTools, необходимо скачать следующие файлы:

• Lighter.js - класс подсветки
• Fuel.js - ядро парсера
• Fuel.js.js, Fuel.css.js и др. - используемые языки разметки
• Flame.standard.css, Flame.panic.css - стили соответсвующих тем
• ZeroClipboard.js, ZeroClipboard.swf - JavaScript интерфейс и Flash объект для работы с буфером обмена

Требуемые JavaScript файлы советую собирать вручную, пропустив через YUI компрессор.

Затем подключаем нашу сборку.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js"></script>
<script type="text/javascript" src="js/lighter-yui-compressed.js"></script>

Файлы CSS достаточно разместить в папке со скриптами, иначе укажите их расположение в опции path. ZeroClipboard.swf по умолчанию должен находится в корне сайта, путь к нему настраивается в опциях ZeroClipboard.js.

Блоки с исходным кодом могут содержать атрибут class с типом разметки. При необходимости также можно указать тему.

<pre class="js">var el = $('myElement');</pre>
<pre class="php:panic"><?php php_info() ?></pre>

Подключаем подсветку следующим образом.

$$('pre').light({
	mode: 'ol',
	indent: 4,
	flame: 'panic'
	path: '/css/'
});

Из опций хочу отметить:

• flame – тема
• fuel – язык разметки
• indent – количество пробелов вместо tab'ов
• mode – стиль оформления (возможны варианты pre, ol, div, table)
• path – путь к папке с загружаемыми файлами

Более подробно на официальном сайте Lighter.js.

Добавляем новые возможности

Выделив некоторое время парсеру, с задержкой добавляем каждому блоку кнопки "выделить исходник" и "скопировать в буфер обмена". В обработчик onclick первой кнопки запишем функцию, которая создает текстовое поле с исходным кодом. Ко второй - привязываем ZeroClipboard:

var clip = new ZeroClipboard.Client();
clip.setHandCursor(true);
clip.addEventListener('onMouseDown', function() {
	clip.setText(pres[j].get('html').sourcify());
});
clip.addEventListener('onComplete', function() {
	alert('Исходный код скопирован в буфер обмена');
});
clip.glue(a_copy_id);

Исходный код целиком:

String.implement({
    sourcify: function() {
        return this.trim().replace(/&lt;/g,'<').replace(/&gt;/g,'>').replace(/&amp;/g,'&');
    }
});

window.addEvent('domready',function(){
    var pres = $$('pre');
    pres.light({
        mode: 'ol',
        indent: 4,
        flame: 'panic'
    });

    (function() {

        $$('ol.panicLighter').each(function(pre, j) {
            new Element('a',{
                href: '#',
                title:  'Источник',
                'class': 'a_raw',
                opacity: 0,
                events: {
                    click: function(e) {
                        e && e.stop();
                        new Element('textarea',{
                            value: pres[j].get('html').sourcify(),
                            'class': 'textarea_raw'
                        }).inject(pre, 'after').select();
                        this.fade('out');
                    }
                }
            }).inject(pre, 'top').fade('in');
            var a_copy_id = 'copy' + j;
            new Element('a',{
                href: '#',
                title: 'Копировать',
                'class': 'a_copy',
                opacity: 0,
                events: {
                    click: function(e) {
                        e && e.stop();
                    }
                },
                id: a_copy_id
            }).inject(pre,'top').fade('in');

            var clip = new ZeroClipboard.Client();
            clip.setHandCursor(true);
            clip.addEventListener('onMouseDown', function() {
                clip.setText(pres[j].get('html').sourcify());
            });
            clip.addEventListener('onComplete', function() {
                alert('Исходный код скопирован в буфер обмена');
            });
            clip.glue(a_copy_id);

        });
    }).delay(1000);

});

Отмечу, что скрипт подсветки создает элементы на основе исходных блоков pre. Они отличаются в зависимости от типа (pre, ol, div, table) и темы. Поэтому я делал выборку:

$$('ol.panicLighter')

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

Как вариант, вместо alert() можно выдавать сообщение с помощью Notimoo.

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

Как обычно, в конце ссылки для просмотра и скачивания.