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

WYSIWYG редактор.

Я использовал TinyMCE. Подключается он очень просто, нужно в .cshtml файл добавить такие строчки:

@Scripts.Render("//code.jquery.com/jquery-1.10.2.min.js")
@Scripts.Render("//tinymce.cachefly.net/4.0/tinymce.min.js")

Хотя можно и добавить эти файлы в проект, это не важно.
К свойству модели, в котором хранится редактируемый текст, добавляем атрибуты:

[AllowHtml]
[DataType(DataType.MultilineText)]

Первый атрибут нужен для хранения html разметки в свойстве модели, второй — для отображения свойства в виде textarea.

Теперь нужно настроить TinyMCE. Вставляем в представление вот такой код:

  tinymce.init({
    selector: "textarea",
    plugins: [
        "advlist autolink lists link image charmap print preview hr anchor pagebreak",
        "searchreplace wordcount visualblocks visualchars code fullscreen",
        "insertdatetime media nonbreaking save table contextmenu directionality",
        "emoticons template paste textcolor csharp"
    ],
    toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
    toolbar2: "print preview media | forecolor backcolor emoticons | csharp"
  });

Здесь selector — блок, который будет отображаться в виде редактора. Обратите внимание на «csharp» в списке плагинов и в списке кнопок тулбара — это мой плагин для разметки выделенного кода, его я опишу ниже.

Разметка кода

Я использовал популярный скрипт SyntaxHighlighter. Его нужно скачать и добавить в проект

Создаем бандлы

bundles.Add(new ScriptBundle("~/bundles/SyntaxHighlighter").
  Include("~/Content/SyntaxHighlighter/js/shCore.js").
  Include("~/Content/SyntaxHighlighter/js/shBrushCSharp.js"));
bundles.Add(new StyleBundle("~/Content/SyntaxHighlighter/css").
  Include("~/Content/SyntaxHighlighter/css/shCore.css").
  Include("~/Content/SyntaxHighlighter/css/shThemeDefault.css"));

И подключаем их

@Scripts.Render("~/bundles/SyntaxHighlighter")
@Styles.Render("~/Content/SyntaxHighlighter/css");

Осталось только активировать подсветку:

$(document).ready(function () {
  SyntaxHighlighter.all();    
});

Теперь все, что завернуто в

<pre class="brush: csharp">

будет подсвечиваться.

Плагин для TinyMCE для включения подсветки синтаксиса

Плагин добавляется очень легко, достаточно до инициализации TinyMCE выполнить этот код:

tinymce.PluginManager.add('csharp', function (editor, url) {
  editor.addButton('csharp', {
    text: 'C#',
    icon: false,
    onclick: function () {
      editor.focus(); 
      editor.selection.setContent('<pre class="brush: csharp">' + editor.selection.getContent() + '</pre>');
    }
  });
});

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

Все, соединили все части, теперь можно пользоваться.