Как сделать простую подсветку кода в HTML средствами JS - Каталог статей - Уроки по html/css - Разное www.Sefirut.ru - разработка шаблонов, сайтов, иконок, скриптов, создание сайтов набережные челны, студия веб-дизайна в Набережных Челнах, раскрутка и продвижение сайтов в интернете
| Сегодня Суббота 10.12.2016

Как сделать простую подсветку кода в HTML средствами JS


Если вам потребуется осуществить подсветку синтаксиса кода на странице, например HTML или PHP, то это можно несложно реализовать на Javascript при помощи регулярных выражений (Regular Expression).
Примечание: имеется ввиду что спецсимволы вроде треугольных скобок, как при обозначении HTML-тегов, будут заменены HTML-сущностями, т.е < будет заменено на &lt; ну итд.
Итак, необходимый нам код мы будем размещать в блоках <pre class="code"> тут будет HTML/JS/PHP и любой другой код </pre>, а в после этих блоков или же на событие window.onload мы подключим нашу будущую функцию js_simple_code_highlighter(), для обработки и раскраски кода.
Если вы не знакомы с регулярными выраженями в Javascript, придется этот вопрос изучить самостоятельно.

Для нашего будущего «хайлайтера» мы поставим следующие задачи:

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

  • подсветка некоторых ключевых слов, указанных в скрипте (например true, char, итд.)

  • подсветка HTML-тегов

  • подсветка комментариев в коде

  • подсветка имен переменных в PHP


Основная идея: получить все необходимые блоки с кодом на странице, после чего последовательно обработать их содержимое в цикле, применяя по ходу каждое правило замены регулярного выражения, и выводить новый результат за место старого в теже блоки с кодом.
Нужные куски текста в коде мы будем «оборачивать» в HTML-теги с определенными названиями классов (например: <font class="tagname">полученная строка</font>), чтобы в дальнейшем при помощи CSS сделать непосредственную подсветку кода.
Немного «пошаманив» над яваскриптом, получилась вот такая функция и CSS-стили к ней:

<script type="text/javascript">
function js_simple_code_highlighter()
{
// получаем список всех элементов (тегов) с содержимым кода
code = document.getElementsByTagName('pre');

// определяем список ключевых слов для подсветки
keywords = 'abstract boolean break byte case catch char const continue debugger delete do else enum export extends false final finally
for function goto if implements in instanceof int interface long native new null package private protected public return short static
super switch synchronized throw throws transient true try typeof var void volatile while with and or xor __FILE__ __LINE__ array as
break case cfunction const continue declare die do else elseif empty enddeclare endfor endforeach endif endswitch endwhile extends
for foreach function include include_once global if new old_function return static switch use require require_once var
while __FUNCTION__ __CLASS__ __METHOD__ abstract interface public implements extends private protected throw define';

// цикл обработки полученных элементов
for(i = 0; i < code.length; i++)
{
if( code[i].className == 'code' )
{
data = code[i].innerHTML;

data = data.replace(/(".*?"|'.*?')/g, '<font class="string">$1</font>'); // замена всех строк, обернутых в одинарные и двойные кавычки
data = data.replace(/(&lt;[a-z]+)(.*?)(\s*\/?&gt;)/gi, '<font class="tagname">$1</font>$2<font class="tagname">$3</font>');
// обработка HTML-тегов
data = data.replace(/(&lt;\/?[a-z]+&gt;)/gi, '<font class="tagname">$1</font>'); // обработка HTML-тегов (закрывающих)
data = data.replace(/(&lt;\?php|\?&gt;)/g, '<font class="tagname">$1</font>'); // обработка HTML-тега при подключении PHP-кода
data = data.replace(/(&lt;!--.*--&gt;|\/\*.*\*\/|\/\/.*)/g, '<font class="comment">$1</font>'); // обработка комментариев
data = data.replace(new RegExp('\\\x62('+ keywords.replace(/ /g,'|') +')\\\x62', 'g'), '<font class="keyword">$1</font>');
// обработка ключевых слов
data = data.replace(/(\$[a-z0-9_]+)/gi, '<font class="phpvar">$1</font>'); // подсветка PHP-переменных ($varname)

// обработка пробельных символов и номеров строк
data = data.replace(/ /g, '&nbsp;').replace(/\t/g, '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;').replace(/^(.*?)\r?(\n|$)/gm,'<div>
<span class="numline">$1</span></div>');
data = data.replace(/<font&nbsp;/gi, '<font ');

code[i].innerHTML = data;
}
}
}
</script>

<style type="text/css">
pre.code { position:relative; display:block; width:100%; overflow:auto; overflow-y:visible; background:#333; padding:5px 0;
margin-bottom:-20px; counter-reset: line; max-height:450px; }
pre.code { font:14px/130% "Lucida Console", "Courier New", monospace; color:#888; }
pre.code div { padding:0 5px; counter-increment: line; //display:list-item; //list-style:decimal outside; //margin-left:30px; }
pre.code div:before { content:counter(line) ". "; font-style:normal; }
pre.code div span.numline { color:#ddd; }
pre.code .comment, pre .comment * { color:#999999 !important; font-style:italic !important; }
pre.code .string, pre .string * { color:#B6DDDE !important; }
pre.code .tagname { color:#91B7F7; }
pre.code .keyword { color:#CCFF99; }
pre.code .phpvar { color:#97DBF9; }
</style>


Смотреть результат работы скрипта

Если вас по каким-то причинам не устраивает такая простая подсветка кода, то могу посоветовать хайлайтер Ивана Салагаева, который имеет ряд настроек и может подсвечивать синтаксис различных языков программирования. Его можно скачать отсюда: http://softwaremaniacs.org/soft/highlight/
Категория: Разное | Добавил: Admin (10.10.2010)
Просмотров: 2616 | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]