Приветствую вас, дорогой читатель! В прошлый раз я показал вам несколько способов подсветки синтаксиса кода - это SyntaxHighlighter от Алексея Горбачева и при помощи Highlight.js. В дополнение к этому набору, я добавлю ещё один - подсветка синтаксиса кода PRISM.
Подсветка синтаксиса PRISM для Blogger - это более легкая нагрузка на блог, молниеносно быстрая, все стили делаются с помощью CSS и так далее.
Подсветка синтаксиса кода PRISM SyntaxHighlighter для Blogger
Чтобы установить подсветку синтаксиса кода PRISM в блоггер, требуется только два простых шага, то есть установка стиля CSS и код JavaScript. Перед установкой кода CSS, выберите тему темную или светлую.
Светлая тема будет выглядеть вот так:
Код стиля:
/* 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;
} Темный стиль такой:
Код для вставки:
/*
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 type="text/javascript" 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>
Удачи друзья. До новых встреч.
С уважением, Сергей
