Подсветка исходный код в blogger

Не оригинальная статья. Взята с просторов интернета дабы пользоваться, тем что в ней.
Используется SyntaxHighlighter от Алексея Горбачёва. Что бы начать использовать его решение, сначала надо выполнить настройку шаблона:


1 .В панели управления идём в меню "Дизайн" и там выбираем пункт "Изменить HTML".

2. Теперь ищем в тексте шаблона конструкцию "</head>" и перед ней добавляем код. (на картинке он уже добавлен)

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

<!--SYNTAX HIGHLIGHTER BEGINS-->   <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'/>   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script>   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script>   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script>   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script>   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script>   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script>   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script>   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script>   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script>   <script language='javascript'>   SyntaxHighlighter.config.bloggerMode = true;   SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';   SyntaxHighlighter.all();   </script>   <!--SYNTAX HIGHLIGHTER ENDS-->

3.Небольшое пояснение к добавленному коду:

Это базовый CSS файл - он должен быть.

?

1	<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>

Это файл стилей, который стилизует подсветку под определённые среды разработки. Его можно заменить, подобрав другой на сайте разработчика. Выбираете понравившуюся тему и заменяете имя css файла.

?

1	<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>

Это базовый скрипт - его удалять нельзя.

?

1	<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>

Это скрипт для раскрашивания C++ кода

?

1	<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script>

Это скрипт для раскрашивания C# кода

?

1	<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script>

Это скрипт для раскрашивания CSS кода

?

1	<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script>

Это скрипт для раскрашивания JAVA кода

?

1	<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script>

Это скрипт для раскрашивания JavaScript кода

?

1	<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script>

Это скрипт для раскрашивания PHP кода

?

1	<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script>

Это скрипт для раскрашивания SQL кода

?

1	<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script>

Это скрипт для раскрашивания XML, HTML кода

?

1	<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script>

Это скрипт для раскрашивания Perl кода

?

1 2	<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script>

Инициализация скрипта

?

1 2 3 4 5

<script language='javascript'> SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf'; SyntaxHighlighter.all(); </script>

Если  какой то синтаксис не нужен - его можно не использовать. Полный список поддерживаемых языков доступен на сайте разработчика. Его нужно подключить аналогичным образом.

4. Существует два способа вставки подсветки кода. Пользуйтесь тем, что удобнее. Но не рекомендуется пользоваться одновременно двумя методами.

• Обрамление кода в тэг <pre>
• Обрамление кода в тэг <script>

Тэг <pre>.
Семантика

?

1 2 3 4

<pre class="brush:[Имя языка для раскраски]"> Тут листинг программы/модуля/функции </pre>

Тэг <script>.
Семантика

?

1 2 3 4

<script type="syntaxhighlighter" class="brush:[Имя языка для раскраски]"> <![CDATA[  Тут листинг программы/модуля/функции  ]]></script>

Например, для языка C++

?

1 2 3

<script type="syntaxhighlighter" class="brush:cpp"> <![CDATA[ ]]></script>

Вместо "[Имя языка для раскраски]" нужно указать необходимый Вам.  Полный список можно посмотреть тут. Понятно, что использовать можно только те языки, что подключили.
Порядок использования:

• Переключаетесь в режим "Изменить HTML"
• Ввести конструкцию тэга <pre> или <script>
• Для тега <pre> - экранируйте служебные символы вашего кода - для того, что бы не получить сообщение "Ваш код HTML не может быть принят"
• Вставить модифицированный код внутрь тэга <pre> или <script>.

Допустимые имена языков для раскраски приведены ниже:

[Имя языка для раскраски]	Описание
"brush:as3" "brush:actionscript3"	ActionScript3
"brush:bash" "brush:shell"	Bash/shell
"brush:cpp" "brush:c"	C++, С
"brush:c-sharp" "brush:csharp"	C#
"brush:cf" "brush:coldfusion"	ColdFusion
"brush:css"	CSS
"brush:delphi" "brush:pas" "brush:pascal"	Delphi, Pascal
"brush:diff" "brush:patch"	Diff
"brush:erl" "brush:erlang"	Erlang
"brush:groovy"	Groovy
"brush:js" "brush:jscript" "brush:javascript"	JavaScript
"brush:java"	Java
"brush:jfx" "brush:javafx"	JavaFX
"brush:perl" "brush:pl"	Perl
"brush:php"	PHP
"brush:plain" "brush:text"	Plain Text
"brush:ps" "brush:powershell"	PowerShell
"brush:py" "brush:python"	Python
"brush:rails" "brush:ror" "brush:ruby"	Ruby
"brush:scala"	Scala
"brush:sql"	SQL
"brush:vb" "brush:vbnet"	Visual Basic
"brush:xml"	XML
"brush:xhtml"	XHTML
"brush:xslt"	XSLT
"brush:html"	HTML

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<pre class="brush:cpp"> </pre> <pre class="brush:js"> </pre> <pre class="brush:text"> </pre> <pre class="brush:php"> </pre> <pre class="brush:sql"> </pre> <pre class="brush:xml"> </pre> <pre class="brush:html"> </pre>