(Последнее обновление: 05.09.2017)

Приветствую вас, дорогой читатель! В прошлый раз я показал вам несколько способов подсветки синтаксиса кода - это SyntaxHighlighter от Алексея Горбачева и при помощи Highlight.js. В дополнение к этому набору, я добавлю ещё один - подсветка синтаксиса кода PRISM.

Подсветка синтаксиса PRISM для Blogger - это более легкая нагрузка на блог, молниеносно быстрая, все стили делаются с помощью CSS и так далее.

Подсветка кода

Подсветка синтаксиса кода

Подсветка синтаксиса кода PRISM SyntaxHighlighter для Blogger

Чтобы установить подсветку синтаксиса кода PRISM в блоггер, требуется только два простых шага, то есть установка стиля CSS и код JavaScript. Перед установкой кода CSS, выберите тему темную или светлую.

Светлая тема будет выглядеть вот так:

PRISM

Подсветка синтаксиса кода PRISM

Код стиля:

/* Tema : LightSyntax */ 
pre {
margin:15px 15px 15px 0;
padding:10px;clear:both;
background:#f2f2f2;
color:#666;
border:1px solid #ddd;
overflow:auto;
font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
font-weight: normal !important;
font-style: normal !important;
font-size: 12px !important;
}
code {
color:#126AAF;
font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
font-weight: normal !important;
font-style: normal !important;
font-size: 13px !important;
}
code .token.punctuation {
  color:#83405A;
}
pre code .token.punctuation {
  color:#800000;
}
code .token.comment,
code .token.prolog,
code .token.doctype,
code .token.cdata {
  color:#008200;
}
code .namespace {
  opacity:.8;
}
code .token.property,
code .token.tag,
code .token.boolean,
code .token.number {
  color:#881280;
}
code .token.selector,
code .token.attr-name,
code .token.string {
  color:#986A7C;
}
pre code .token.selector,
pre code .token.attr-name,
pre code .token.string {
  color:#994500;
}
code .token.entity,
code .token.url,
pre .language-css .token.string,
pre .style .token.string {
  color:#994500;
}
code .token.operator {
  color:#878A85;
}
code .token.atrule,
code .token.attr-value {
  color:#48D30F;
}
pre code .token.atrule,
pre code .token.attr-value {
  color:#227BC0;
}
code .token.keyword {
  color:#881280;
  font-style:italic;
}
code .token.comment {
  font-style:italic;
}
code .token.regex {
  color:#B43D3D;
}
code .token.important {
  font-weight:bold;
}
code .token.entity {
  cursor:help;
}

Темный стиль такой:

css

Подсветка синтаксиса кода PRISM

Код для вставки:

/*
Tema RDark oleh DTE:] berdasarkan tema-tema SyntaxHighligter dari Alex Gorbatchev
URL: http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/rdark.html
*/
pre {
  padding:.5em 1em;
  margin:.5em 0;
  white-space:pre;
  word-wrap:normal;
  overflow:auto;
  background-color:#1B2426;
}
code {
  font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;
  line-height:16px;
  color:#B43D3D;
  background-color:#eee;
  border:1px solid #ddd;
  padding:1px 2px;
}
pre code {
  display:block;
  background:none;
  border:none;
  color:#B9BDB6;
  direction:ltr;
  text-align:left;
  word-spacing:normal;
  padding:0 0;
}
code .token.punctuation {
  color:#83405A;
}
pre code .token.punctuation {
  color:#B9BDB6;
}

code .token.comment,
code .token.prolog,
code .token.doctype,
code .token.cdata {
  color:#435A4D;
}
code .namespace {
  opacity:.8;
}
code .token.property,
code .token.tag,
code .token.boolean,
code .token.number {
  color:#5BA1CF;
}

code .token.selector,
code .token.attr-name,
code .token.string {
  color:#986A7C;
}
pre code .token.selector,
pre code .token.attr-name,
pre code .token.string {
  color:#E0E8FF;
}
code .token.entity,
code .token.url,
pre .language-css .token.string,
pre .style .token.string {
  color:#E0E8FF;
}
code .token.operator {
  color:#878A85;
}
code .token.atrule,
code .token.attr-value {
  color:#48D30F;
}

pre code .token.atrule,
pre code .token.attr-value {
  color:#48E638;
}
code .token.keyword {
  color:#47A1CF;
  font-style:italic;
}
code .token.comment {
  font-style:italic;
}
code .token.regex {
  color:#B43D3D;
}
code .token.important {
  font-weight:bold;
}
code .token.entity {
  cursor:help;
}

Для установки стиля темы зайдите в панель управления Blogger - Шаблон - Изменить HTML. В шаблоне находим тег: ]]></b:skin> и чуть выше добавляем код выбранной темы. Далее, находим тег </body> и над ним вставляем скрипт:

<script  src='http://reader-download.googlecode.com/svn/trunk/prism.js'></script>

Сохраните шаблон. Теперь как использовать:

Каждый язык имеет свой тип класса, соответственно:

 HTML, XML, PHP ⇒ язык разметки
 CSS ⇒ язык CSS
 JavaScript ⇒ язык JavaScript

Код заключаем в теги вот так:

<pre><code class="language-markup"> ...Ваш код HTML, XML, PHP здесь ... </code></pre>
<pre><code class="language-css"> ...Ваш код CSS здесь ... </code></pre>
<pre><code class="language-javascript"> ...Ваш код JavaScript здесь ... </code></pre>

Удачи друзья. До новых встреч.

С уважением, Сергей