Как добиться подсветки синтаксиса кода в редакторе WordPress

Автор:
Nurlan Kemelbekov

Поставлена задача ответить на вопрос: как добиться подсветки синтаксиса кода в редакторе WordPress для улучшения визуального восприятия исходного текста. Ответ найден.

Все знают, как невзрачно выглядит редактор изменения php файлов  плагина или файлов шаблона темы WordPress.

Здесь весь html код смотрится так, как при открытии исходного кода страницы при нажатии ctrl+u. Думаю вы согласитесь, что было бы хорошо посмотреть на это все так, как это показывает текстовый редактор Notepad++.

Оказалось, что подсветки синтаксиса кода в редакторе WordPress можно достичь с помощью плагина Advanced Code Editor. Адрес ссылки выложу в конце статьи. Advanced Code Editor тот плагин, который позволяет интегрировать подсветку синтаксиса кода в редакторе в WordPress . На вкладке «Внешний вид»=>редактор позволяет добиться подсветки синтаксиса кода и редактировать вашу тему или плагины. В депозитарии wordpress можно найти плагины, с аналогичными функциями, например, Crayon Syntax Highlighter, но Advanced Code Editor намного легче, а работает не хуже.
По умолчанию, когда редактор отображает код в нормальном цвете, трудно определить, что есть что. После установки плагина можно заметить значительные изменения в отображении html кода редактором файлов темы сайта и php кода плагинов.  На снимке видно, что Advanced Code Editor совсем неплохо справился с задачей интегрирования подсветки синтаксиса кода robots-meta.php.Advanced Code Editor
Думаю согласитесь, что визуальное восприятие несравнимо лучше и работать в таком варианте редактора стало удобнее.

Скачать можно по ссылке: [http://wordpress.org/plugins/advanced-code-editor/]

Как выделить подсветку синтаксиса кода в WordPress без плагина

Выбор плагина WordPress для подсветки синтаксиса достаточно широк, но если проанализируете Ваш сайт, увидите множество файлов, таких как JavaScript и CSS, которые делают загрузку блога несколько медленным. Отсюда следует, что было бы лучше выделить подсветку кода в WordPress без плагина.

И если мы будем использовать предварительно отформатированный тег из HTML, сможем выделить синтаксис с помощью встроенного в WordPress варианта. Это один из лучших способов выделить синтаксис, не загружая большие файлы, которые могут отрицательно повлиять на скорость загрузки страницы WordPress блога.

Стилизация предварительно отформатированного тега.

Добавить следующие коды CSS в style.css файл, перейдя в Внешний вид> Редактор :
pre {
background: #f4f4f4;
font: 13px "Courier 10 Pitch", Courier, monospace;
line-height: 1.5;
margin-bottom: 2em;
overflow: auto;
padding: 0.75em 2em;
}
code, kbd {
font: 13px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

Вы можете отредактировать и изменить этот css под свои нужды так, как нравится Вам.

Бесплатный вариант форматирования подсветки синтаксиса кода WordPress без плагина

WordPress имеет много плагинов для форматирования или выделения кода для почти всех современных языков программирования, таких как C, C + +, C #, Java, PHP, Pyton, Perl, Matlab, Javascript, если перечислить некоторые из них.

Тем не менее, есть бесплатные WordPress сайты, которые не имеют доступа или контроля, чтобы установить плагины.
Решение этой проблемы вы можете искать в ПС Google или других, введя запрос, например, «код HTML», «форматирования кода» и т.д., и вы найдете очень богатый набор Online HTML форматирования. Мои любимые сайты:

http://ToHtml.com
http://hilite.me/
http://highlight.hohli.com/
http://s-c.me/scme.aspx

Вам нужно просто скопировать исходный код в качестве входных данных и затем скопировать и вставить конечный результат HTML в свой блог.

Как выделить синтаксис в WordPress HTML редакторе.

Если вы публикуете статью и создаете руководство по CSS или PHP, где присутствуют примеры html (или других) кодов, возможно, захотите показать их в наилучшем виде, чтобы пользователи могли быстро просмотреть их. Мы знаем, как плохо выглядит код, когда он рассматривается без какого-либо отступа и показа цвета.
Без цвета и соответствующих отступов код будет выглядеть совсем не интересно и в неприглядном для зрителей виде.
Сейчас проблемы, как сделать подсветку синтаксиса нет, поскольку для этого есть много доступных плагинов WordPess.
Да, и сам WordPress имеет встроенные возможности показа синтаксиса кода в <code> или <pre> тегах, (смотрите пример выше).
Чтобы решить эту проблему, разработчики построили свои собственные плагины подсветки синтаксиса для WordPress.
Но на этот раз я не хочу использовать плагин, мы будем внедрять этот сценарий в нашем шаблоне. И так, как выделить синтаксис в WordPress HTML редакторе без использования плагина.

1. Скачать основные скрипты здесь: http://alexgorbatchev.com/SyntaxHighlighter/download/
2. Добавить соответствующие файлы скриптов и css в папку шаблона, либо использовать специфические папки / специальная папка/JS и /специальная папка/ CSS.

3. Файле header.php добавить следующие строки:

<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/shCore.css" type="text/css" />
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/shCoreDefault.css" type="text/css" />

4. Внедрить код в конец страницы (перед wp_footer)
В итоге должно получиться так:

<script class="javascript" src="<?php bloginfo('template_directory'); ?>/js/shCore.js"></script>
<script class="javascript" src="<?php bloginfo('template_directory'); ?>/js/shBrushXml.js"></script>
<script class="javascript" src="<?php bloginfo('template_directory'); ?>/js/shBrushCss.js"></script>
<script type="text/javascript"> SyntaxHighlighter.all() </script>

Теперь, чтобы выделить синтаксис в WordPress HTML редакторе,  перед кодом вставить:

<pre class="brush:css">
/* некоторый код здесь */
</pre>

Рекомендую также прочитать статью «Бесплатный PHP, HTML, CSS, JavaScript редактор — Codelobster PHP Edition»



Вам также может понравиться:


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

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

* Copy This Password *

* Type Or Paste Password Here *

1 × 2 =

Я просто хотел сказать, как сильно я ценю Ваш комментарий на мой пост. Спасибо Вам !!