2013-09-21

Подключаем Syntax Highlighter–подсветку синтаксиса кода

SyntaxHighlighter
Syntax Highlighter, или Highlight.js очень просто подключается очень просто к любому сайту, в том числе на блог Blogger. Так что вы можете воспользоваться данной инструкцией для подключения подсветки синтаксиса для любого сайта или блога (ucoz, joomla, wordpress).
Если вы публикуете в своем блоге коды, с которыми вы делитесь со своими читателями, то оформить их вы можете с помощью Syntax Highlighter. Вот таким образом это выглядит так (демо1):
  как подключить  Syntax Highlighter  как на демо 1.

или демо 2 (подсветка синтаксиса с возможностью быстрого копирования и печатью):

 - размещаем  Syntax Highlighte - темную тему.

Как подключить  Syntax Highlighter к своему блогу?

Светлая тема:
SyntaxHighlighter
  • Для 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>
Темная тема:
SyntaxHighlighter

Перед </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 тема:
SyntaxHighlighter
<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, как во втором примере (demo2)



Перед тегом </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 = &#39;http://alexgorbatchev.com/pub/sh/2.1.382/scripts/clipboard.swf&#39;;
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;
}

2 комментария :

Yulia Aleksandrovna комментирует...

НИЧЕГО не поняла...((

Mycrib комментирует...

Что именно не понятно?
Выбираете тему SyntaxHighlighter из предложенных (светлая, темная...). Под каждой темой предложен код. Его копируете идете во вкладку Шаблон -> изменить html.
Ставите курсор в любое место кода шаблона блога, нажимаете CTRL + F для поиска, ищем </head>
Перед </head> вставляем скопированный код.

Отправить комментарий

Комментарии, содержащие ненормативную лексику, спам, оскорбления, публиковаться не будут. Ели вы хотите опубликовать код в комментарии, то воспользуйтесь encoder HTML
Публикуя комментарии, вы соглашаетесь с политикой конфиденциальности