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

от Иванова НатальяHTML
Дата: 21 сентября, 2013. Обновлено: 3 января, 2020
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

Перед тегом </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 ответа к «Подключаем Syntax Highlighter–подсветку синтаксиса кода»

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

    Ответить

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *