ГлавнаяWordpressПодсветка кода wordpress в редакторе

Подсветка синтаксиса в WordPress. Как добавить код в сообщения? Подсветка кода wordpress в редакторе


5 лучших бесплатных плагинов для вставки и подсветки кода -

Отображение кода в WordPress – нелёгкая работа. Когда вы используете CMS WordPress, вы сталкиваетесь с проблемой вставки кода в вашу запись на блоге. Проблема в том, что WordPress по умолчанию изменяет HTML код. Это вызывает трудности у тех, кто хотел бы отобразить HTML код в своих записях на блоге. Это, в основном, разработчики и блоггеры, связанные с программированием, кто, например, хочет обучить своих пользователей работе с определёнными HTML кодами.

Для того, чтобы получить функционал для подсветки кода в записи WordPress, нужно установить определенный плагин. Есть очень много плагинов для вставки и подсветки кода и кода в ваших записях, поэтому мы составили список лучших бесплатных плагинов для подсветки кодов для WordPress.

Содержание

1 – Crayon Syntax Highlighter

Crayon Syntax Highlighter – это лучший способ показать код в красочном виде. Как следует из названия, этот плагин показывает отображаемый код в красочном виде. Crayon Syntax Highlighter помогает пользователю понять код ясно, так как он окрашивает разные атрибуты кода в разные цвета. Также он показывает код с номерами строк, чтобы показать длину кода.

Особенности:

2 – Syntax Highlighter Evolved

Syntax Highlighter Evolved является одним из лучших и очень удобным плагином для подсветки кодов в ваших записях в WordPress. Этот плагин делает только то, для чего он предназначен, то есть отображает коды и ничего более. Этот плагин также показывает номера строк, чтобы определить длину кода.

Особенности:

3 – Advanced Code Editor

