Подсветка синтаксиса - SyntaxHighlighter на Blogger.com

воскресенье, июля 26, 2015 Nata Ki 0 Comments


Блог будет посвящен программированию и поэтому придется выкладывать исходные тексты программ (листинги). Вообще для удобства восприятия, листинги форматируют - подсвечивают синтаксис. К сожалению на блогспоте возможности очень ограниченны, что сильно сокращает выбор таких инструментов. Приходится искать варианты.

Для подсветки синтаксиса на блогспоте можно использовать 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 = &#39;http://alexgorbatchev.com/pub/sh/2.1.364/scripts/clipboard.swf&#39;;
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-тегов придется заменять символ "<" на его код "&lt;", а символ ">" на код "&gt;". Чтобы не делать эти замены вручную, была создана отдельная утилита: http://code-highlight.appspot.com/

Итого все очень просто, удобно и красиво.




0 коммент.: