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


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

на e=document.querySelectorAll("HL")
  • В css файле классу .hljs присвоить white-space:pre-wrap; font-family:monospace;
  • При разметке статьи пользователю использовать для кода контейнер .
  • Пример подсветки кода JavaScript стилем Atelier Dune Dark:

    Расширение SyntaxHighlight

    Для MediaWiki есть расширение SyntaxHighlight. До 2015 г. оно работало с библиотекой GeSHi. После — с библиотекой Pygments. В обеих библиотеках есть поддержка подсветки XML.

    Улучшенная подсветка кода от prism

    Доброго времени суток, читатели falbar и гости, зашедшие на эту страницу. В сегодняшней статье я хочу рассказать о том, как подключить к себе на сайт подсветку кода, а именно, плагин под названием prism. Мы разберём не только саму библиотеку, но и, чуть-чуть, затронем back-end.

    Почему я выбрал именно prism?

    Конечно, подобных скриптов множество, каждый из которых по-своему хорош. Когда я разрабатывал этот сайт, я решил не качать самую распространенную подсветку кода, а порыться немного и посмотреть, что вообще уже написано в данной области. Так мною и был найден данный скрипт – prismjs . К сожалению, русскоязычной документации на сайте разработчиков (да и вообще в интернете) не оказалось, что явилось первым минусом в моих глазах. Но, ведь суть подсветки кода везде одинакова, поэтому я решил разобраться с расширением самостоятельно.

    К слову, значительных недостатков мною обнаружено не было, а вот достоинств — хоть отбавляй:

    1. Вес скрипта составляет какие-то жалкие 1.6 кб – собственно, это вес ядра. Все остальные дополнения (языки, стили и плагины) легко подключаются на официальном сайте отдельно. В результате, имеем «чистый», только нам необходимый функционал и ничего лишнего;
    2. Prism поддерживает около 20-30 подсветок разных языков (HTML, XML, CSS, PHP, JavaScript и многие другие);
    3. Уже написаны дополнительные расширения, при помощи которых можно добавить нумерацию строк, язык, в котором отображается код и др.;
    4. Плагин имеет шесть готовых CSS стилей, если кому-то мало, или требуется что-то очень специфическое, то не составит труда написать свои стили под код. Замечу, что все классы, используемые в prism логичны и понятны;
    5. Библиотека легкая и быстрая, что не влияет на скорость загрузки страницы;
    6. У prism есть своё небольшое API;
    7. Ну и последний хороший бонус, это наличие возможности самому расширять библиотеку, дописывая нужный функционал и добавляя свои варианты отображения кода через внутренние методы.

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

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

    Подключаем их к себе на страницу и ещё библиотеку jQuery:

    Участок кода, который собираемся выводить с подсветкой, обрамляем в одну из приведенных ниже конструкций:

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

    Для включения нумерации сток дописываем к pre >

    Изощренный читатель уже мог заметить подвох – добавление различных опций и красивостей ведет к непрерывному росту структуры, что крайне неудобно уже на стадии подключения нумерации строк, а если потребуется подключить что-то еще?!… Поэтому, я и был вынужден отказаться от использования стандартным методов плагина.

    Что же я предпринял?

    Ну, выход здесь только один (или я разглядел только один – не суть): при добавлении статьи использовать более простую конструкцию без классов, а при отображении страницы при помощи JavaScript добавлять эти классы. Этим вариантом мы решаем сразу две задачи: первая — это более короткая запись, а вторая – теперь мы можем сами контролировать отображение названия языка (это важно, так как все языки разметки в prism называются markup). Я использую вот такую конструкцию:

    В атрибут rel передаем желаемый язык.

    Теперь добавим пару строк в файл prism.js, а именно: функцию prismAddClasses(), которая будет возвращать убранные классы:

    Проделав эти нехитрые манипуляции, и задействовав библиотеку jQuery, мы возвращаем все классы обратно при загрузке страницы браузером. Так что, если вам, вдруг, не понадобиться нумерация, то нужно будет убрать всего несколько строк в функции, что очень удобно.

    Теперь нам осталось только вывести в блоке с кодом название языка, который указан в атрибуте rel, делать это мы будем, используя CSS:

    Те, кто знаком селектором before, тут нечего нового не увидят. В этом куске CSS мы находим элементы pre c атрибутом rel и добавляем название языка перед ними, указывая стили при помощи атрибута before. В итоге получается шапка с названием кода.

    Собственно на этом подключение prism завершено.

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

    Когда первый раз подключаешь такого рода скрипты, то при добавлении кода в стандартную конструкцию (в моем случае между элементами pre и code) многие буквально вставляют весь код, а потом удивляются, почему нечего не работает. Тут есть маленький подвох, а именно: код, который добавляется между элементами для вывода, должен быть преобразован особым образом. Это означает, что все скобки, кавычки и тому подобные знаки необходимо преобразовать в спецсимволы. Для этого можно написать простую функцию с регулярным выражением, которая перед занесением текста в базу данных, будет заменять знаки на спецсимволы автоматически. Что сэкономит вам кучу времени и избавит от нудного ручного труда.

    Это один из вариантов реализации вышеописанной задачи. Функция get_hand_text() принимает один параметр $text. Внутри неё идут проверки: первая на наличие в переменной $text данных, вторая на наличие блоков с кодом (реализуется при помощи регулярного выражения), если таковые в тексте присутствуют. Далее используется foreach() функция, которая пробегается по массиву в $match[1] и заменяет в тексте $val (изначальный код) на htmlspecialchars(trim($val), ENT_QUOTES). В итоге у вас будет отображаться на странице всё как надо.

    На этом у меня всё, спасибо за внимание, надеюсь, данная статья поможет вам реализовать у себя на сайте подсветку.

    Подсветка синтаксиса программного кода для отображения на веб-страницах (версия 1.1)

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

    1. SyntaxHighlighter 2

    Поддерживаемые языки: Bash/shell, C#, C++, CSS, Delphi, Diff, Groovy, JavaScript, Java, Perl, PHP, Plain Text, Python, Ruby, Scala, SQL, Visual Basic, XML.

    Установка SyntaxHighlighter достаточно проста. Распакуйте набор javascript-файлов в директорию с сайтом.

    Добавьте следующие строки в заголовок HTML-документа:


    После них необходимо добавить файлы скриптов, а именно ядро и набор файлов, отвечающих за подсветку синтаксиса требуемых языков программирования, например, для подсветки когда на С++ нам потребуется подключить два файла:

    Далее требуется добавить в заголовок функцию, отвечающую за выделение синтаксиса.

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

    Для правильного отображения символ ‘ ‘ заменять на >.

    Скачать SyntaxHighlighter 2 и изучить подробности можно на сайте разработчика:
    http://alexgorbatchev.com/wiki/SyntaxHighlighter

    2. SyntaxHighlighter 1.51

    Набор javascript-файлов, которые на клиентской стороне выполняют форматирование и подсветку синтаксиса программного кода.

    Поддерживаемые языки: C++, C#, CSS, Delphi, Java, Java Script, PHP, Python, Ruby, Sql, VB, XML/HTML.

    Использовать syntaxhighlighter на своем сайте достаточно просто, для этого в заголовок документа помещаются строки:

    Далее, все вставки кода, которые требуется отформатировать, помещаются в блоки вида:

    В аттрибуте class задается язык программирования, для которого выполняется форматирование.

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

    Скачать syntaxhighlighter и изучить подробности можно тут:
    http://code.google.com/p/syntaxhighlighter/

    Syntaxhighlighter используется на этом сайте для отображения фрагментов кода.

    3. star-light

    Так же, как и syntaxhighlighter, приложение star-light выполняется на клиентской стороне.
    Поддерживаемые языки: JavaScript, HTML, CSS, XML, PHP, Email (выделение цитат), VBScript, T-SQL.

    Использование инструмента star-light еще более простое — в заголовок страницы надо добавить лишь подключение CSS файла:

    Вставки блоков кода осуществляются следующим образом:

    Подсветка синтаксиса кода на вашем сайте

    Довольно много сайтов содержат на своих страницах листинг кода, который может отличаться в зависимости от синтаксиса языка своей подсветкой. Подсветка кода позволяет улучшить визуальное восприятие информации на сайте. Если вы заметили, то на нашем сайте тоже есть код с подсветкой, и сейчас мы поговорим о том, как такое сделать на своих проектах. Существует довольно неплохая реализация плагина подсветки кода, написанная на javascript, называется highlight. По данным сайта, на котором размещен плагин, сегодня он умеет подсвечивать около 169 языков, и 77 стилей, а так же много имеет много других плюшек.
    Вот пример, как может выглядеть код с подсветкой:

    Рассмотрим базовый пример, как можно прикрутить highlight плагин на свой сайт. Первым делом, вам необходимо скачать плагин hightlight с официального сайта.
    Разместите файлы в директорию шаблона вашего сайта, затем в заголовке странице подключите скрипт и файл стилей плагина.

    Строка hljs.initHighlightingOnLoad(); инициализирует работу плагина.

    Теперь о том, как размечать код. Делается это просто, есть два способа. Первый способ: разместите код между тегами

    плагин попытается автоматом определить синтаксис кода, и подсветить его.
    Второй способ – более верный, необходимо указать синтаксис языка:

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

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

    Будни программиста

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

    Наткнулся на один очень интересный проект, под названием CodeMirror. Он позволяет подсвечивать большинство популярных языков программирования. Все подробности ниже. И так, поддерживаемые языки:

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

    А теперь о использовании.

    Работает все довольно просто, для начала нужно скачать скрипт, на момент написания статьи это 0,67 (обновления смотрим на страничке проекта). Из архива нам необходимы лишь папочки JS и CSS. Разбор полета приведу на примере HTML «mixed-mode».

    Как видно из кода, в JS задаются такие параметры как высота textarea а так же какие именно мы хотим подсвечивать языки (parserfile и stylesheet). Как видите все очень просто и понятно, удачи!

    Syntax Highlight русская версия

    Syntax Highlight это плагин, который включает подсветку синтаксиса кода в админке сайта. Конкретно в редакторе тем и плагинов («Внешний вид\Редактор» и «Плагины\Редактор»). Это чрезвычайно полезно в случае, если вы регулярно делаете правки кода именно через админку сайта. Полезно не в том плане, что так красивее, а в том, что с подсветкой кода намного сложнее сделать ошибку. А ошибка в коде моментально выведет ваш сайт из строя, так как редактор в админке не даст вам возможности отменить изменения.

    Скачиваем плагин по ссылке в конце страницы и устанавливаем его:

    1 Распаковываем архив.

    2 Копируем папку syntax-highlight в /wp-content/plugins/.

    3 Заходим в админку блога на вкладку «Плагины» и активируем плагин.

    Настроить плагин вы сможете в «Настройках\Syntax Highlight«. Плагин я перевел на русский язык и вряд ли у вас возникнут вопросы по его настройке. Тем более, что настроек в плагине совсем немного.

    Единственную вещь, которую вам действительно надо настроить это используемую тему подсветки. По умолчанию включена темная тема:

    Почему-то многие программисты любят темные темы в редакторах. Но лично мне темные темы не нравятся – слишком большая нагрузка на глаза. Поэтому я предпочитаю что-нибудь более классическое светлое:

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

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

    Очень часта ситуация, когда начинающий вебмастер лезет в админку сайта, чтобы добавить в файл темы functions.php некий хак, который либо неправильно вставляется (разбивая другие функции файла), либо который сам по себе содержит ошибки. В результат сайт перестает работать вообще и вебмастер не может удалить неправильный код. Понятное дело, что откатить все изменения можно добравшись до нужного файла по FTP, но вот это действие и вызывает множество вопросов у начинающих.


    Поэтому, если вы плохо представляете себе, как работает ваш сайт и не знаете, как добраться по FTP до файлов темы или плагинов, то вы не должны делать никаких правок через редактор движка. Что с плагином Syntax Highlight, что без него. Сначала вам надо понять, что к чему.

    Идеальным вариантом всегда будет установка локального сервера, проверка всех изменений кода на локальном сервере и только потом заливка по FTP измененных файлов на реальный сервер. Это единственный правильный вариант внесения каких-либо правок, так как использование для этого встроенного редактора движка рано или поздно приведет к проблемам.

    Syntax Highlight
    Автор плагина: Lukasz Kostrzewa
    Рассматриваемая версия: 1.0.2 от 02.07.2014
    Текущая версия: 1.0.2 от 02.07.2014
    Совместимость с версией WordPress: 3.9.1 и выше
    Активных установок плагина: 1 000+
    Скачать русский плагин версии 1.0.2 (всего скачено 7 817 раз)

    Подсветка синтаксиса исходного кода на сайте

    Как сделать подсветку кода на сайте? На самом деле тут нет нечего сложного достаточно просто выбрать каким плагином для этого воспользоваться.

    Highlight.js – Популярный скрипт, поддерживает много языков программирования, может выполняться как на сервере так и у клиента.

    SyntaxHighlighter — Тоже можно сказать популярный скрипт для подсветки кода, поддерживает много языков, выполняется у клиента и имеет несколько готовых тем оформления.

    Google Code Prettify – плагин от корпорации добра Google как и многие знает много языков и выполняется на стороне клиента, но главная его достоинство это малый вес самого скрипта. Если на сайте используете Фреймворк Bootstrap то мне лучше и легче использовать Google Code Prettify.

    Что бы подключить Google Code Prettify на сайт скачиваем необходимые файлы с сайта Google ( или prettify.zip )

    Подключаем файл стилей:

    В конце страницы, перед закрытием тега Body добавляем клиентские скрипты:

    Что бы наши примеры кода теперь подсвечивались добавляем к тегу PRE класс prettyprint

    Если необходимо нумеровать строки то необходимо добавить еще класс linenums

    Малый вес скрипта влияет на скорость загрузки страницы и в отличии от Syntax Highlighter практически не отъедает ресурсов.

    XSLT первый шаг

    1. Введение

    Не прошло и трёх лет с тех пор, как у меня зародилась мысль о том, что пора изучать XSLT -))). Мысль зародилась, а везде ещё стоял PHP 4 и зверствовал Salbotron , который, мягко говоря, не отличался высокой производительностью. Да и редко какой браузер мог похвастаться поддержкой этого самого XSLT. По этим соображениям изучение столь перспективного направления я отложил до лучших времён. На данный момент можно смело заявить, что эти времена настали, поскольку вышел PHP 5 с поддержкой XSLT и сносной объектной моделью, а все топовые браузеры уже сами уверенно держат преобразования, только подавай XML. :)

    Важные ссылки по теме, первоисточники:

    • http://w3c.org — комитет по разработке и продвижению стандартов всемирной паутины Internet. На данный момент он является первоисточником практически всех веб-ориентированных стандартов и рекомендаций.
    • http://www.w3.org/TR/xml — спецификация расширяемого языка разметки XML, который является основой современного веба. На момент написания статьи доступна пятая редакция версии 1.0, а также вторая редакция версии 1.1.
    • http://www.w3.org/TR/xml-names — спецификация использования пространств имён в XML.
    • http://www.w3.org/TR/xpath — спецификация по использованию языка поиска частей XML-документа XPath.
    • http://www.w3.org/TR/xsl/ — спецификация расширенного языка стилей XSL.
    • http://www.w3.org/TR/xslt — спецификация языка преобразований XSLT.
    • http://validator.w3.org/ — валидатор HTML.
    • http://www.w3.org/TR/xhtml1/ — спецификация XHTML1.0.

    Переводы на русский язык:

    Для лучшего понимания всего происходящего я рекомендую читать спецификации в следующем порядке:

    1. XML (это основа!)
    2. пространства имён (механизм разнородного XML-кода в одном файле)
    3. XPath (язык выборки элементов из дерева структуры)
    4. XSLT (преобразования)
    5. XHTML (то, к чему нужно стремиться)

    Особо пытливые могут также уделить внимание расширенному языку стилей XSL.

    2. Валидный XHTML

    Что такое валидный XHTML? В первую очередь, это XML-документ, который должен соответствовать спецификации XML. Во-вторую, почти обычная HTML-страница, к которой все привыкли.

    Почему нужен именно XHTML? Исключительно из соображений совместимости и кросс-браузерности. Страница в XHTML будет с большей вероятностью отображаться корректно в популярных браузерах, чем обычный HTML.

    Для рядового клепателя страниц словосочетание XML-документ должно означать следующее:

    1. Документ содержит объявление XML-документа в самом начале страницы:
    2. Документ содержит один корневой элемент, в котором находятся все остальные.
    3. Все элементы (тэги) должны иметь закрывающую часть (
      ,

    ).

  • Атрибуты всегда имеют значение, которое обязательно указывается в кавычках (одинарных или двойных). Например, «radio» disabled= «disabled» /> .
  • Управляющие символы & , и > всегда должны маскироваться. Например, «?a=1&b=2» > & . Исключение составляет только , внутри которого спецсимволы можно не маскировать.
  • Также сам XHTML обязывает выполнять следующие условия:

    1. Документ должен объявлять пространство имён, в рамках которого будут использоваться элементы HTML.
    2. Документ должен объявлять DOCTYPE перед корневым элементом и указывать в нём один из типов XHTML и соответствующий DTD.

    Пример простого документа XHTML1.0:

    И так обо всём по порядку.

    Объявление XML-документа, в котором указывается его версия и кодировка.

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

    Объявление типа документа и его схемы.

    Для XHTML 1.0 есть три типа — Strict (строгое соответствие рекомендациям W3C), Transitional (переходный тип) и Frameset (использование фреймов). Для каждого из них предусмотрен отдельный DTD.


    Объявление пространства имён и используемого языка.

    Очень важно указывать ссылку именно в таком регистре и никак иначе. Это связано с тем, что в XML имена элементов и содержимое их атрибутов регистрозависимы.

    Три версии XHTML1.0 предназначены для лучшей обратной совместимости:

    • Strict — обеспечивает наибольшее соответствие рекомендациям W3C со стороны браузеров. Однако и сам HTML-код должен следовать этим рекомендациям.
    • Transitional — менее строгое соответствие, которое заставляет браузер вести себя так, как если бы это был обычный HTML-документ.
    • Frameset — позволяет использовать фреймы.

    Помимо XHTML1.0 на данный момент доступен XHTML1.1:

    XHTML1.1 по сути является тем же XHTML1.0 Strict и призван вытеснить другие версии XHTML1.0. Однако, по сравнению с XHTML1.0 Strict, у него есть ряд отличий:

    1. Удалён атрибут lang , его роль выполняет xml:lang . (Модуль [ XHTMLMOD ])
    2. Для элементов a и map вместо атрибута name нужно использовать атрибут id . (Модуль [ XHTMLMOD ])
    3. Доступен набор элементов ruby . (Модуль [ RUBY ])

    Итак, если вам нужна наибольшая кросс-браузерность и совместимость с рекомендациями W3C, то XHTML1.1 самое оно!

    Из этих соображений результатом моих преобразований будет именно XHTML1.1.

    3. XSLT-преобразования

    Что такое XSLT? Это язык преобразований XML-документа, который был разработан как часть расширенного языка стилей (XSL).

    Зачем нужен XSLT? Он позволяет реализовать схему, при которой данные хранятся отдельно, а их представление отдельно. То есть, один XML-документ преобразуется с помощью другого XML-документа (XSL, в котором находятся XSLT-шаблоны) в конечный документ. Результатом может быть XML, HTML или текстовый документ любого формата.

    Для того, чтобы воспользоваться XSLT-преобразованиями, в первую очередь нужно сформировать правильный стиль XSL и подключить его к XML-файлу.

    Валидным XSL-документом является XML-документ, у которого задано пространство имён xsl и присутствует корневой элемент stylesheet. В самом простом случае стиль может выглядеть, например, так:

    Этот стиль не содержит каких-либо явных определений шаблонов или других элементов XSL. Однако, его уже можно использовать. Чтобы посмотреть результат, достаточно сформировать произвольный XML-документ и подключить к нему этот стиль:

    За подключение стиля отвечает строка:

    Если файлы text.xml и test.xsl созданы и находятся в одной папке, то с помощью любого XSLT-парсера можно преобразовать исходный test.xml в результирующий документ. В качестве парсера могут выступать все популярные браузеры (IE5+, FF2+, Opera9+ и другие), а также модули в языках программирования, например, в PHP. Если вы используете браузер, то достаточно открыть test.xml, и он сразу отобразит примерно такой результат:

    При этом кодировка результата будет UTF-8, несмотря на то, что исходный документ был сформирован в windows-1251. К сожалению, браузеры обычно не позволяют просмотреть код результирующего документа, но модуль XSLT в PHP5 даёт возможность передать результирующий код в переменную, которую можно сохранить в файл. Поэтому, используя PHP, я приведу исходный код результирующего документа:

    Этот код не является валидным XML-документом и тем более XHTML1.1. Для того, чтобы сформировать нужный код, я усложню исходный XSL-стиль и добавлю туда необходимые шаблоны и преобразования. При этом исходный XML-документ останется без изменений.

    В качестве примера я приведу XSL-стиль, который при помощи XSLT будет выводить список атрибутов исходного XML-документа с их значениями, при этом будет формироваться валидный XHTML1.1. Итак, стиль:

    Чтобы понять, как он работает, я распишу каждое действие отдельно:

    Документ сформирован в кодировке windows-1251, о чём сообщается в атрибуте encoding. Версию XML-документа желательно всегда указывать, это рекомендация W3C.

    Затем идёт объявление корневого элемента, стиля:

    Обязательным атрибутом является определение пространства имён xsl через атрибут xmlns:xsl= «http://www.w3.org/1999/XSL/Transform» .

    Следующим шагом в корневом элементе stylesheet объявляется, каким образом нужно формировать результирующий документ:

    • method= «xml» — метод вывода документа. Результирующий документ будет в формате XML.
    • encoding= «windows-1251» — кодировка результирующего документа.
    • omit-xml-declaration= «no» — пропускать или нет начальное объявление XML-документа ( ). Может иметь значение «yes» или «no» (актуально только для html).
    • indent= «yes» — формировать отступы согласно уровню вложенности. Может иметь значение «yes» или «no».
    • media-type= «text/xml» — MIME-тип результирующего документа (используется только для метода вывода html).
    • doctype-public= «-//W3C//DTD XHTML 1.1//EN» — тип результируюшего документа (DOCTYPE)
    • doctype-system= «http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd» — ссылка на DTD

    Если метод вывода объявлен html, то значения атрибутов encoding и media-type будут подставлены в заголовок страницы ( . ) посредством метатега.

    Объявление основного шаблона:

    Именно этот XSLT-шаблон соответствует корню исходного дерева и будет вызван первым для преобразования. Атрибут match принимает значения, которые должны соответствовать языку поиска элементов XPath.

    Остальные шаблоны, если таковые имеются, должны подключаться из этого шаблона при помощи средств XSLT.

    Формирование XHTML-страницы. Оно начинается с элемента , у которого указано пространство имён xhtml:

    Атрибут xmlns= «http://www.w3.org/1999/xhtml» указывает на пространство имён xhtml, которое будет применено по умолчанию к этому элементу и всем дочерним элементам, у которых оно не задано явно.

    Атрибут xml:lang= «ru» указывает на язык, в котором сформирована страница (будущая).

    Эта часть стиля была нужна для формирования атрибутики валидного XHTML1.1 кода.

    Теперь что касается XSLT-преобразований:

    Вставка простого текста:

    Текст «Мой список:» будет подставлен в тег

    Организация цикла по выборке:

    Атрибут select принимает выражение XPath, на основе которого делает выборку. Если выборка вернула список узлов, то начинает работать цикл по каждому элементу.

    В данном случае выборка вернёт список атрибутов для этого (корневого) и всех дочерних элементов.

    В данном случае проверяется на чётность позиция элемента в списке выборки. Если тест возвращает true (порядковый номер элемента чётный), то срабатывает содержимое этого элемента.

    Управление атрибутами вышестоящего элемента:


    В данном случае, если позиция элемента чётная (определяется вышестоящим if), то в стиль элемента
    будет прописан серый цвет фона.

    Вывод значений элемента:

    Этот код подставит в вышестоящий элемент строку, собранную из имени текущего элемента и его значения. Содержимое атрибута select соответствует XPath.

    Вывод ссылки на разработчика парсера XSLT:

    Этот небольшой код XSLT формирует ссылку на разработчика парсера XSLT. Во многих случаях она будет разная и содержать разные значения.

    Результатом обработки этого стиля ( test.xsl ) станет такой код:

    Этот код соответствует стандарту XHTML1.1 и был сформирован на основе исходного XML-документа. Для проверки можно воспользоваться валидатором от W3C, который расположен по адресу http://validator.w3.org/.

    В браузере этот код выглядит примерно так:

    IE 6 FireFox 3 Opera 9.02

    4. Приложение

    Ссылки на исходный код

    Постоянный адрес статьи //anton-pribora.ru/articles/xml/xslt-first-step/. /Автор: Прибора Антон Николаевич, 2009 год/

    Использование PHP5 для обработки XSLT

    Для получения результирующего документа при помощи PHP5 я использовал такой код:

    Дополнительную информацию по использованию XSLT в PHP5 можно найти по адресу http://ru2.php.net/manual/ru/book.xslt.php.

    Мысли вслух

    «Товарищи, мы стоим на краю огромной пропасти! И я предлагаю сделать большой, решительный шаг вперёд!»

    © 2020 Антон Прибора. При копировании материалов с сайта, пожалуйста, указывайте ссылку на источник.

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

    Сегодня мы познакомимся с вышедшей в феврале 2014 года новой, четвёртой версией этого, пожалуй, старейшего редактора интерфейса, первая версия которого появилась в далёком 2007 году, сразу после выхода Microsoft Office 2007. Сегодня Ribbon XML Editor поддерживает все версии Microsoft Office, с 2007 по 2013.

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

    Программа имеет два окна редактирования интерфейса (отдельно для Microsoft Office 2007 и 2010-2013). Каждое окно находится на своей вкладке, которые можно переключать снизу. Каждый документ может содержать в себе оба интерфейса, но при этом каждая версия Microsoft Office будет задействовать из него свой интерфейс. Если же документ содержит только интерфейс 2007, то его будут использовать все версии Microsoft Office (совместимость сверху вниз). Если документ содержит только интерфейс 2010-2013, он не будет отображаться в Microsoft Office 2007.

    Слева от окна редактора кода располагается панель элементов. Нажатие кнопки на ней приводит к вставке в позицию курсора соответствующей xml-конструкции. Фактически, ничего не приходится писать руками, за исключением содержимого некоторых параметров тегов, да и то, большая часть этого содержимого может быть вставлена из списка автодополнения. Списки автодополнения по умолчанию всплывают после набора второго символа слова, но можно их вызвать в любом месте, просто нажав стандартную комбинацию Ctrl+пробел. Автодополнение в Ribbon XML Editor, к сожалению, пока не контекстночувствительное, но поскольку число возможных слов невелико, оно всё равно существенно упрощает и ускоряет написание кода. Для включения в окне интерфейса 2010-2013 автодополнения для 2013-го интерфейса следует поставить соответствующую галочку в правой части верхней панели, рядом с кнопкой поиска.

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

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

    Кстати, сохранение положения прокрутки и позиции курсора появилось только в этой, четвёртой версии. Также, в отличие от предыдущей версии, в версии 4.0 появилась подсветка парных тегов, что наряду с правильным форматированием делает код намного более наглядным.

    Ещё одним новшеством являются переходы к началу и концу парного тега кнопками Ctrl+ . При многократном нажатии переход осуществляется далее, по всем тегам, с переходом на всё более внешние уровни в соответствии с общей логикой этой функции. При одновременном нажатии этих комбинаций с клавишей Shift происходит выделение тегов, как и в случае любых других стандартных перемещений по тексту, список горячих клавиш для которых можно увидеть в справке (F1), в разделе списка горячих клавиш.

    Функции автоматизированной навигации по тексту включают переходы к конкретному идентификатору, использованному вами в коде. Переход осуществляется через раскрывающийся список «Переход по идентификатору» в правой части верхней панели. Список содержит все идентификаторы, использованные вами в текущем коде.

    Помимо перехода по идентификатору существует мощная функция поиска (а также поиска и замены), включающая поиск по регулярным выражениям, модернизированная в этой версии редактора.

    Теперь окно поиска после своего отображения остаётся на экране, пока вы сами его не закроете. Благодаря этому появилась возможность поиска по всему тексту, а не только до первого совпадения. Кстати, после закрытия окна поиска его функцию берут на себя кнопки F3 и Shift+F3, повторяющие последнюю операцию поиска вниз или вверх (если это было возможно в окне) по тексту. Чтобы открыть окно поиска и замены, следует нажать на кнопку поиска, удерживая нажатой клавишу Shift.

    Маленьким, но приятным дополнением к общей автоматизации ввода стало появление в версии 4.0 интеллектуальных кавычек, которые сами появляются после набора символа «=», после чего курсор встаёт между ними. Причём, после впечатывания значения в кавычки, можно выйти из них как стрелкой вправо, так и печатью закрывающей кавычки. В последнем случае дублирование уже имеющейся автоматической кавычки не произойдёт, а курсор просто встанет снаружи.

    Опишу ещё одну функцию, которая не всегда является очевидной при вставке элементов. В самом левом верхнем углу есть кнопка с выбором действия, которая может принимать одно из трёх состояний — id, idMso или idQ. При вставке элемента кнопками левой панели, в тег автоматически вставляется обязательный параметр идентификатора, соответствующий текущему в этой кнопке выбора. В некоторых случаях, элемент не может содержать установленный по умолчанию параметр, и тогда, несмотря на установку в кнопке выбора, например, idMso, в тег вставляется разрешённый параметр id.

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

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

    При подготовке изображений для интерфейса желательно использовать 32-битный формат png (тот, что с градацией прозрачности) и имя, написанное латиницей. В случае использования формата bmp программа постарается сама конвертировать его в png, вырезав фон. Если имя файла будет содержать нелатинские символы, они конвертируются в последовательность латинских символов и цифр (36-ричная система), но имя может стать нечитаемым для вас. Это не отразится на качестве интерфейса, но может вызвать у вас неудобства при работе с кодом.

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

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

    Первые две кнопки самой верхней панели отвечают за открытие документа, в который будет внедряться интерфейс. Первая кнопка — открытие через стандартное диалоговое окно открытия файлов. Вторая — открытие последнего открывавшегося документа, или выбор из нескольких последних открывавшихся документов. Функция выбора из списка последних документов в версии 4.0 дополнена возможностью очистки этого списка, а также появлением соответствующих документам значков слева от имени документа.

    Следующий блок кнопок включает кнопку форматирования исходного кода интерфейса в текущем окне, не существовавшей в прежней версии, кнопку проверки правильности xml-структуры и соответствия xsd-схеме интерфейса, кнопку сохранения документа, кнопку закрытия документа и кнопку запуска документа в родном приложении для проверки.

    Нюансы форматирования кода, к сожалению, не настраиваются. Параметры, размещённые в столбик, всегда выстраиваются в одну строку. Если нужно защитить какой-то фрагмент кода от форматирования, а остальное отформатировать, то можно просто закомментировать этот фрагмент перед форматированием, а после раскомментировать его.

    Форматирование кода имеет свои особенности. Если в тексте есть свёрнутые теги, они всегда разворачиваются. Если теги стоят в одной строке друг за другом вплотную, без пробела, то они не разъединяются. Тег остаётся в той же строке, что и был.
    Валидация кода происходит в соответствии с xsd-схемами интерфейсов, предоставляемыми Microsoft, и идущими в комплекте с программой. При нажатии на кнопку валидации происходит последовательная проверка обеих версий интерфейсов.

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

    Кнопка запуска документа в родном приложении Microsoft Office сохраняет и открывает редактируемый документ в родном приложении для проверки. В зависимости от настроек, документ при этом в Ribbon XML Editor может как закрываться, так и оставаться открытым. Как правило, закрытие документа перед запуском используется в случаях отладки макросов, когда в запущенном документе производятся правки в VBA. В этом случае, после закрытия подправленного в VBA документа, в Ribbon XML Editor открывается уже новая версия документа, включающая эти правки. В иных случаях удобно оставлять документ открытым. Кстати, возможность оставлять документ открытым появилась только в четвёртой версии редактора.


    Также, в четвёртой версии автоматизирована смена окон редактора и приложения Microsoft Office при запуске и закрытии документов. Так, если закрытие документа происходит без закрытия самого приложения Microsoft Office, то Ribbon XML Editor сам всплывает на передний план. Нюансы этого поведения можно настроить на вкладке настроек.

    Следующий блок кнопок – это стандартный откат и отмена отката. Ничего нового по сравнению с предыдущими версиями тут не появилось, за исключением ограничения отката моментом открытия документа (ранее можно было откатить вообще до пустого окна редактора, прямо как в анекдоте — если долго нажимать Ctrl+Z, можно деинсталлировать Windows и разобрать компьютер).
    Перейдём в правую часть панели. Тут мы видим кнопку генерации модуля процедур обратного вызова. Функционал этой кнопки по сравнению с предыдущей версией тоже несильно изменился. Добавилась лишь возможность поменять в настройках шапку генерируемого модуля, если текущая по каким-то причинам вас не устраивает.

    Последняя, самая правая кнопка в этой панели, появилась только в последней версии. Это открытие в проводнике технической папки программы. Техническая папка располагается в системе по пути «%APPDATA%\RXE» и является общей для всех копий редактора текущего пользователя, в какой бы папке сам редактор фактически не находился. В этой папке хранятся все настройки программы, а также производится распаковка открываемого документа. Возможна одновременная распаковка документов разными копиями программы.

    Помимо рассмотренной нами первой вкладки с редакторами интерфейсов, программа имеет ещё несколько вкладок. Их назначение второстепенное, и по большому счёту для работы они не обязательны. Тем не менее, рассмотрим их вкратце.

    Вкладка «Корневые ссылки» отображает содержимое файла ссылок на разные компоненты документа. Программой сюда автоматически добавляются ссылки на создаваемые интерфейсы. Этот файл входит в состав документа, являющегося, по сути, контейнером для подобных файлов, формирующих документ.

    Вкладка «Ссылки на изображения» отображает содержимое файла ссылок на изображения, находящиеся в составе документа. Сюда программа добавляет ссылки на изображения, которые вставляются в интерфейс. Этот файл также входит в состав документа.

    Вкладка «Типы файлов» отображает содержимое файла типов файлов, использованных внутри документа. Сюда программа добавляет тип png в случае вставки изображения в интерфейс. Этот файл также входит в состав документа.

    Вкладка «Настройки» содержит все настройки программы. Более подробно эта вкладка будет описана чуть позже.

    Вкладка «Справка» содержит небольшую гипертекстовую справку по программе. Переключение между справкой и любой другой вкладкой осуществляется последовательными нажатиями клавиши F1.

    Справка содержит очень полезный раздел «Быстрый старт», прочитав который новичок сможет сразу приступить к работе, не погружаясь в изучение редактора. Кроме того, в разделе «Приложения» справка содержит иерархические схемы элементов интерфейса, что тоже очень полезно новичкам. В совокупности с информативными всплывающими подсказками на кнопках элементов всё это позволяет использовать Ribbon XML Editor не только как повседневный рабочий инструмент, но и как прекрасную обучающую программу.

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

    Вкладка общих настроек

    Мы видим, что все настройки сгруппированы по своему действию. Подробно описывать каждую настройку не имеет смысла — их названия говорят сами за себя; кроме того, все настройки содержат всплывающие подсказки. Пробежимся лишь по группам настроек и уточним некоторые нюансы.

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

    Группа «Документы» отвечает за работу непосредственно с документами Microsoft Office. Она позволяет настроить количество запоминаемых документов, запоминание свёрнутости тегов, положения курсора в тексте и поведение при запуске документа в родном приложении.

    Группа «Автозавершение» позволяет настроить поведение этой функции более тонко.

    Группа «VBA-макросы» содержит шапку, которая будет вставляться в модуль при генерации шаблонов функций обратного вызова.

    Особо хочется отметить следующую группу — группу добавления в контекстное меню проводника пункта «Открыть в Ribbon XML Editor». Ранее подобный функционал реализовывался сторонними дополнениями к программе. Теперь же он доработан и включён в состав настроек программы.

    Замечу, что пункт «Открыть в Ribbon XML Editor» будет показываться в контекстном меню не всех файлов, а только на тех, которые можно открыть в редакторе. В операционных системах Windows 7 и выше слева от добавленного пункта будет отображаться пиктограмма редактора.

    Функция добавления пункта в контекстное меню проводника вносит соответствующие изменения в реестр Windows, в ветку, общую для всех пользователей. Отсюда вытекает два факта. Первый — пункт в контекстном меню появляется одновременно у всех пользователей операционной системы, поэтому программа должна находиться в общедоступном для всех пользователей месте. Как правило, это папка Program Files, но никак не рабочий стол одного из пользователей. Второй факт — для внесения изменений в реестр включённый UAC запросит подтверждения выполнения этого действия. В этом случае действие нужно подтвердить.

    Для добавления пункта в контекстное меню следует сначала отметить галочками те типы файлов, при щелчке на которых вы хотите видеть этот пункт, и снять галочку с тех типов файлов, с которых вы хотите этот пункт убрать. После этого следует нажать кнопку «Установить», расположенную непосредственно под галочками, и если у вас в системе включён UAC, подтвердить своё действие. После этого пункт «Открыть в Ribbon XML Editor» сразу появится в контекстных меню отмеченных файлов.

    Пункт контекстного меню «Открыть в Ribbon XML Editor» ссылается на текущее место расположения Ribbon XML Editor, поэтому при перемещении папки программы следует открыть настройки и повторно нажать на кнопки «Установить», чтобы обновить ссылки на файл редактора в реестре.

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

    Эта вкладка содержит настройки подсветки синтаксиса и другие настройки окон редакторов. Она также разбита на группы. Любое изменение этих настроек можно сразу проконтролировать в расположенном тут же тестовом окне редактора.

    Группа «Опции редактора» отвечает за настройку состояния (вкл./откл.) расцветки вспомогательных элементов, не относящихся к подсветки синтаксиса. Это фолдинг, направляющие отступов, нумерация строк и включенность подсветки парных тегов.

    Группа «Шрифт, отступ» позволяет настроить шрифт и его размер, а также размер отступов и табуляции.

    Группа «Подсветка парных тегов и текущей строки» настраивает режимы подсветки. Используется возможность установки степени прозрачности подсветки. Значение прозрачности «-1» включает режим выделения парных тегов не подсветкой фона, а рамкой.

    Группа «Подсветка синтаксиса» настраивает цвет и стиль шрифта отдельных элементов XML-кода, цвет фона и курсора, а также ширину курсора в пикселях (от 1 до 3).

    Группа «Стили» позволяет загрузить один из 12 предустановленных стилей, а также сохранять свои. Очень удобная возможность, учитывая количество стилистических настроек. В стиль включаются все настройки с этой вкладки.

    В заключение хотелось бы отметить, что помимо возможности полностью контролировать редактируемый код, Ribbon XML Editor имеет ещё одно важное преимущество для отечественного потребителя — он имеет русскоязычный интерфейс, русскоязычную справку и подсказки, и работает с файлами Юникод-формата, позволяя без проблем включать в конструируемый интерфейс русскоязычные надписи, да и вообще, надписи на многих других кириллистических языках.

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

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

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

    на e=document.querySelectorAll("HL")
  • В css файле классу .hljs присвоить white-space:pre-wrap; font-family:monospace;
  • При разметке статьи пользователю использовать для кода контейнер .
  • Пример подсветки кода JavaScript стилем Atelier Dune Dark:

    Расширение SyntaxHighlight

    Для MediaWiki есть расширение SyntaxHighlight. До 2015 г. оно работало с библиотекой GeSHi. После — с библиотекой Pygments. В обеих библиотеках есть поддержка подсветки XML.

    Илон Маск рекомендует:  Отложенная закачка или загрузка файла после показа рекламы
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL