понедельник, 21 февраля 2011 г.

Как добавить Syntax Highlighter на Blogger

syntaxhighlighter   — подсветка синтаксиса кода на веб-странице.

Демо

  // SyntaxHighlighter makes your code
  // snippets beautiful without tiring
  // your servers.
  // http://alexgorbatchev.com
    var setArray = function(elems) {
        this.length = 0;
        push.apply(this, elems);
        return this;
    }

Как добавить:

  • Открываем панель инструментов Blogger » Дизайн » Изменить HTML.
  • Ищем ]]></b:skin> тег .
  • Копируем код ниже и вставляем его непосредственно перед ]]></b:skin> тегом :
.syntaxhighlighter a,.syntaxhighlighter div,.syntaxhighlighter code,.syntaxhighlighter table,.syntaxhighlighter table td,.syntaxhighlighter table tr,.syntaxhighlighter table tbody,.syntaxhighlighter table thead,.syntaxhighlighter table caption,.syntaxhighlighter textarea{-moz-border-radius:0!important;-webkit-border-radius:0 0 0 0!important;background:none!important;border:0!important;bottom:auto!important;float:none!important;height:auto!important;left:auto!important;line-height:1.1em!important;outline:0!important;overflow:visible!important;position:static!important;right:auto!important;text-align:left!important;top:auto!important;vertical-align:baseline!important;width:auto!important;box-sizing:content-box!important;font-family:Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace!important;font-weight:400!important;font-style:normal!important;font-size:1em!important;min-height:auto!important;margin:0!important;padding:0!important;}
.syntaxhighlighter{width:100%!important;position:relative!important;overflow:auto!important;font-size:1em!important;background-color:#FFF!important;margin:1em 0!important;}
.syntaxhighlighter.source{overflow:hidden!important;}
.syntaxhighlighter .italic{font-style:italic!important;}
.syntaxhighlighter .line{white-space:pre!important;}
.syntaxhighlighter table caption{text-align:left!important;color:#000!important;padding:.5em 0 .5em 1em !important;}
.syntaxhighlighter table td.code .container{position:relative!important;}
.syntaxhighlighter table td.code .container textarea{box-sizing:border-box!important;position:absolute!important;left:0!important;top:0!important;width:100%!important;height:100%!important;border:none!important;background:#FFF!important;padding-left:1em!important;overflow:hidden!important;white-space:pre!important;}
.syntaxhighlighter table td.gutter .line{text-align:right!important;padding:0 .5em 0 1em !important;}
.syntaxhighlighter table td.code .line{padding:0 1em!important;}
.syntaxhighlighter.nogutter td.code .container textarea,.syntaxhighlighter.nogutter td.code .line{padding-left:0!important;}
.syntaxhighlighter.show{display:block!important;}
.syntaxhighlighter.collapsed .toolbar{font-size:1em!important;position:static!important;width:auto!important;height:auto!important;color:blue!important;background:#FFF!important;border:1px solid #6ce26c!important;padding:.1em .8em 0!important;}
.syntaxhighlighter.collapsed .toolbar span{display:inline!important;margin-right:1em!important;}
.syntaxhighlighter.collapsed .toolbar span a{display:none!important;padding:0!important;}
.syntaxhighlighter .toolbar{position:absolute!important;right:1px!important;top:1px!important;width:11px!important;height:11px!important;font-size:10px!important;z-index:10!important;color:#FFF!important;background:#6ce26c!important;border:none!important;}
.syntaxhighlighter .toolbar a{display:block!important;text-align:center!important;text-decoration:none!important;padding-top:1px!important;color:#FFF!important;}
.syntaxhighlighter.ie{font-size:.9em!important;padding:1px 0!important;}
.syntaxhighlighter.ie .toolbar{line-height:8px!important;}
.syntaxhighlighter.ie .toolbar a{padding-top:0!important;}
.syntaxhighlighter.printing .line.alt1 .content,.syntaxhighlighter.printing .line.alt2 .content,.syntaxhighlighter.printing .line.highlighted .number,.syntaxhighlighter.printing .line.highlighted.alt1 .content,.syntaxhighlighter.printing .line.highlighted.alt2 .content{background:none!important;}
.syntaxhighlighter.printing .line .number{color:#bbb!important;}
.syntaxhighlighter.printing .line .content{color:#000!important;border:none!important;}
.syntaxhighlighter.printing a{text-decoration:none!important;}
.syntaxhighlighter .line.highlighted.alt1,.syntaxhighlighter .line.highlighted.alt2{background-color:#e0e0e0!important;}
.syntaxhighlighter .gutter{color:#afafaf!important;}
.syntaxhighlighter .gutter .line{border-right:3px solid #6ce26c!important;}
.syntaxhighlighter .gutter .line.highlighted{background-color:#6ce26c!important;color:#FFF!important;}
.syntaxhighlighter.collapsed{overflow:visible!important;}
.syntaxhighlighter .script{font-weight:700!important;color:#069!important;background-color:none!important;}
.syntaxhighlighter .bold,.syntaxhighlighter.printing .script{font-weight:700!important;}
.syntaxhighlighter table,.syntaxhighlighter table td.code{width:100%!important;}
.syntaxhighlighter.collapsed table,.syntaxhighlighter .toolbar a.expandSource,.syntaxhighlighter.printing .toolbar{display:none!important;}
.syntaxhighlighter.collapsed .toolbar span a.expandSource,.syntaxhighlighter .toolbar span.title{display:inline!important;}
.syntaxhighlighter.printing .plain,.syntaxhighlighter.printing .plain a,.syntaxhighlighter.printing .break,.syntaxhighlighter.printing .break a,.syntaxhighlighter .line.highlighted.number,.syntaxhighlighter .toolbar a:hover,.syntaxhighlighter .plain,.syntaxhighlighter .plain a{color:#000!important;}
.syntaxhighlighter.printing .comments,.syntaxhighlighter.printing .comments a,.syntaxhighlighter .comments,.syntaxhighlighter .comments a{color:#008200!important;}
.syntaxhighlighter.printing .string,.syntaxhighlighter.printing .string a,.syntaxhighlighter.collapsed .toolbar a,.syntaxhighlighter .string,.syntaxhighlighter .string a{color:blue!important;}
.syntaxhighlighter.printing .keyword,.syntaxhighlighter .keyword{color:#069!important;font-weight:700!important;}
.syntaxhighlighter.printing .preprocessor,.syntaxhighlighter.printing .color1,.syntaxhighlighter.printing .color1 a,.syntaxhighlighter .preprocessor,.syntaxhighlighter .color1,.syntaxhighlighter .color1 a{color:gray!important;}
.syntaxhighlighter.printing .variable,.syntaxhighlighter .variable{color:#a70!important;}
.syntaxhighlighter.printing .value,.syntaxhighlighter .value{color:#090!important;}
.syntaxhighlighter.printing .functions,.syntaxhighlighter.printing .color2,.syntaxhighlighter.printing .color2 a,.syntaxhighlighter .functions,.syntaxhighlighter .color2,.syntaxhighlighter .color2 a{color:#ff1493!important;}
.syntaxhighlighter.printing .constants,.syntaxhighlighter .constants{color:#06c!important;}
.syntaxhighlighter.printing .color3,.syntaxhighlighter.printing .color3 a,.syntaxhighlighter.collapsed .toolbar a:hover,.syntaxhighlighter .color3,.syntaxhighlighter .color3 a{color:red!important;}
.syntaxhighlighter .line.alt1,.syntaxhighlighter .line.alt2{background-color:#FFF!important;}
* примечание: ссылка на код выше
  • Далее переходим к </ HEAD> тегу.
  • Копируем код ниже и вставляем его непосредственно перед </ HEAD> тегом:
<!-- Add-in CSS for syntax highlighting -->
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js" type="text/javascript"></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.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/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
  • Переходим к тегу </ BODY>.
  • Копируем код ниже и вставьте его непосредственно перед </ BODY>:
<!-- Add-in Script for syntax highlighting -->
<script type="text/javascript">SyntaxHighlighter.all();</script>
  • Сохраняем шаблон.
  • Всякий раз, когда вы хотите написать код в ваших сообщениях, нажмите кнопку "Изменить HTML " на вкладке редактора сообщений и пишите код между следующих тегов:
<pre class="brush: html;">

...Your html-escaped code goes here...

</pre>


✔ 22:28:00
Ярлыки: ,