<pre> element not set with class language-xxx

[opichon]

Here's my component (a blog post).

<template lang="html">
    <div class="post">
        <h1>{{ post.title }}</h1>
        <div class="body">
            <vue-markdown :source="post.content"></vue-markdown>
        </div>
    </div>
</template>

<script>
    import VueMarkdown from 'vue-markdown';
    import { fetchPost } from './repository';
    import Prism from 'prismjs';
    import 'prismjs/themes/prism-dark.css';

    export default {
        props: [ 'slug' ],

        data() {
            return {
                post: {},
            };
        },

        created() {
            this.fetchPost(this.slug);
        },

        methods: {
            fetchPost(slug) {
                fetchPost(slug).then(this.onFetchComplete).catch(this.onFetchFailed);
            },

            onFetchComplete(response) {
                console.log(response);
                this.post = response.data;
            },

            onFetchFailed(error) {
                console.error(error);
            },
        },
    };
</script>

The post.content property contains the post's content in markdown format. It gets retrieved via an api call (not documented here, but irrelevant to this discussion).

As a side point, this markup does not work:

<vue-markdown>{{ post.content }}</vue-markdown>

The post content contains code blocks. These get rendered partially only, like this:

<pre>
<code class="language-php">
...
</code>
</pre>

As you can see, the <pre> element lacks the class="language-php" attribute. As a result, the code block does not get style properly by prism.

[opichon]

After reading the prism docs, I realize that it's prism that adds this class to the <pre> element., not the markdown parser.

I've managed to make this work by adding this method to the component:

        updated() {
            Prism.highlightAll();
        },