Подключаем Syntax Highlighter–подсветку синтаксиса кода
Syntax Highlighter, или Highlight.js очень просто подключается очень просто к любому сайту, в том числе на блог Blogger. Так что вы можете воспользоваться данной инструкцией для подключения подсветки синтаксиса для любого сайта или блога (ucoz, joomla, wordpress).
Если вы публикуете в своем блоге коды, с которыми вы делитесь со своими читателями, то оформить их вы можете с помощью Syntax Highlighter.
как подключить Syntax Highlighter как на демо 1.или демо 2 (подсветка синтаксиса с возможностью быстрого копирования и печатью):
- размещаем Syntax Highlighte - темную тему.
Как подключить Syntax Highlighter на сайт
Светлая тема:
- Для Blogger – в редакторе html блога находим тег </head> и перед ним вставляем код, предложенный ниже,
- Для других сайтов также необходимо добавить в тег <head> код:
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
<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/shBrushCss.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/shBrushXml.js' type='text/javascript'></script>
<script language="javascript" type="text/javascript">
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>
Темная тема:
Перед </head> добавляем:
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeRDark.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.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/shBrushXml.js' type='text/javascript'></script>
<script language="javascript" type="text/javascript">
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>
Midnight тема:
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeMidnight.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.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/shBrushXml.js' type='text/javascript'></script>
<script language="javascript" type="text/javascript">
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>
Как подключить Syntax Highlighter
Перед тегом </head> вставляем код:
<link href='http://alexgorbatchev.com/pub/sh/2.1.382/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/2.1.382/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shYouBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPerl.js' type='text/javascript'/>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.382/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>
Как пользоваться Syntax Highlighter
Теперь для того, чтобы встроить подсветку синтаксиса с кодом, нужно в сообщение встроить один из кодов:
Для css кода:
<pre class="brush:css;">Добавляем css код здесь</pre>
Для html кода:
<pre class="brush:html;">Добавляем html код здесь</pre>
Для JavaScript кода:
<pre class="brush:javascript;">Добавляем JavaScript код здесь-</pre>
Универсальный код:
..
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python">Добавляем код здесь</pre>
Пример:
<pre class="brush:javascript;">
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeMidnight.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.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/shBrushXml.js' type='text/javascript'></script>
<script language="javascript" type="text/javascript">
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>
-</pre>
Примечание только для пользователей Blogspot: если вы хотите скрывать подсветку синтаксиса на главной странице, и хотите, чтобы она отображалась на страницах сообщений, то при подключении SyntaxHighlighter (на этапе добавления кода в тег <head>) добавьте:
<b:if cond='data:blog.pageType == "item"'>код SyntaxHighlighter </b:if>
Вы можете несколько модифицировать внешний вид подсветки синтаксиса кода, например, добавить рамку, изменить размер и цвет шрифта, отступы. Для этого нужно добавить стиль (добавляем перед отрезком кода ]]></b:skin>):
.code_sample {
border: 1px solid #DADADA;
font-size: 12px;
margin-bottom: 10px;
margin-top: 10px;
}
НИЧЕГО не поняла…((
Что именно не понятно?
Выбираете тему SyntaxHighlighter из предложенных (светлая, темная…). Под каждой темой предложен код. Его копируете идете во вкладку Шаблон -> изменить html.
Ставите курсор в любое место кода шаблона блога, нажимаете CTRL + F для поиска, ищем </head>
Перед </head> вставляем скопированный код.