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 11 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 11 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 11 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 9 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 }}