Подсветка и форматирование кода на веб-страницах за 5 минут

После долгого перерыва и очередного приступа написания Evernote-заметок решил вернуться к публикации материалов в публичном блоге. Даже не для того, чтобы кто-то читал, а чтобы был стимул оформлять мысли законченным образом.

Начну с насущной задачи: в ходе работы над очередным проектом (MVC 6, кстати) потребовалось "красиво" подсветить (highlight) выводимый посредством razor view кусок кода на языках XML/HTML. Как вы оцените трудозатраты на подобное решение? Поиск нужной библиотеки, интеграция, тестирование? На самом деле, работающий прототип можно получить уже через минуту.

Размещаем на странице код (интерпретируемый как текст, естественно) внутри тега <pre class="prettyprint"></pre>, рядом размещаем скрипт:

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

Всё! Несколько строк кода, и подсветка кода работает! google/code-prettify определяет язык автоматически и содержит правила для большинства популярных языков, в том числе C family, SQL, CSS и еще несколько десятков других. Все подробности - в публичном репозитории https://github.com/google/code-prettify.

Конечно же, данная библиотека доступна для скачивания и установки, как в традиционном для Visual Studio ручном режиме, так и через Bower. О втором способе чуть позже, а сейчас я про форматирование расскажу - этим  google/code-prettify не занимается. Для автоматического форматирования выводимого на странице кода использовался vkBeatufy ‑ еще один js скрипт, размещенный на GitHub: https://github.com/vkiryukhin/vkBeautify. Умеет vkBeatufy и обратную операцию - минификацию кода. Поддерживаемых языков куда меньше: XML, JSON, CSS, SQL, но для моей задачи этого хватило вполне. Подключаем скрипт, пользуемся:

vkbeautify.xml(text);

Приведу законченный пример обработки с использованием jQuery. После получения с сервера кодированного в HTML-encoded string текста, последующие раскодирование, форматирование и подсветка могут быть выполнены следующим образом:

var encoded = '<pages> <namespaces> <add namespace="System.Web.Helpers" /> <add namespace="System.Web.Mvc" /> <add namespace="System.Web.Mvc.Ajax" /> </namespaces> </pages>';
var decoded = $("<div/>").html(encoded).text();
var formatted = vkbeautify.xml(decoded);
var element = $('pre.prettyprint');
//классом prettyprinted помечаются уже обработанные тэги <pre>
element.removeClass('prettyprinted');
element.text(formatted);
//ручной вызов google/code-prettify
prettyPrint();

Видимый результат на странице:

<pages>
    <namespaces>
        <add namespace="System.Web.Helpers" />
        <add namespace="System.Web.Mvc" />
        <add namespace="System.Web.Mvc.Ajax" />
    </namespaces>
</pages> 

Кстати, в MVC 6 для кодирования HTML-encoded string используется класс HtmlEncoder:

using Microsoft.Extensions.WebEncoders;

HtmlEncoder.Default.HtmlEncode(content);

И пару слов о работе с Bower в Visual Studio. Мне не понравился встроенный менеджер пакетов: установить тот же  google/code-prettify с его помощью мне так и не удалось. Пожелаем Visual Studio дальнейшего развития и больше классных инструментов, а для текущей работы я могу порекомендовать надстройку Package Installer. Бесплатная, поддерживает Bower, npm, JSPM, TSD и NuGet (!), работает быстро и по-моему опыту безотказно. Жаль, что для vkBeatufy вообще не оказалось подходящего Bower-пакета, поэтому пришлось устанавливать по старинке. На этом всё, удачи вам, и поменьше рутины!