Загрузка. Пожалуйста, подождите...

ZverMaster
Программирование, разработка, SEO, продвижение сайтов...
Синий Зелёный
  • Главная
  • Карта сайта
  • Контакты

Подсветка кода в HTML, а также в WordPress, и в DLE

20 сентября 2010 Автор: Zver Прокомментировать


Сегодня я хочу рассказать о том, как подсветить код, тем самым сделать его более читаемым. С 1-го сентября, в университете, мне начали давать различные задания по программированию на C++, для сдачи которых необходимо было писать отчёт в формате HTML, в котором был пункт "Исходный код программы". Исходный код программы можно было просто копировать, но тогда он терял свою читабельность, так как не были соблюдены все отступы и код не был подсвечен. Некоторым конечно же наплевать на весь этот порядок, а некоторые, используя визуальные HTML редакторы вручную выставляли отступы и цвет для различных участков кода. Я люблю порядок, поэтому и сам пару раз всё делал вручную. Когда исходный код программы читабелен, то чтобы разобраться в нём, уходит значительно меньше времени и сил.
Каждый раз всё делать вручную конечно же не вариант. Я начал искать различные способы автоматизации этого процесса. Остановился на JаvaScript библиотеке под названием SyntaxHighlighter.
Для того чтобы прикрутить скрипт к нужной нам HTML странице, необходимо между тегами <head></head>, либо перед <body> вставить:

<link href='css/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/> 
<script type="text/javascript" src="js/shCore.js"></script> 
<script type="text/javascript" src="js/shBrushPhp.js"></script> 
<script type="text/javascript" src="js/shBrushJScript.js"></script> 
<script type="text/javascript" src="js/shBrushCss.js"></script> 
<script type="text/javascript" src="js/shBrushXml.js"></script>
<script>
dp.SyntaxHighlighter.ClipboardSwf = 'js/clipboard.swf';
dp.SyntaxHighlighter.BloggerMode(); 
dp.SyntaxHighlighter.HighlightAll('code');
</script>

Или:

<link href='http://syntaxhighlighter.googlecode.com/svn/trunk/Styles/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/> 
<script type="text/javascript" src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js"></script> 
<script type="text/javascript" src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js"></script> 
<script type="text/javascript" src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js"></script> 
<script type="text/javascript" src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js"></script> 
<script type="text/javascript" src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js"></script>
<script>
dp.SyntaxHighlighter.ClipboardSwf = 'http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/clipboard.swf';
dp.SyntaxHighlighter.BloggerMode(); 
dp.SyntaxHighlighter.HighlightAll('code');
</script>

Во втором случае все необходимые файлы грузятся с серверов Google, а в первом из папок js и css, находящихся на Вашем сервере. Лично я всё подгружаю с серверов Google, кроме файла стилей и ядра скрипта - эти файлы у меня немного изменены. Как видно из подключаемых файлов, для подсветки исходного кода определённого языка програмирования(или разметки) используется отдельный файл. Давайте разберёмся что мы вообще подключили. В первой строке подключается таблица стилей, за ней следует ядро скрипта, после чего подключаются файлы, необходимые для подсветки PHP, JаvaScript, CSS и HTML кода. Если Вы не собираетесь размешать на своем сайте какой-то из этих типов кода, сотрите строчку, в которой подключается файл. Скрипт так же может подсвечивать C++, C#, CSS, Java и MySQL код.

Самое основное сделали - подключили все необходимые файлы. Теперь, весь код, расположенный на Вашей HTML странице, необходимо обрамить в:

<pre name="code" class="css"></pre>

Чтобы получилось:

<pre name="code" class="css">Исходный код</pre>

Где в имени класса указан тип исходного кода. В данном случае, для примера, css. Если стереть name="code" - скрипт работать не будет, так как после подключения всех необходимых файлов, в параметрах скрипта, мы указали dp.SyntaxHighlighter.HighlightAll('code'), это означает, что скрипт будет выполнятся для всех блоков с name="code".

Для подсветки кода в WordPress есть уже готовое решение - плагин SyntaxHighlighter Plus. Установить его на свой WordPress блог(сайт) ещё более проще чем в простую HTML страницу. Как при установке большинства WordPress плагинов, достаточно загрузить его в папку wp-content/plugins/, активировать в админке, после чего при вставке исходного кода в пост, необходимо использовать конструкцию [sourcecode language='Тип кода']Исходный код[/sourcecode].

Ну, собственно, с подсветкой кода в обычной HTML странице и в WordPress я рассказал. Но, теперь я бы хотел рассказать как внедрить библиотеку SyntaxHighlighter в DLE CMS. В постах этого блога очень часто можно встретить исхоный код различного типа. Как известно, при вставке исходного кода в новость, в DLE, он выводится в обычном <div></div> блоке, слава богу хоть отступы сохраняются. Поэтому, для создания удобств для своих читателей, я решил привязать SyntaxHighlighter библиотеку к DataLife Engine CMS.

