Highlight code block at runtime

[faustbrian]

I am currently trying to figure out if there is some way to render a code block at runtime. What I am trying to achieve is to create a highlighted JSON code block based on a response I receive from a request.

<template>
    <div>
        <div ref="request">
            <slot></slot>
        </div>

        <button @click="sendRequest">Something</button>
        
        <div ref="response">
// response here once the request is done
       </div>
    </div>
</template>

<script type="text/javascript">
    export default {
        methods: {
            sendRequest() {
                request(options).then(data => {
                    // show JSON.stringify(data) in this.$refs.response as highlighted JSON
                }).catch(err => {
                    // do nothing...
                })
            }
        }
    }
</script>

Is there any way to achieve this? Tried a few things and looked for a component but assume that markdown-it does the rendering for the normal templates.

[ulivz]

#413 (comment)

[ulivz]

We took a long time to develop the plugin API, for now you can create a plugin for that.

[sysebert]

Not sure which thread to subscribe to, but I'd love to know if this plugin was written by now :)