Hello, I use the rainlab blog plugin and i have a question about it. When I write a new blogpost with the built-in markdown editor the preview shows a really nice code block with syntax highlighting.

But when I open the blog post on my site it looks like that.

I want the same nice code block on my blog post on my site. Can you help me? Thanks!

Last updated 8 years ago

Update:

I found this in the comments of the Plugin:

But I don´t know where to add this line of code.

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

and then adding the prettify.js and theme css to the default layout...

Last updated 8 years ago

Prettify is from Google and I'm attempting to do the same thing... It is located here:

modules/ 
      system/
        assets/
           vendor/
              prettify/               <------ directory also includes prettify.js
                 run_prettify.js

Still attempting to find a solution to allow the blog post to utilize this as well. -Thx

Last updated 8 years ago

You can simply rewrite default component with your own template code, like this :

<div class="content">{{ post.content_html|replace({'<pre>': '<pre class = "prettyprint linenums">','<code>':'','</code>':''}) | raw}}</div>
{% if post.featured_images.count %}
    <div class="featured-images text-center">
        {% for image in post.featured_images %}
            <p>
                <img
                    data-src="{{ image.filename }}"
                    src="{{ image.path }}"
                    alt="{{ image.description }}"
                    style="max-width: 100%" />
            </p>
        {% endfor %}
    </div>
{% endif %}
<p class="info">
    Posted
    {% if post.categories.count %} in
        {% for category in post.categories %}
            <a href="{{ category.url }}">{{ category.name }}</a>{% if not loop.last %}, {% endif %}
        {% endfor %}
    {% endif %}
    on {{ post.published_at|date('M d, Y') }}
</p>

Inspired from default blog post template on GitHub

Afterall, include that code on your blog Post template page :

<link href="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/lang-css.min.js"></script>
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded',function() {
        prettyPrint();
    });
</script>

Inspired on Post on StackOverflow community

Last updated 6 years ago

Yet another solution. Grab from core:

Styles

    <link href="{{ [
      ..............
      '~/modules/system/assets/vendor/prettify/theme-desert.css',
    ]|theme }}" rel="stylesheet">

Scripts

    <script src="{{ [
      ..............
      '~/modules/system/assets/vendor/prettify/theme-desert.css',
     ..............
    ]|theme }}"></script>

And put into post template

{{ post.content_html | replace({'<pre>': '<pre class = "prettyprint">'}) | raw }}