Подсветка синтаксиса PHP, HTML, JS и других на WordPress без плагина

Очень многие вебмастера задавались вопросом подсветки синтаксиса программного кода на своем сайте. Данный вопрос особенно актуален, если сайт на тему программ, скриптов и т.д. Сплошь и рядом на таких сайтах в статьях встречаются фрагменты кодов разных языков: PHP, HTML, JS, SQL и т.д. Простым текстом такой код выглядит не привлекательно и не читаемо для программиста.

Пример с подсветкой и без подсветки синтаксиса

Согласитесь, такая картина не внушает доверия! Как же сделать подсветку синтаксиса в статьях? В нашем случае на сайтах WordPress? На самом деле это очень простой вопрос, но в поисках ответов очень часто вебмастера ставят тяжелые плагины, которые либо мешают работе других плагинов, либо конфликтуют с другими плагинами после очередного обновления, перестают работают ни с того, ни с сего...

Подсветка синтаксиса WordPress без плагина

Чтобы подсветить синтаксис в статьях не обязательно изобретать велосипед, существует множество решений данного вопроса. Например, существуют такие решения как:

  • Google Code Prettify
  • Highlight.JS
  • SHJS
  • SyntaxHighlighter
  • eSHi
  • Quick Highlighter
  • Chili
  • JUSH

У не опытного вебмастера возникают сомнения в собственных силах для самостоятельного их подключения к сайту, поэтому зачастую на сайтах на платформе WordPress дело заканчивается установкой плагинов. Среди популярных плагинов для подсветки синтаксиса можно назвать:

  • SyntaxHighlighter
  • WP-Syntax
  • Syntax Highlighter Evolved
  • WordPress Rainbow Hilite

Собственно, все эти плагины и работают на базе вышеназванных библиотек для подсветки синтаксиса, но чем меньше вы используете на сайте плагинов, тем быстрее и безопаснее он работает! Поэтому давайте подключать "подсветку синтаксиса" без плагина!

Подсветка синтаксиса на базе Google Code Prettify

Рассмотрим пример подсветки синтаксиса на базе библиотеки от Google под названием "Google Code Prettify". Данная библиотека весит около 93 КБ, но распознает такие языки как Java, Python, Bash, SQL, HTML, XML, CSS, Javascript, Makefiles, Ruby, PHP, VB и другие. Этого даже больше чем достаточно. А подключается и настраивается она очень легко, никаких трудностей у Вас не должно возникнуть. Итак...

Подключение

1. Скачайте библиотеку, содержимое папки с файлами, распакуйте на сервере, например в папке "syntax";
2. Подключите в шапке Вашего сайта, как правило, в файле header.php, следующие строки:

<link href="http://ваш_сайт.ru/syntax/prettify.css" type="text/css" rel="stylesheet" />
<script src="http://ваш_сайт.ru/syntax/run_prettify.js">

Кстати, поскольку использование подсветки синтаксиса подразумевается лишь в содержимом публикаций, то есть, в одиночных записях, то код целомудренно будет использовать такой (чтобы не подключать библиотеку на тех страницах, где она не будет использоваться):

<?php if (is_single() )  { ?>
<link href="http://ваш_сайт.ru/syntax/prettify.css" type="text/css" rel="stylesheet" />
<script src="http://ваш_сайт.ru/syntax/run_prettify.js">
<?php } else { ?><?php } ?>
<?php } ?>
 

3. Все готово! Вы ждали большего?

Использование

Чтобы Google Code Prettify подсвечивала код в Ваших статьях, нужный код (текст кода) нужно вставлять в конструкцию вида <pre class="prettyprint">...</pre> или же <code class="prettyprint">...</code> в режиме html в редакторе WordPress.

Чтобы каждый раз не вводить эту конструкцию руками, создадим дополнительную кнопку в редакторе, которая будет вызывать нужную нам конструкцию для выделенного в редакторе фрагмента кода:

Для этого откроем файл под названием functions.php Вашей текущей темы и пропишем там следующий код (можно в конец файла):

add_action( 'admin_print_footer_scripts', 'appthemes_add_quicktags' );
function appthemes_add_quicktags() {
    if ( wp_script_is('quicktags') ){
?>
    <script type="text/javascript">
    QTags.addButton( 'eg_pre', 'pre', '<pre class="prettyprint">', '</pre>', 'q', 'Подсветка PHP', 111 );
    </script>
<?php
    }
}

После таких манипуляций в нашем редакторе появится кнопочка под названием "Pre":

