Подсветка синтаксиса - SyntaxHighlighter на Blogger.com
Для подсветки синтаксиса на блогспоте можно использовать JavaScript библиотеку "SyntaxHighlighter by Alex Gorbatchev". Библиотека не требует размещения непосредственно на сайте и не используется на стороне сервера. Что как раз и нужно на блогспоте. После знакомства с библиотекой SyntaxHighlighter можно интегрировать ее с Вашим блогом. Как именно встроить библиотеку в блок - написано тут: Embed Code Syntax Highlighting in Blog
Если коротко, то в шаблоне перед тегом </head> надо вставить такой текст:
<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPerl.js' type='text/javascript'/>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>
Как подсвечивать код в сообщениях? Для этого нажимаем кнопку <HTML>, тем самым переходим в режим редактирования исходного html-кода страницы, и затем нужный текст листинга помещаем внутрь тега <pre>:
<pre class="brush: java">
/**
* Hello World! on Java
*/
public void SayHello()
{
if (counter <= 10)
System.out.println("Hello World!"); //some comments
}
</pre>
В результате на странице листинг будет выглядеть так:
В результате на странице листинг будет выглядеть так:
/**
* Hello World! on Java
*/
public void SayHello()
{
if (counter <= 10)
System.out.println("Hello World!"); //some comments
}
Библиотека поддерживает разные языки программирования и стили разметки страниц. Для этого используется класс brush с разными алиасами, вот полный список алиасов:
actionscript3
bash, shell
c-sharp, csharp
cpp, c
css
delphi, pas, pascal
diff, patch
groovy
js, jscript, javascript
java
jfx, javafx
perl, pl
php
plain, text
ps, powershell
py, python
rails, ror, ruby
scala
sql
vb, vbnet
xml, xhtml, xslt, html, xhtml
При отображении html-тегов придется заменять символ "<" на его код "<", а символ ">" на код ">". Чтобы не делать эти замены вручную, была создана отдельная утилита: http://code-highlight.appspot.com/
Итого все очень просто, удобно и красиво.
0 коммент.:
Примечание. Отправлять комментарии могут только участники этого блога.