<!-- код --> <pre class="brush: js"> function foo() { } </pre>
Для подобного поведения я использую в этом блоге http://alexgorbatchev.com/wiki/SyntaxHighlighter.
Могут подсвечиваться разные языки, это делается указанием в атрибуте class нужного шаблона (см. в примере выше):
class="brush: js"
. Все шаблоны можно увидеть тут: http://alexgorbatchev.com/wiki/SyntaxHighlighter:Brushes. Заранее надо выбрать какие именно языки должны подсвечиваться и именно эти скрипты подключить. Мне были нужны:1) js, jscript, javascript
2) bash, shell
3) sql
4) xml, xhtml, xslt, html, xhtml
5) cpp, c
6) java
7) php
8) plain, text
Итак, на странице (например, в шаблоне блога) перед </head> у меня находится следующий код:
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/> <!-- тут другие brushes --> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/> <!-- тут стили --> <link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/> <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
В самом конце страницы, перед </body> стоит следующее:
<script type='text/javascript'> <!-- если это на blogger.com, то надо установить флаг --> SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.all(); </script>
Надо отметить, что угловые скобки < и > в коде надо использовать как < и >
ОтветитьУдалитьЯ согласен, что использование SyntaxHighlighter, описанного в статье, - хорошее решение для выделения синтаксиса программных языков прямо на веб-странице. Интеграция различных языков и легкая настройка через скрипты и CSS очень удобны для пользователей, особенно владельцев технических блогов. Это полезный инструмент, который помогает выделить и сделать понятными фрагменты кода, улучшая тем самым опыт чтения и общее визуальное восприятие статьи.
Easy Arabic mehndi design