Как отобразить в бразуре отформиатированный HTML и CSS?

termoplus · May 22, 2009

ребят как показать на веб сайте код html и css? Но чтобы теги и тому подобное были выдели каждый своим цветом. пример здесь (щелкните на любой картинке): http://www.psd2html.com/examples.html

спасибо

s0rr0w · May 22, 2009

ребят как показать на веб сайте код html и css? Но чтобы теги и тому подобное были выдели каждый своим цветом. пример здесь (щелкните на любой картинке): http://www.psd2html.com/examples.html
спасибо

А код изучить не судьба?

termoplus · May 22, 2009

неужели для каждого тега свой класс писали. а если такие страниц 20, что делать. смысла не вижу формотировать по словам. есть другие альтернативы?

psywalker · May 22, 2009

termoplus

На CSS у меня лично других идей не возникает, как каждому слову задать класс, может на JS как то можно сделать, но это уже не ко мне

Styx · May 22, 2009

Кстати, там, куда ведёт указанная ссылка, сделано как раз с помощью JavaScript и регулярных выражений (всё можно свободно посмотреть в тамошнем сценарии highligh.js). Я вот тоже эксперимента ради попробовал сотворить нечто своё подобное, но попроще, разумеется. Суть проста — код на страницу выводится так, что открывающие угловые скобки дескрипторов заменяются на < , а закрывающий — на >. Соответственно, с помощью регулярных выражений их можно отыскать в тексте и обрамить их вместе с содержимым в <span class="..."></span> например. Для класса задать в CSS цвет текста тегов. Ну и примерно аналогично — с закавыченным текстом. Можно и дальше раскрашивать тем же способом, но я не стал.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
   <meta http-equiv="content-type" content="text/html;charset=utf-8" />
   <title>Template</title>

   <style type="text/css">
	  span.tags {
		 color: #00009C;
	  }
	  span.quoted {
		 color: #CB6532;
	  }
   </style>

   <script type="text/javascript">
	  function colorCode(containerId) {
		 var container = document.getElementById(containerId);
		 var Code = container.innerHTML;
		 var leftBracket = /&_lt;/gim;
		 var rightBracket = /&_gt;/gim;
		 var quotes = /"([^&]*)"/gim;
		 Code = Code.replace(leftBracket, "<span class='tags'>&_lt;");
		 Code = Code.replace(rightBracket, "&_gt;</span>");
		 Code = Code.replace(quotes, "<span class='quoted'>$&</span>");
		 container.innerHTML = Code;
	  }
   </script>

</head>

<body>
   <div id="codeHTML">
	  <pre>&_lt;!DOCTYPE html PUBLIC &_quot;-//W3C//DTD XHTML 1.0 Transitional//EN&_quot; &_quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&_quot;&_gt;

&_lt;html xmlns=&_quot;http://www.w3.org/1999/xhtml&_quot;&_gt;

&_lt;head&_gt;
   &_lt;meta http-equiv=&_quot;content-type&_quot; content=&_quot;text/html;charset=utf-8&_quot; /&_gt;
   &_lt;title&_gt;Template&_lt;/title&_gt;

   &_lt;style type=&_quot;text/css&_quot;&_gt;
   &_lt;/style&_gt;

   &_lt;script type=&_quot;text/javascript&_quot;&_gt;
   &_lt;/script&_gt;

&_lt;/head&_gt;

&_lt;body&_gt;
   &_lt;p&_gt;This is a trial HTML page!&_lt;/p&_gt;
&_lt;/body&_gt;

&_lt;/html&_gt;</pre>
   </div>
   <p><input type="button" value="clolr code!" onclick="colorCode('codeHTML');" /><br />
	  <input type="button" value="print code!" onclick="document.getElementById('code2').firstChild.data = document.getElementById('codeHTML').innerHTML;" /></p>
   <div id="code2"> </div>
</body>

</html>

P.S. Пришлось исказить код вот такими символами &_lt; &_gt; &_quot; , поскольку здешний интерпретатор автоматически преобразует коды символов < и > в сами символы, и код теряет функциональность! На самом деле, разумеется, нижнее подчеркивание надо удалить перед использованием!! Сразу как-то не заметил...

Edited May 23, 2009 by Styx

Sign In

Как отобразить в бразуре отформиатированный HTML и CSS?

Question

termoplus

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

s0rr0w

Link to comment

Share on other sites

termoplus

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Styx

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information