Какой УЖАС ! ! !«advanced-code-editor»Автор больше не поддерживает развитие своего творения 8(

Advanced Code Editor – плагин для подсветки кода, который имеет 11 тем для подсветки. Этот плагин поддерживает такие языки, как PHP, HTML, CSS , JavaScript. Он также позволяет посмотреть исходный код в своём редакторе. Этот плагин также имеет функцию автоматического заполнения, поддерживающую 3500 функций WordPress.

Особенности:

4 – WP Syntax

WP Syntax – это плагин, который даёт простой взгляд на отображаемый код. Этот плагин даёт вам свободу выбора – отображать номера строк или нет. WP Syntax поддерживает все основные языки, используемые для кода, позволяет избегать конфликтов с большинством сторонних плагинов.

Особенности:

5 – Fv Code Highlighter

Плагин Fv Code Highlighter – для тех, кто любит код в цвете, этот плагин использует такую же цветовую схему, как и Adobe Dreamweaver. Если вы работаете в Dreamweaver, то этот плагин покажется вам знакомым. Этот плагин также поддерживает множество языков, таких как PHP, JavaScript, CSS, HTML, XML, XHTML. Вы можете изменить цветовую схему отображаемого кода путём внесения изменений в CSS плагина. Но плагин достаточно тяжёлый, хотя автор с каждым обновлением уменьшает нагрузку от него.

Особенности:

ЗАКЛЮЧЕНИЕЭто лучшие бесплатные плагины для вставки и подсветки кода для WordPress. Если вы хотите пополнить этот список или просто хотите сказать нам, какие плагины вы хотите использовать, то можете использовать раздел комментариев внизу для того, чтобы сообщить нам об этом.

php-coding.ru

Подсветка синтаксиса в WordPress. Как добавить код в сообщения? » PandaCoder

А никак! O_O 

Сегодня провозившись очередные 4 часа, изучая всевозможные способы вставки кода в сообщения, в очередной раз пришел в выводу, что универсального способа нет. Вы конечно можете вставить PHP или Java код и он отлично подсветится, но восторг продлится не долго (хотя может длиться вечность, до тех пор…) Как только вы захотите вставить xml или html и подсветить его, то начинаются сложности.

Проблема в том, что визуальный редактор удаляет непонятные ему теги. Причем не только теги, но и некорректные атрибуты у известных ему тегов. Поэтому xml, который вы поместили внутрь тегов <pre></pre>, чтобы он подсветился, будет либо удален (если вы переключились из режима HTML в визуальный), либо будет с экранированными спец символами, и вместо <merge> вы увидите &lt;merge&gt;.

Замена визуального редактор на TinyMCE Advanced, Ultimate TinyMCE или CKE Editor не дала результата. Продолжая гуглить, я нашел плагин WP-Syntax, который для тега <pre> обрабатывает атрибут escaped, и если вы напишете <pre lang=”xml” escaped=”true”>&lt;merge&gt;</pre>, то все заэкранированные символы будут отображены корректно. “Вот ОНО!!!” – подумал я. Но не тут то было, как только вы из режима HTML переключитесь в визуальный, то визуальный редактор избавится от непонятного ему атрибута escaped и код опять примет удручающий вид.

Мое решение.

DropBox. Причем тут дропбокс спросите вы? А вот причем. Для подсветки синтаксиса я использую плагин Crayon Syntax Highlighter, он умеет вставлять в сообщения и подсвечивать код, который находится по заданному URL. Поэтому внутри сообщения вы можете написать <crayon lang=”xml” url=”http://dl.dropbox.com/u/99999999/code/супер_код.xml” /> и все. Потом конечно же, когда статья завершена я загружаю эти файлы с кодом на сайт в специально созданную для этого папочку и исправляю ссылки в тегах <crayon>. Немного сложновато, но зато работает 100%.

Не нужно больше беспокоиться, что случайно переключился в визуальный режим и часть кода опять пропала или выглядит не так как хотелось бы. А благодаря дропбоксу можно спокойно редактировать файлы с кодом у себя на машине любимым редактором. Остается по завершении написания поста перекинуть файлы из дропбокса в папочку на сервер (а можно так и оставить в дропбоксе) и поправить ссылки.

 

www.pandacoder.com

Подсветка html кода в wordpress.

Часто при публикации записей в на блоге требуется показать пример написания того или иного html кода. Вроде бы ничего сложного, написал и опубликовал. Но не так все просто. Установленный в wordpress визуальный редактор TinyMce имеет свой собственное мнение насчет того, что и как опубликовывать, то есть данный редактор попросту затрудняет нормальное отображение html кода в постах вашего wordpress блога.

Это конечно можно легко исправить просто меняя символы «< >» на соответствующие им эквиваленты ‘&It’ и ‘>’, при этом помещая пример нужного кода в блоки . Но, согласитесь, что это все довольно долго и муторно, да и к тому же если вам нужно будет оформить код красиво и упростить его восприятие, например, выделить комментарии или теги другим цветом, то у вам придется изрядно помучится.

Но, для того чтобы не выполнять всех этих кошмарных операций вручную нам необходим соответствующий плагин. И он конечно — же существует — это SyntaxHighlighter Plus, который сводит все бесполезные усилия по подсветке нужного html кода к минимуму и выдает красивый html код без каких — либо изменений. Если вы рассказываете своим читателям о том, как раскрутить блог на wordpress, то этот плагин вам обязательно понадобится.

Для того чтобы установить данный плагин нам необходимо выполнить несколько простых действий:

Стандартно устанавливаем плагин через админку блога или заливаем через ftp. Далее активируем и приступаем к ознакомлению. Плагин использует подсветку синтаксиса с помощью функции GeSHi. С помощью встроенных настроек выбираем необходимый стиль оформления. Например такой

<div>

Чтобы код отобразился в такой удобной для восприятия рамке его необходимо заключить в [source=’php’]  [«/source»] (без внутренних кавычек).

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

Вообщем таким вот нехитрым способом вы сможете рассказать и наглядно показать своим читателям необходимую информацию.

steepbend.ru

Кодинг » WordPress подсветка программного кода без плагина

Для того что бы на своём сайте реализовать подсветку программного кода в статьях,необходимо скачать с этого сайта http://alexgorbatchev.com/SyntaxHighlighter/download/ архив на данный момент это версия 2.1.382 .

Загрузить этот архив на ваш сайт, у себя в корневой папке сайта я создал папку syntaxhighlighter и распаковал в неё архив.

В папке syntaxhighlighter находятся три папкиПапка scriptsВ ней находятся файлы каждый из которых отвечает за подсветку какого либо языка программирования.То есть файл shBrushPhp.js отвечает за подсветку PHP

shBrushAS3.js shBrushBash.js shBrushColdFusion.js shBrushCpp.js shBrushCSharp.js shBrushCss.js shBrushDelphi.js shBrushDiff.js shBrushErlang.js shBrushGroovy.js shBrushJava.js shBrushJavaFX.js shBrushJScript.js shBrushPerl.js shBrushPhp.js shBrushPlain.js shBrushPowerShell.js shBrushPython.js shBrushRuby.js shBrushScala.js shBrushSql.js shBrushVb.js shBrushXml.js shCore.js shLegacy.js clipboard.swf

Папка src В ней файлы для работы системы

shCore.js shLegacy.js

Папка styles В ней стили подсветки кода

shCore.css shThemeDefault.css shThemeDjango.css shThemeEclipse.css shThemeEmacs.css shThemeFadeToGrey.css shThemeMidnight.css shThemeRDark.css help.png magnifier.png page_white_code.png page_white_copy.png printer.png

Для того что бы всё начало работать нужно прописать между тегами head вот такой код

[xml]

[/xml]

Рассмотрим этот код подробнее

Строки 1 и 3 загружают файлы необходимые для работы.Строка 2 загружает стиль отображения окошка с кодом (Все стили в папке styles).Вот так могут выглядеть разные стили оформления:other_stylesСтроки 4,5,6,7,8,9 загружают файлы которые отвечают за подсветку конкретного языка, этот список можно дополнить или уменьшить в зависимости от того количества языков которое вы планируете использовать (Весь список в папке scripts).

Теперь что бы добавить код в статью нужно в редакторе переключиться в режим текст и размещать программный код между тегами

<pre></pre>

Что бы каждый раз это не прописывать в ручную можно добавить дополнительные кнопки в редактор,при нажатии на которые выделенный текст будет помещен в нужный нам тег.Как добавить кнопку в текстовый редактор можно прочитать в этой статье.

class="brush: php;" --- указываем программный язык , в данном случае php так же можно ещё указать и другие параметры class="brush: php; highlight: [1, 4];" --- подсветит нужные строки class="brush: php; gutter: false;" --- запретит нумерацию строк class="brush: php; toolbar: false;" --- запретит вывод панели инструментов class="brush: php; wrap-lines: false;" --- запретит перенос на новую строку

coding.msait.ru

Igorka: Wordpress - подсветка кода

Все началось с замечания, что на сайте плохо читается код команд, который, я иногда привожу в качестве примеров. Здесь трудно не согласится - выглядит не очень. Сейчас когда публикую лекции по по курсу Linux и дошел до темы bash подсветка кода стала просто необходимой. Тему менять не очень хотелось, поэтому хоть и не сразу, но все же решил поискать плагин на эту тему. Так как наглядный пример отформатированного и подсвеченного кода был, то не составило труда узнать, что это за плагин:

Плагин syntaxhighliter

Рисунок 1

На wordpress.org нашел плагин SyntaxHighlighter Evolved, закачал, активировал в Wordpress (кстати версия 2.7.1), но в настройках плагин не появился. Немного почитал о возможной несовместимости с данной версией Wordpress, так как в readme было написано, что “Requires at least: 2.7″, то есть должно было работать. Отключать все плагины я не захотел, так как даже если бы кто-то из них и мешал, пришлось бы отказаться именно от SyntaxHighlighter Evolved, так как те что уже есть мне все нужны.

Пришлось перейти к следующем найденному плагину SyntaxHighlighter Plus. На сайте wordpress.org прочел, что это расширенная версия на основе плагина SyntaxHighlighter. Этот плагин установился и даже появилась страница с настройками, правда настройка была всего одна - выбор темы. Начал проверять как работает, переделал одну из статей ранее написанных - все хорошо. Но в новой статье попался кусочек вставляемого кода в котором был символ сравнения - “больше” и вот он при сохранении черновика начал преобразовываться в эскейп-последовательность, что меня никак не устраивало. Соответственно и знак “меньше” тоже. Плагин написан на javascript которого я не знаю, поэтому самому исправить не получилось.

Пришлось смотреть дальше. А дальше был wp-syntax и codecolorer. Оба основаны на проекте GeSHi. То есть написаны на php, а не на javascript. Уже сейчас не скажу в чем между ними отличия, вроде как wp-syntax поновее будет, но я остановился на codecolorer. Прочесть об этом плагине рекомендую на странице автора. В общем пока остановился на этом плагине, так как подсветка кода работает корректно и все символы отображаются как нужно. Вот пример:

12345

#!/bin/bashfor ((i=1;i<7;i++))do    echo "Спасибо автору за codecolorer"done

Думаю теперь так симпатичнее будет :)

