|
| ||||||
|
Публикация html-кода на странице сайта (продолжение)<<< На предыдущую На двух страницах. Страница 2. Способ 4. Публикация html-кода с подсветкой синтаксиса.Вот, наконец, мы и подошли к более серьёзному варианту показа кода. Он позиционируется как демонстрация html-кода с подсветкой синтаксиса и осуществляется с помощью плагина SyntaxHighlighter. Такой вариант можно увидеть на большинстве сайтов обучающей тематики. Демо-пример SyntaxHihglighter 3.0.83Это тестовый код для демонстрации работы плагина:
function test() : String
{
return 10;
}
Почему я выбрал для установки именно версию 3.0.83? На мой взгляд, это самая удачная версия плагина линейки SyntaxHighlighter. Если Вы протестируете более свежие версии и сравните с этой, непременно заметите преимущества последней. Итак, приступим к скачиванию плагина. Если возникают проблемы при скачивании файлов, например, через браузер, скопируйте ссылку (правая кнопка мыши → копировать адрес ссылки) и скачайте файл через Download Master. Установка плагинаУстановка очень проста. Следуйте простым подсказкам:
В раздел head, как видим, просятся множество скриптов, но, если мы будем публиковать только код HTML, PHP, CSS и JavaScript, нам понадобятся только лишь эти скрипты: <script type="text/javascript" src="/js/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript">SyntaxHighlighter.all();</script> <script type="text/javascript" src="/js/syntaxhighlighter/scripts/shBrushXml.js"></script> <script type="text/javascript" src="js/syntaxhighlighter/scripts/shBrushPhp.js"></script> <script type="text/javascript" src="/js/syntaxhighlighter/scripts/shBrushCSharp.js"></script> <script type="text/javascript" src="/js/syntaxhighlighter/scripts/shBrushJScript.js"></script> Там же, в разделе head, подключаем стили и скрипт для файла имеющего отношение к копированию в буфер обмена - clipboard.swf: <link type="text/css" rel="stylesheet" href="/js/syntaxhighlighter/styles/shCore.css" <link type="text/css" rel="stylesheet" href="/js/syntaxhighlighter/styles/shThemeDefault.css"> <script type="text/javascript"> SyntaxHighlighter.config.clipboardSwf = '/js/syntaxhighlighter/scripts/clipboard.swf'; SyntaxHighlighter.all(); </script> Чтобы демонстрировать html-код на своём сайте необходимо на странице предполагаемой демонстрации в разделе body разместить такой код: <pre class="brush: название кисти"> Здесь будет публикуемый код </pre> Brush - это кисть на английском, а вместо словосочетания «название кисти» нужно будет подставлять названия в зависимости от языка публикуемого кода, например:
Например, разместим код с кистью c-sharp. Исходный код выглядит так:
<pre class="brush: c-sharp">
function test() : String
{
return 10;
}
</pre>
Недостатки SyntaxHihglighter 3.0.83Казалось бы, на этом этапе всё прекрасно, всё работает, но данный плагин, к сожалению, не лишен недостатков. Если вставлять html-код в первозданном виде, ничего не заменяя мнемониками, некоторые из тегов, почему-то не отражаются. Чтобы было понятнее, попробуем выставить для показа такой код: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Название</title> <style type="text/css"></style> </head> <body> <h1>Название</h1> <p>Параграф</p> </body> </html> Просто вставили код, ничего не изменяя. Смотрите, что получилось? Где DOCTYPE, где открывающие и закрывающие теги html и head? «Канули в лету!» <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Название</title> <style type="text/css"></style> <h1>Название</h1> <p>Параграф</p> Самый простой способ решения этой проблемы - замена некоторых символов мнемониками. Делать это можно вручную, если код небольшой или с помощью «Notepad2» или «Notepad++». Если Вы используете «Notepad++» и в нем производите замену, лучше выставить синтаксис «Batch» и в настройках включить подсветку атрибутов тега, тогда будут высвечиваться символы меньше (<) и больше (>) и их удобнее заменять мнемониками < и >. После замены символов меньше (<) и больше (>) весь код будет отображаться корректно. Я для перестраховки все символы заменяю мнемониками, потому, что есть ещё один «косячок» плагина - при отсутствии закрывающих тегов в публикуемом коде, он, пытаясь исправить ситуацию, подставляет их. В результате, человек может скопировать у вас некорректный код.
Настройки плагинаЕсли Вы хотите убрать нумерацию строк, воспользуйтесь опцией gutter, указав ее значение перед вызовом плагина: <script type="text/javascript"> SyntaxHighlighter.defaults['gutter'] = false; SyntaxHighlighter.all(); </script> Также можно подключить другую тему оформления кода вместо Default. Откройте папку syntaxhighlighter/styles и выберите один из вариантов. Скопируйте его название (переименовать → копировать) и вставьте в строку вместо дефолтного shThemeDefault.css: <link type="text/css" rel="stylesheet" href="/js/syntaxhighlighter/styles/shThemeDefault.css"> Вот и всё о публикации кода и «коварном» плагине SyntaxHighlighter 3.0.83. Выбирайте приемлемый для себя способ и применяйте на своём сайте. Всего доброго! Ваш L.M. <<< На предыдущую На двух страницах. Конец страницы 2. | |||||
| ||||||