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>