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

SyntaxHighlighter
Syntax Highlighter, или Highlight.js очень просто подключается очень просто к любому сайту, в том числе на блог Blogger. Так что вы можете воспользоваться данной инструкцией для подключения подсветки синтаксиса для любого сайта или блога (ucoz, joomla, wordpress).
Если вы публикуете в своем блоге коды, с которыми вы делитесь со своими читателями, то оформить их вы можете с помощью Syntax Highlighter.
как подключить  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

Подключаем 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 = &#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: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>


Пример:

<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> для Blogger или в style.css для вордпрес):

.code_sample {
border: 1px solid #DADADA;
font-size: 12px;
margin-bottom: 10px;
margin-top: 10px;
}

Оцените статью
Добавить комментарий

  1. Yulia Aleksandrovna

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

    Ответить
  2. Mycrib

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

    Ответить