Заказать звонок
Заказ обратного звонка

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


Добрый день, сегодня мы покажем, как можно внедрить в редактор 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 Материалы для работы Здесь

Как сделать скролл пальцем на увеличенном фото в fancybox Как добавить переключение вида представления товаров сетка/список в OkayCMS

Комментарии

Пока нет комментариев

Оставить комментарий