Делается так
<script src="http://softwaremaniacs.org/js/highlight.js" type="text/javascript"> </script> <script type="text/javascript"> initHighlightingOnLoad(); </script>
Стили можно подсмотреть в архиве, если лень, то вот минимальный набор для подсветки
.comment {
color: gray;
}
.keyword {
font-weight: bold;
}
.html .atribute .value {
color: green;
}
Свой код надо вставить вот в такое
<pre><code>...</code></pre>
Гугловский вариант
ссылка на проект google-code-prettify
посмотреть как работает можно тут
В head необходимо включить следующий код
<link href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"> </script>
Дописать следующее в body
... <body onload='prettyPrint()'> ...
Ну и собственно оформить код в таком стиле
<pre class="prettyprint"> ... # Your code goes here </pre>
В ходе написания выяснилось, что парсер неверно истолковывает html-теги, и единственным найденным способом есть только преобразование в esc-последовательность данным парсером
Ну и обычные приколы, когда код не влазит по ширине (((
UPD
вселенсокое зло побеждено )
теперь усе взлазит.
перед </head> вставляем
<style>pre.prettyprint{width:494px;white-space:pre-wrap} </style>
0 коммент.:
Отправить комментарий