Как сделать красивое отображение программного кода в странице

Добрый день, сегодня мы покажем, как можно внедрить в редактор TinyMCE плагин, который позволяет выводить программный код, прямо в описании страницы(записи блога) в такой формате:

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

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

Для начала необходимо установить и подключать сам плагин к редактору, для этого нужо загрузить папку sh4tinymce в папку plugins/, которая находится внутри редактора. Полный путь выглядит так

Simpla/design/js/tinymce_jq/plugins/

После этого, необходимо выполнить подключение самого плагина.

Для этого откройте файл design/html/tinymce_init.tpl и в нем сделайте две правки.

plugins: [
                "advlist autolink lists link image preview sh4tinymce anchor responsivefilemanager",
                "code fullscreen save textcolor colorpicker charmap nonbreaking",
                "insertdatetime media table contextmenu paste imagetools"
            ],
……………………………
   language : "en",

ВАЖНО!. Язык обязательно нужно ставить английский, потому что русского нет в поддержке этого плагина.

После этого переключаемся в клиентскую часть.

Для начала нужно загрузить скрипты и стили для стилизации будущего кода. В примере мы загружаем все в папку design/название темы/js

После этого необходимо подключить данные скрипты к сайту, для этого открываем файл design/название темы/html/index.tpl

И прописываем перед закрывающимся тегом head(</head>) следующий код

  <script src="design/{$settings->theme}/js/shCore.js"></script>
    <script src="design/{$settings->theme}/js/shBrushCss.js"></script>
    <script src="design/{$settings->theme}/js/shBrushJScript.js"></script>
    <script src="design/{$settings->theme}/js/shBrushXml.js"></script>
    <script src="design/{$settings->theme}/js/shBrushPhp.js"></script>
    <link href="design/{$settings->theme}/js/shCore.css" rel="stylesheet"/>
    <script>SyntaxHighlighter.all()</script>

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

Приятной работы ;)

P.S Материалы для работы Здесь