Для внедрения SyntaxHighlighter библиотеки к себе на DLE блог(сайт), Вам необходимо будет изменить всего лишь 3 файла, однако перед этим рекомендую сделать их резервную копию, а также копию Вашей базы данных. На всякий случай, мало ли. ad

Итак, поехали устанавливать SyntaxHighlighter библиотеку для подсветки кода в DLE:

1. В файле engine/inc/include/inserttag.php после:

function pagelink()
{
    var FoundErrors = '';
    var thesel ='';
    if ( (ua_vers >= 4) && is_ie && is_win)
    {
    thesel = document.selection.createRange().text;
    } else thesel ='$lang[bb_bb_page]';

    if (!thesel) {
        thesel ='$lang[bb_bb_page]';
    }

    var enterURL   = prompt(text_enter_page, "1");
    var enterTITLE = prompt(text_enter_page_name, thesel);

    if (!enterURL) {
        FoundErrors += " " + error_no_url;
    }
    if (!enterTITLE) {
        FoundErrors += " " + error_no_title;
    }

    if (FoundErrors) {
        alert("Error!"+FoundErrors);
        return;
    }

    doInsert("[page="+enterURL+"]"+enterTITLE+"[/page]", "", false);
}

Вставить:

function code()
{
    var FoundErrors = '';

    var enterTYPE   = prompt("Введите тип добавляемого кода:", "js");
    if (!enterTYPE) {
        FoundErrors += " Вы не ввели, либо неверно ввели имя типа!";
    }

    if (FoundErrors) {
        alert("Error!"+FoundErrors);
        return;
    }

    doInsert("[code="+enterTYPE+"]", "[/соde]", true);
}

В этом же файле:

<div id="b_code" class="editor_button" onclick="simpletag('code')"><img title="$lang[bb_t_code]" src="engine/skins/bbcodes/images/code.gif" width="23" height="25" border="0"></div>

Заменить на:

<div id="b_code" class="editor_button" onclick="code()"><img title="$lang[bb_t_code]" src="engine/skins/bbcodes/images/code.gif" width="23" height="25" border="0"></div>

2. В файле engine/classes/parse.class.php:

$source = preg_replace( "#\[code\](.+?)\[/code\]#is", "<!--code1--><div class=\"scriptcode\"><!--ecode1-->\\1<!--code2--></div><!--ecode2-->", $source );

Заменить на:

$source = preg_replace( "#\[code=(.+?)\](.+?)\[/code\]#is", "<pre name=\"code\" class=\"\\1\">\\2</pre>", $source );

Далее, в этом же файле:

$txt = preg_replace( "#<!--code1-->(.+?)<!--ecode1-->#", '[code]', $txt );
$txt = preg_replace( "#<!--code2-->(.+?)<!--ecode2-->#", '[/соde]', $txt );

Заменить на:

$txt = preg_replace( "#<pre name=\"code\" class=\"(.+?)\"#", '[code=\\1]', $txt );
$txt = str_replace( "</pre>", '[/соde]', $txt );

Здесь же:

if( $wysiwig != "yes" ) $txt = preg_replace( "#\[code\](.+?)\[/code\]#ies", "\$this->decode_code('\\1', '{$use_html}')", $txt );

Заменить на:

if( $wysiwig != "yes" ) $txt = preg_replace( "#\[code=(.+?)\](.+?)\[/code\]#ies", "\$this->decode_code('\\1', '\\2', '{$use_html}')", $txt );

Также необходимо заменить две функции:

function code_tag($txt = "") {
    if( $txt == "" ) {
        return;
    }
    $this->code_count ++;
    $txt = str_replace( "&", "&amp;", $txt );
    $txt = str_replace( "&lt;", "&#60;", $txt );
    $txt = str_replace( "'", "&#39;", $txt );
    $txt = str_replace( "&gt;", "&#62;", $txt );
    $txt = str_replace( "<", "&#60;", $txt );
    $txt = str_replace( ">", "&#62;", $txt );
    $txt = str_replace( "&quot;", "&#34;", $txt );
    $txt = str_replace( "\\\"", "&#34;", $txt );
    $txt = str_replace( ":", "&#58;", $txt );
    $txt = str_replace( "[", "&#91;", $txt );
    $txt = str_replace( "]", "&#93;", $txt );
    $txt = str_replace( ")", "&#41;", $txt );
    $txt = str_replace( "(", "&#40;", $txt );
    $txt = str_replace( "\r", "", $txt );
    $txt = str_replace( "\n", "<br />", $txt );
    $txt = preg_replace( "#\s{1};#", "&#59;", $txt );
    $txt = preg_replace( "#\t#", "    ", $txt );
    $txt = preg_replace( "#\s{2}#", "  ", $txt );
    $p = "[code]{" . $this->code_count . "}[/соde]";
    $this->code_text[$p] = "[code]{$txt}[/соde]";
    return $p;
}
    
