Loading





Форекс с Альпари

eTXT




Анкетка


Публикация html-кода на странице сайта (продолжение)


<<< На предыдущую  На двух страницах.  Страница 2.

Способ 4. Публикация html-кода с подсветкой синтаксиса.

Вот, наконец, мы и подошли к более серьёзному варианту показа кода. Он позиционируется как демонстрация html-кода с подсветкой синтаксиса и осуществляется с помощью плагина SyntaxHighlighter. Такой вариант можно увидеть на большинстве сайтов обучающей тематики.


Демо-пример SyntaxHihglighter 3.0.83

Это тестовый код для демонстрации работы плагина:

function test() : String
{
	return 10;
}

Почему я выбрал для установки именно версию 3.0.83? На мой взгляд, это самая удачная версия плагина линейки SyntaxHighlighter. Если Вы протестируете более свежие версии и сравните с этой, непременно заметите преимущества последней. Итак, приступим к скачиванию плагина.


Если возникают проблемы при скачивании файлов, например, через браузер, скопируйте ссылку (правая кнопка мыши → копировать адрес ссылки) и скачайте файл через Download Master.


Установка плагина

Установка очень проста. Следуйте простым подсказкам:

  • Распакуйте скачанный архив в текущую папку на компьютере.
  • Закачайте всё содержимое папки js (папку syntaxhighlighter) в соответствующую папку (js), которая находится в корневой папке сайта.
  • Откройте тестовый файл по адресу
    //www.вашдомен.ru/js/syntaxhighlighter/test.html
    и проверьте работу плагина. Если всё работает корректно, тестовый файл test.html, а так же текстовой файл LGPLv3.txt можно удалить, но только с сервера сайта. На компьютере файл test.html нам ещё пригодится.
  • Открываем файл test.html на компьютере, копируем и расставляем все коды по своим местам на странице своего сайта:

В раздел 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 - это кисть на английском, а вместо словосочетания «название кисти» нужно будет подставлять названия в зависимости от языка публикуемого кода, например:

  • html - для обычного html-кода;
  • php - для php-кода.
  • c-sharp - для кода в файле стилей;
  • js - для ява скриптов;

Например, разместим код с кистью 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» и в настройках включить подсветку атрибутов тега, тогда будут высвечиваться символы меньше (<) и больше (>) и их удобнее заменять мнемониками  &lt; и &gt;. После замены символов меньше (<) и больше (>) весь код будет отображаться корректно. Я для перестраховки все символы заменяю мнемониками, потому, что есть ещё один «косячок» плагина - при отсутствии закрывающих тегов в публикуемом коде, он, пытаясь исправить ситуацию, подставляет их. В результате, человек может скопировать у вас некорректный код.


Тотальная замена некоторых символов мнемониками

Как Вы уже поняли, замена символов в объёмном коде не есть «айс». Для облегчения этой задачи будем использовать любой «Notepad». Принцип действия примерно одинаков, поэтому кратко распишу процедуру замены в «Notepad++», которым успешно пользуюсь.

В верхнем меню открываем: «Поиск → Замена». Появляется окно, где в поле «Найти» вводим символ, который нужно заменить (например, <), а в поле «Заменить на» - его мнемоник (&lt;). Ставим галку в чекбоксе «В выделенном», если замена производится в выделенном участке кода, и жмем «Заменить всё». Все символы в выделенном коде мгновенно будут заменены их мнемониками, а если не ставили галку - во всем коде. В случае ошибки можно вернуть всё к прежнему состоянию, выбрав в меню: «Правка → Отмена». После первого ввода символов, они запоминаются и далее процесс замены будет происходить быстрее.

Будьте внимательны при тотальной замене всех символов в документе. Может случиться казус! Например, если в документе «php» менять «id» на «class» - умный редактор, помимо всех плановых замен сделает Вам из width - wclassth, из widgets - wclassgets. Получается так, что он не разбираясь, меняет «всех на всех» и, независимо где находятся буквы «id», он поменяет их на «class»!


Настройки плагина

Если Вы хотите убрать нумерацию строк, воспользуйтесь опцией 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.

Работа в интернете с текстами




Ваш комментарий







  © 2015–2018  https://leonidmuzyka.com/  L.M. Служба поддержки RSS подписка подписка