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

Всем программистам кто решился завести себе блог совершенно точно придется делать вставки кода на страницу, а еще хотелось чтобы код выглядел более или менее красиво, а в идеале еще с подсветкой синтаксиса. Просто тегами pre в данном случае не обойтись. Плюс еще надо сделать удобное редактирование в cms сайта.

Думаю далеко ходить не надо и виджет Code Snippet для CKEditor вполне подходит для моих целей. Скачать его можно здесь по ссылке. Есть два возможных варианта установки: скачать здесь архив и вручную прикрутить его к редактору или же нажать кнопочку Add to my editor на странице и потом сгенерировать весь редактор выбрав тему, языки, виджеты... Я пошел вторым путем, т.к. давно уже хотел обновить CKEditor для своей cms, установил тему в стиле Microsoft Word. Вся процедура довольно легко осуществима, просто скачал архив, распаковал его в нужное место и перенес config.js со старого редактора. Вот какой красивый редактор получился в итоге, стрелочкой показана кнопочка виджета: 

CKEditor code snippet  пример кнопки

Нажимаем ее, выбираем язык кода который будет показан на сайте вставляем сам код жмем ОК. Кстати, языков довольно много и не думаю что будет удобно прокручивать каждый раз весь список до нужного нам PHP, поэтому можем задать в config.js те которые нам нужны, мне лично понадобятся JavaScript,PHP, HTML, SQL, CSS, вот сразу и пример вставки JavaScript кода на сайт:

config.codeSnippet_languages = {
        javascript: 'JavaScript',
        php: 'PHP',
        HTML : 'HTML',
        SQL : 'SQL',
        CSS : 'CSS'
    };

Тут я в своем коде забежал уже немного вперед, еще можно выбрать стиль оформления кода, т.е цветовую схему. Удобно это делать на этой странице  далее в тот же config.js вставляем строчку с названием темы:

config.codeSnippet_theme = 'pojoaque';

С редактором мы закончили теперь переходим к выводу кода на сайт.

Все что нам необходимо есть уже в папке ckeditor/plugins/codesnippet/lib которую скачали вместе с обновленным CKEditor-ом. А именно нам нужен файлик highlight.pack.js и файлик стилей выбранной темы с папки ckeditor/plugins/codesnippet/lib/highlight/styles, по желаню можно в редакторе использовать одну тему, а на сайте другую, это не принципиально. Добавляем эти файлы на сайт, думаю показывать как это делать не имеет смысла и нужно еще проинициализировать подсветку синтаксиса добавив данный код:

hljs.initHighlightingOnLoad();

Вот и все! Примеры отображения кода видны в статье выше.