Подсветка синтаксиса на Blogger

Здесь описан способ, по которому вы можете добавить подсветку кода в Blogger (сайт автора).


Для этого надо:

• Залогиниться в аккаунт вашего блога, выбрать вкладку "Дизайн" ("Layout"), а затем вкладку "Изменить HTML" ("Edit HTML").
• Кликнуть по ссылке "Загрузить весь шаблон" ("Download Full Template"), чтобы сохранить текущую копию шаблона (файл xml).
• Открыть файл в редакторе и найти закрывающий тег </head>. После тега добавьте следующее:
  
  

  <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'/>
  <!-- add brushes here -->
  <script type='text/javascript'>
  SyntaxHighlighter.config.bloggerMode = true;
  SyntaxHighlighter.all();
  </script>

• После комментария "add brushes here" добавьте языки, которые вы планируете использовать. Для примера я использую подстветку для Javascript, Bash, SQL, XML/HTML, и C++:
  
  

  <!-- add brushes here -->
  <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'/>
  

  
  Смотрите здесь полный список поддерживаемых подсветок синтаксиса.
  
  
• Сохраните ваш измененный шаблон, и загрузите его в Blogger (опять "Дизайн" ("Layout") -> "Изменить HTML" ("Edit HTML")).
• Теперь вы можете добавить подсветку синтаксиса в ваш блог. Обрамите свой код тегом <pre> и определите стиль. Для примера вот так указываем подсветку блока SQL:
  
   <pre class="brush:sql">
  SELECT *
  FROM users
  WHERE user_id = 1212;
  </pre>
  
  В итоге мы получим:
  
  

  SELECT *
  FROM users
  WHERE user_id = 1212;
  

  
  
Свой код вы должны предварительно отформатировать в специальном редакторе, например здесь. Также, стоит отметить, что "Просмотр" Blogger'a не показывает форматирование. Вам нужно опубликовать сообщение, чтобы увидеть результат.

Источник.

UPD1:
Ещё один ресурс по созданию подсветки tohtml.com. Но это только подсветка, а не "контейнер" для кода как представлено в варианте выше.

UPD2:
Если вставить нижепредставленный скрипт, тогда у подсвеченного кода появится дополнительная кнопка "копировать".

<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'/>
<!-- add brushes here -->
<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/shBrushPlain.js' type='text/javascript'/>
<script type='text/javascript'>
  SyntaxHighlighter.config.bloggerMode = true;
  SyntaxHighlighter.config.clipboardSwf = &#39;http://alexgorbatchev.com/pub/sh/2.0.296/scripts/clipboard.swf&#39;;
  SyntaxHighlighter.all();
</script>
<script type='text/javascript'> 
if (window.jstiming) window.jstiming.load.tick(&#39;headEnd&#39;);
</script>