function decode_code($txt = "", $use_html) { 
    
    // $txt = stripslashes( $txt );
    $txt = str_replace( "&amp;", "&", $txt );
    
    if( $use_html ) {
        $txt = str_replace( "&lt;br /&gt;", "\n", $txt );
    }
    
    return "[code]".$txt."[/соde]";
}

На:

function code_tag($codetype = "", $txt = "") {
    if( $txt == "" ) {
        return;
    }
    $this->code_count ++;
    $txt = str_replace( "&", "&amp;", $txt );
    $txt = str_replace( "&lt;", "&#60;", $txt );
    $txt = str_replace( "'", "&#39;", $txt );
    $txt = str_replace( "&gt;", "&#62;", $txt );
    $txt = str_replace( "<", "&#60;", $txt );
    $txt = str_replace( ">", "&#62;", $txt );
    $txt = str_replace( "&quot;", "&#34;", $txt );
    $txt = str_replace( "\\\"", "&#34;", $txt );
    $txt = str_replace( ":", "&#58;", $txt );
    $txt = str_replace( "[", "&#91;", $txt );
    $txt = str_replace( "]", "&#93;", $txt );
    $txt = str_replace( ")", "&#41;", $txt );
    $txt = str_replace( "(", "&#40;", $txt );
    $txt = str_replace( "\r", "", $txt );
    $txt = str_replace( "\n", "<br />", $txt );
    $txt = preg_replace( "#\s{1};#", "&#59;", $txt );
    $txt = preg_replace( "#\t#", "    ", $txt );
    $txt = preg_replace( "#\s{2}#", "  ", $txt );
    $p = "[code=".$codetype."]{" . $this->code_count . "}[/соde]";
    $this->code_text[$p] = "[code=\".$codetype.\"]{$txt}[/соde]";
    return $p;
}

function decode_code($codetype = "", $txt = "", $use_html) { 
    
    // $txt = stripslashes( $txt );
    $txt = str_replace( "&amp;", "&", $txt );
    
    if( $use_html ) {
        $txt = str_replace( "&lt;br /&gt;", "\n", $txt );
    }
    
    return "[code=\".$codetype.\"]".$txt."[/соde]";
}

А также:

if( $this->allow_code )
$source = preg_replace( "#\[code\](.+?)\[/code\]#ies", "\$this->code_tag( '\\1' )", $source );

Заменить на:

if( $this->allow_code )
$source = preg_replace( "#\[code=(.+?)\](.+?)\[/code\]#ies", "\$this->code_tag( '\\1', '\\2' )", $source );

3. В файл main.tpl Вашего шаблона, между тегами <head></head>, либо перед <body> вставить:

<link href='http://syntaxhighlighter.googlecode.com/svn/trunk/Styles/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/> 
<script type="text/javascript" src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js"></script> 
<script type="text/javascript" src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js"></script> 
<script type="text/javascript" src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js"></script> 
<script type="text/javascript" src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js"></script> 
<script type="text/javascript" src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js"></script>
<script>
dp.SyntaxHighlighter.ClipboardSwf = 'http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/clipboard.swf';
dp.SyntaxHighlighter.BloggerMode(); 
dp.SyntaxHighlighter.HighlightAll('code');
</script>


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

Если не хотите чтобы все необходимые скрипты грузились с серверов Google, можете скачать SyntaxHighlighter библиотеку(версия 1.5.1), залить все необходимые файлы из неё к себе на сервер, и изменить путь для подключаемых файлов.
Я пока использую версию 1.5.1 и предлагаю её скачать по предыдущей ссылке, но на момент написания этого поста существует версия 2.0. Какую из них использовать - выбирать вам.

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

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

    Похожие новости:
  • Использование плагина LightBox jQuery
  • JavaScript переключатель между файлами CSS
  • Система комментирования Disqus в DataLife Engine
  • Вывод последний сообщений из Twitter на блоге
  • Меню в стиле Mac OS

Метки: JavaScript, JS, DLE, WordPress, HTML
Категории: Сайтостроение, CMS Просмотров: 3970


Комментарии:


Добавление коментария:

  • Подписывайтесь на блог

  • Категории

    • SEO
    • Продвижение сайтов
    • Сайтостроение
      • HTML и CSS
      • jQuery
    • CMS
      • DataLife Engine
    • Интересное из Twitter`а
    • Эксперименты
    • Мысли вслух

  • Спонсоры

  • Мой twitter

     

  • Популярные записи

    • 10 лучших расширений для Google Chrome
    • Фильтры Яндекса
    • Меню в стиле Mac OS
    • Использование плагина LightBox jQuery
    • Дополнительные поля в DLE комментариях

  • Архивы

    • Октябрь 2010 (2)
    • Сентябрь 2010 (2)
    • Май 2010 (1)
    • Апрель 2010 (1)
    • Ноябрь 2009 (1)
    • Октябрь 2009 (1)
    • Июль 2009 (4)
    • Февраль 2009 (1)
    • Январь 2009 (5)
    • Декабрь 2008 (2)
    • Показать весь архив
Реклама
Статистика
Rambler's Top100
© 2009 Евгений Копач Копирование материалов запрещено!