igorka.com.ua

Подсветка программного кода в WordPress

Создал программист, значится, себе пещеру. И дал ей название "Пещера программиста". А что же это за пещера программиста, если встроенные возможности настенной живописи не дают подсвечивать программный код? Верно - это неправильная пещера. Крикнул тогда программист грустно в гугль - "как мне подсветить свой код на стене ?". И вернулась ему туева куча ссылок. Долго рыскал он по ссылкам этим и вот что накопал.....

Вначале  попался интересный обзор плагинов  от Tod. Но в отличии от Tod`а, мне понравился SyntaxHighlighter Plus. Подкупил он меня своим визуальным оформлением, ну и плюс такими "рюшечками", как просмотр кода в отдельном окне , копирование текста, печать кода.  Первые тесты показали - плагин то что надо.  Но протестировав дальше попалась неприятная особенность - при редактировании в визуальном редакторе, когда вставляешь внутри секции кода символ  '<' , а потом переключаешься в режим HTML и обратно в визуальный редактор, символ заменяется на его HTML код.  А это очень неудобно , ведь надо постоянно проверять - не испортил ли что при последнем редактировании.Кстати, пользовался тогда (и сейчас) TinyMCE Advanced. Насколько я знаю, в нем нет возможности отключить форматирование кода, заключенного в определенный блок. Использовал когда то такую возможность в Drupal в FCKeditor. Но, как назло, версии FCKeditor под последний WordPress 2.7 не было.В итоге  SyntaxHighlighter Plus меня разочаровал.Поскольку обзор от Tod по меркам IT был старым, то я решил присмотреться к другим, рассмотренным им плагинам. Но мнение о них осталось прежним, к тому же часть из них не поддерживает WP 2.7. Но чуть позже ( в конце декабря) я изменил свое мнение о CodeColorer в связи с выходом новой версии (об этом ниже).

Следующим шагом был поиск на странице плагинов официального сайта WordPress. Вот тут то и открылось все тайное -) . Мое внимание привлекли 3 плагина. Отмечу вначале, что все они построены на GeSHi, так что выбор языков для подсветки у них одинаков.

WP-CODEBOX ( страница плагина)

WP-CODEBOX sample

Посмотришь и не нарадуешься, тут тебе и нормальное ( по моему мнению) визуальное оформление, и нумерация строк (начиная с нужной вам цифры), и раскрывающийся блок ( ну просто сказка). Возможность скачать код сразу в файле тоже нужная вещь. Казалось вот он идеал ( пока еще не рассмотрел остальные ), но он не поддерживает WP 2.7 .  Остается только ждать новой версии...

CodeColorer ( страница плагина)

2Зайдя на страницу плагина чуть не захлебнулся слюной - наворотов то O_O . Хотелка умерла, осознав что большего хотеть нельзя. Тут тебе и стандартная для многих плагинов нумерация строк, и невиданная для других подсветка кода в комментариях. Регулировка размера табуляции, различные темы оформления блока кода. А уж регулировка ширины блока кода, и количество строк без скролбара это просто супер. Да и к тому же плагин совместим с WP 2.7 .Правда и тут я нашел несколько минусов для себя. Это проблема использования визуального редактора - в FAQ сказано , что не надо им пользоваться. Другая проблема возможно специфична для моей темы оформления - в блоке кода при передаче на него фокуса  рисовалась тень, которая портила весь вид и цвета. Но опять же в админке в настройках плагина все отображается нормально, как и на сайте разработчика.

WP-SynHighlight ( страница плагина)

3Последним на моем пути оказался WP-SynHighlight. Плагин сразу подкупил своей простотой и размером. Выводимая "картинка"  радовала глаз. Из особенностей хочу отметить выбор контейнера, в котором код будет показан, изменение регистра букв. А самое главное - код можно писать в визуальном редакторе. Точнее код как раз нужно писать в визуальном редакторе. При переходе в HTML спец символы  отображаются как соответствующие им коды, но при переходе обратно в визуальный редактор - все отлично.   Расстроило, что в комментариях код не подсвечивается. Но автор плагина, при общении, сказал что сделает это в скором времени.

И остановил он свой взгляд на WP-SynHighlight. Взгляд его радовал этот вид. И понял он - это то что надо. И засверкала стена пещеры его разными цветными словами.

dobrunov.ru

обзор плагинов с синтаксисом кода

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

Главная проблема заключается в том, что существует очень много языков программирования, и у каждого свой синтаксис. Особенно проблема обостряется, если сайт посвящён множеству этих языков, а не какому-то одному.

В этой статье мы расскажем вам о плагинах, которые помогают вставить код в WordPress и показать его с подсветкой синтаксиса.

Crayon Syntax Highlighter

Crayon Syntax Highlighter – это самый популярный способ вставить код в WordPress и показать его синтаксис. Плагин поддерживает огромное количество языков программирования, в том числе и некоторые редко используемые.

К возможностям этого дополнения нужно отнести следующее:

Вообще, у плагина очень много настроек. Поэтому если покопаться, можно сделать то, что нужно, что задумано.

Syntax Highlighter Evolved

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

Advanced Code Editor

Профессиональный плагин для того, чтобы вставить код в WordPress. Поддерживает популярные языки веб-программирования. Главной особенностью плагина является то, что подсветку синтаксиса он включает не только в коде, опубликованном в постах, но также и в редакторе файлов темы и плагинов, что очень удобного для разработчиков, так как в стандартном наборе WordPress такой функции нет.

Возможности у плагина такие:

Об аналогичном плагине мы также рассказали в этой статье.

Если вы нашли ошибку, то выделите её и нажмите клавиши Shift + Enter или нажмите сюда, чтобы проинформировать нас.

Также по этой теме:

wpuroki.ru

Смотрите также

Prostoy-Site | Все права защищены © 2018 | Карта сайта