Sefirut.ru Каталог статей Уроки по html/css Разное

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


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


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


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


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

<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>