Кто использует CMS October видел, что при написании постов в блоге (Backend) код, оформленный в <pre/>, выглядит красиво с темным фоном и подсветкой синтаксиса. Но на самом сайте (Frontend) используются совсем другие стили и оформление кода более простое.

Чтобы сделать такое же оформление как в блоге воспользуемся code-prettify с Гитхаба, ссылка ведет сразу на описание как все работает. Там указана ссылка, по которой можно скачать js, css, указать параметры, шаблон оформления. Пример моей ссылки:

<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?lang=css&skin=desert"></script>

Затем переходим в админке в компоненты, находим footer и вставляем туда ссылку.

<div class="footer-inner">
    <p class="muted credit">
        © 2012 - {{ "now"|date("Y") }}
        — Powered by <a href="#">Sv9t.ru</a>
        using <a href="https://github.com/responsiv/clean-theme">a clean theme</a>.
    </p>
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?autoload=true&skin=desert&lang=css" defer=""></script>
</div>

Осталось найти шаблон поста и заменить код вызова контента. Было так:

<div class="post-content">
 {{ post.content_html|raw}}
</div>

Стало так:

<div class="post-content">
 {{ post.content_html|replace({'<pre>': '<pre class = "prettyprint">','<code>':'','</code>':''}) | raw}}
</div>