Дополнительная кнопка в редакторе для синтаксиса.

Выделив нужный нам фрагмент текста, то есть кода, и нажав на кнопочку "Pre", нужный текст будет обрамлен конструкцией вида <pre class="prettyprint">...</pre> и после сохранения записи пользователи Вашего сайта увидят подсвеченный синтаксис!

Свои стили подсветки синтаксиса

Стили подсветки синтаксиса находятся в маленьком крошечном файле prettify.css. Вы можете изменить стили по своему усмотрению, либо использовать понравившийся Вам из числа классических. Ниже я приведу примеры:

Default (по умолчанию будет отображаться и без подключения файла со стилями)

Стиль CSS  по умолчанию

/* Pretty printing styles. Used with prettify.js. */
/* SPAN elements with the classes below are added by prettyprint. */
.pln { color: #000 }  /* plain text */

@media screen {
  .str { color: #080 }  /* string content */
  .kwd { color: #008 }  /* a keyword */
  .com { color: #800 }  /* a comment */
  .typ { color: #606 }  /* a type name */
  .lit { color: #066 }  /* a literal value */
  /* punctuation, lisp open bracket, lisp close bracket */
  .pun, .opn, .clo { color: #660 }
  .tag { color: #008 }  /* a markup tag name */
  .atn { color: #606 }  /* a markup attribute name */
  .atv { color: #080 }  /* a markup attribute value */
  .dec, .var { color: #606 }  /* a declaration; a variable name */
  .fun { color: red }  /* a function name */
}

/* Use higher contrast and text-weight for printable form. */
@media print, projection {
  .str { color: #060 }
  .kwd { color: #006; font-weight: bold }
  .com { color: #600; font-style: italic }
  .typ { color: #404; font-weight: bold }
  .lit { color: #044 }
  .pun, .opn, .clo { color: #440 }
  .tag { color: #006; font-weight: bold }
  .atn { color: #404 }
  .atv { color: #060 }
}

/* Put a border around prettyprinted code snippets. */
pre.prettyprint { padding: 2px; border: 1px solid #888 }


/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0 } /* IE indents via margin-left */
li.L0,
li.L1,
li.L2,
li.L3,
li.L5,
li.L6,
li.L7,
li.L8 { list-style-type: none }
/* Alternate shading for lines */
li.L1,
li.L3,
li.L5,
li.L7,
li.L9 { background: #eee }
Sunburst (by David Leibovic)

Стиль sunburs для подсветки синтаксиса

/* Pretty printing styles. Used with prettify.js. */
/* Vim sunburst theme by David Leibovic */
pre .str, code .str { color: #65B042; } /* string  - green */
pre .kwd, code .kwd { color: #E28964; } /* keyword - dark pink */
pre .com, code .com { color: #AEAEAE; font-style: italic; } /* comment - gray */
pre .typ, code .typ { color: #89bdff; } /* type - light blue */
pre .lit, code .lit { color: #3387CC; } /* literal - blue */
pre .pun, code .pun { color: #fff; } /* punctuation - white */
pre .pln, code .pln { color: #fff; } /* plaintext - white */
pre .tag, code .tag { color: #89bdff; } /* html/xml tag    - light blue */
pre .atn, code .atn { color: #bdb76b; } /* html/xml attribute name  - khaki */
pre .atv, code .atv { color: #65B042; } /* html/xml attribute value - green */
pre .dec, code .dec { color: #3387CC; } /* decimal - blue */
pre.prettyprint, code.prettyprint {
        background-color: #000;
        -moz-border-radius: 8px;
        -webkit-border-radius: 8px;
        -o-border-radius: 8px;
        -ms-border-radius: 8px;
        -khtml-border-radius: 8px;
        border-radius: 8px;
}
pre.prettyprint {
        width: 95%;
        margin: 1em auto;
        padding: 1em;
        white-space: pre-wrap;
}
/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0; color: #AEAEAE; } /* IE indents via margin-left */
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: none }
/* Alternate shading for lines */
li.L1,li.L3,li.L5,li.L7,li.L9 { }


@media print {
  pre .str, code .str { color: #060; }
  pre .kwd, code .kwd { color: #006; font-weight: bold; }
  pre .com, code .com { color: #600; font-style: italic; }
  pre .typ, code .typ { color: #404; font-weight: bold; }
  pre .lit, code .lit { color: #044; }
  pre .pun, code .pun { color: #440; }
  pre .pln, code .pln { color: #000; }
  pre .tag, code .tag { color: #006; font-weight: bold; }
  pre .atn, code .atn { color: #404; }
  pre .atv, code .atv { color: #060; }
}
Doxy (by Robert Sperberg)

Стиль Doxy для подсветки синтаксиса

/* Doxy pretty-printing styles. Used with prettify.js.  */


pre .str, code .str { color: #fec243; } /* string  - eggyolk gold */
pre .kwd, code .kwd { color: #8470FF; } /* keyword - light slate blue */
pre .com, code .com { color: #32cd32; font-style: italic; } /* comment - green */
pre .typ, code .typ { color: #6ecbcc; } /* type - turq green */
pre .lit, code .lit { color: #d06; } /* literal - cherry red */
pre .pun, code .pun { color: #8B8970;  } /* punctuation - lemon chiffon4  */
pre .pln, code .pln { color: #f0f0f0; } /* plaintext - white */
pre .tag, code .tag { color: #9c9cff; } /* html/xml tag  (bluey)  */
pre .htm, code .htm { color: #dda0dd; } /* html tag  light purply*/
pre .xsl, code .xsl { color: #d0a0d0; } /* xslt tag  light purply*/
pre .atn, code .atn { color: #46eeee; font-weight: normal;} /* html/xml attribute name  - lt turquoise */
pre .atv, code .atv { color: #EEB4B4; } /* html/xml attribute value - rosy brown2 */
pre .dec, code .dec { color: #3387CC; } /* decimal - blue */


a {
  text-decoration: none;
}
pre.prettyprint, code.prettyprint {
  font-family:'Droid Sans Mono','CPMono_v07 Bold','Droid Sans';
  font-weight: bold;
  font-size: 9pt;
  background-color: #0f0f0f;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  -o-border-radius: 8px;
  -ms-border-radius: 8px;
  -khtml-border-radius: 8px;
  border-radius: 8px;
}  /*  background is black (well, just a tad less dark )  */


pre.prettyprint {
  width: 95%;
  margin: 1em auto;
  padding: 1em;
  white-space: pre-wrap;
}


pre.prettyprint a, code.prettyprint a {
   text-decoration:none;
}
/* Specify class=linenums on a pre to get line numbering; line numbers themselves are the same color as punctuation */
ol.linenums { margin-top: 0; margin-bottom: 0; color: #8B8970; } /* IE indents via margin-left */
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: none }
/* Alternate shading for lines */
li.L1,li.L3,li.L5,li.L7,li.L9 { }


/* print is mostly unchanged from default at present  */
@media print {
  pre.prettyprint, code.prettyprint { background-color: #fff;  }
  pre .str, code .str { color: #088; }
  pre .kwd, code .kwd { color: #006; font-weight: bold; }
  pre .com, code .com { color: #oc3; font-style: italic; }
  pre .typ, code .typ { color: #404; font-weight: bold; }
  pre .lit, code .lit { color: #044; }
  pre .pun, code .pun { color: #440; }
  pre .pln, code .pln { color: #000; }
  pre .tag, code .tag { color: #b66ff7; font-weight: bold; }
  pre .htm, code .htm { color: #606; font-weight: bold; }
  pre .xsl, code .xsl { color: #606; font-weight: bold; }
  pre .atn, code .atn { color: #c71585;  font-weight: normal; }
  pre .atv, code .atv { color: #088;  font-weight: normal; }
}
Desert (by techto…@)

Стиль Desert для подсветки синтаксиса

/* desert scheme ported from vim to google prettify */
pre.prettyprint { display: block; background-color: #333 }
pre .nocode { background-color: none; color: #000 }
pre .str { color: #ffa0a0 } /* string  - pink */
pre .kwd { color: #f0e68c; font-weight: bold }
pre .com { color: #87ceeb } /* comment - skyblue */
pre .typ { color: #98fb98 } /* type    - lightgreen */
pre .lit { color: #cd5c5c } /* literal - darkred */
pre .pun { color: #fff }    /* punctuation */
pre .pln { color: #fff }    /* plaintext */
pre .tag { color: #f0e68c; font-weight: bold } /* html/xml tag    - lightyellow */
pre .atn { color: #bdb76b; font-weight: bold } /* attribute name  - khaki */
pre .atv { color: #ffa0a0 } /* attribute value - pink */
pre .dec { color: #98fb98 } /* decimal         - lightgreen */


/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0; color: #AEAEAE } /* IE indents via margin-left */
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: none }
/* Alternate shading for lines */
li.L1,li.L3,li.L5,li.L7,li.L9 { }


@media print {
  pre.prettyprint { background-color: none }
  pre .str, code .str { color: #060 }
  pre .kwd, code .kwd { color: #006; font-weight: bold }
  pre .com, code .com { color: #600; font-style: italic }
  pre .typ, code .typ { color: #404; font-weight: bold }
  pre .lit, code .lit { color: #044 }
  pre .pun, code .pun { color: #440 }
  pre .pln, code .pln { color: #000 }
  pre .tag, code .tag { color: #006; font-weight: bold }
  pre .atn, code .atn { color: #404 }
  pre .atv, code .atv { color: #060 }
}
Sons-Of-Obsidian (by Alex Ford)

Стиль Sons-Of-Obsidian для подсветки синтаксиса

/*
 * Derived from einaros's Sons of Obsidian theme at
 * http://studiostyl.es/schemes/son-of-obsidian by
 * Alex Ford of CodeTunnel:
 * http://CodeTunnel.com/blog/post/71/google-code-prettify-obsidian-theme
 */


.str
{
    color: #EC7600;
}
.kwd
{
    color: #93C763;
}
.com
{
    color: #66747B;
}
.typ
{
    color: #678CB1;
}
.lit
{
    color: #FACD22;
}
.pun
{
    color: #F1F2F3;
}
.pln
{
    color: #F1F2F3;
}
.tag
{
    color: #8AC763;
}
.atn
{
    color: #E0E2E4;
}
.atv
{
    color: #EC7600;
}
.dec
{
    color: purple;
}
pre.prettyprint
{
    border: 0px solid #888;
}
ol.linenums
{
    margin-top: 0;
    margin-bottom: 0;
}
.prettyprint {
    background: #000;
}
li.L0, li.L1, li.L2, li.L3, li.L4, li.L5, li.L6, li.L7, li.L8, li.L9
{
    color: #555;
    list-style-type: decimal;
}
li.L1, li.L3, li.L5, li.L7, li.L9 {
    background: #111;
}
@media print
{
    .str
    {
        color: #060;
    }
    .kwd
    {
        color: #006;
        font-weight: bold;
    }
    .com
    {
        color: #600;
        font-style: italic;
    }
    .typ
    {
        color: #404;
        font-weight: bold;
    }
    .lit
    {
        color: #044;
    }
    .pun
    {
        color: #440;
    }
    .pln
    {
        color: #000;
    }
    .tag
    {
        color: #006;
        font-weight: bold;
    }
    .atn
    {
        color: #404;
    }
    .atv
    {
        color: #060;
    }
}

Собственно и все! С задачей подсветки синтаксиса популярных языков программирования на сайтах WordPress мы справились без использования какого-либо плагина! Если функционала библиотеки Google Code Prettify Вам показалось мало, всегда можно почитать о тонких настройках тут. Всем пока! Не загромождайте свой сайт на WordPress ненужными плагинами! Кстати, на момент написания данного руководства, на данном сайте использовалась как раз библиотека Google Code Prettify!

Оцените материал:
Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5 (4 голоса, рейтинг: 4,75 из 5)
Загрузка...

Вячеслав - типичный интернетчикВячеслав Скоблей (ака files) - типичный интернетчик. Скитаюсь интернетом, пишу на PHP, увлекаюсь созданием веб-сайтов на Wordpress, решаю многочисленные проблемы, которые до появления интернета не существовали...

Специализируюсь на безопасности сайтов: защищаю сайты от атак и взломов, занимаюсь лечением вирусов на сайтах и профилактикой...

Наверняка у Вас есть вопросы, просьбы или пожелания. Не стесняйтесь спросить, я отвечаю всегда быстро...

2 комментарий

  1. Павел says:

    Некоторые библиотеки даже не знал, спасибо. В дополнение могу рекомендовать Prism JS, довольно лёгкий скрипт с красивой подсветкой кода.

    Для WordPress я набросал инструкцию:
    https://onstartup.ru/articles/wordpress/podsvetka-koda-na-sajte-wordpress/

  2. Стас says:

    К сожалению не у всех будет работать. У меня на ta-ty-sho.com подключение стиля prettify.css и js run_prettify.js от Google весь сайт отрубает. Пробовал немного шаманить с кодом, но без результатно. Видно конфликтует с другими схожими стилями на сайте. Потому если решили оформить себе такое, то делайте осторожно и обязательно с бэкапами файлов которые изменяете.

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

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