Tinymce. Вставка примеров кода на страницу html

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

 Я слышал, что в таких случаях следует использовать теги <pre></pre>, которые объявляют предварительно отформатированный текст. Но применение только последних нужного результата не дало. 

 Оказалось, что перед выдачей на редактирование надо обрабатывать контент функцией htmlspecialchars(). То есть, в том php файле, где происходит редактирование статьи, нужно найти характерные теги <textarea>, к которым и подключается редактор tinymce. Соответственно, первая строчка - то, что и нужно добавить для нормального отображения кода.

$textr = htmlspecialchars($row['ftxt']);
echo '<textarea cols="100" rows="28" name ="fulltext" id="edit_tinymce">'.$textr.'</textarea><br>';

 Во всех CMS, где используется tinymce, эти строки примерно идентичны, различие лишь в месторасположении файла и именах переменных. Здесь row['ftxt'] - как раз и есть выводимый контент.

 После вышеописанных манипуляций, при редактировании статьи, код будет выводится корректно, как в левом скриншоте.

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

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery.snippet.js"></script> 
<link rel="stylesheet" type="text/css" href="js/jquery.snippet.css" />
<script>
$(document).ready(function(){
 $("pre.htmlCode").snippet("html",{style:"greenlcd "}); // Ищем тэги <pre> с классом "htmlCode" и подключаем к этим элементам стиль greenlcd и обработку html
 $("pre").snippet("css",{style:"greenlcd "}); // Ищем тэги <pre>
 $("pre.js").snippet("javascript",{style:"greenlcd "}); // Ищем тэги <pre> с классом "js"
});
</script>

Единственное, что здесь потребуется изменить - назначить для каждого языка свои стили (greenlcd в данном случае). Затем вставляем в tinymce пример кода, выделяем, выбираем в пункте Paragraph подпункт Pre и в Source Code добавляем класс js или htmlCode: <pre class="js"></pre> в зависимости от языка.