Is it possible to programatically render the same markdown as <<< from a Vue component?

[davestewart]

I ask as I'm loading in a file raw from a component in a theme...

const data = require('!raw-loader!./' + this.file + '.vue')
return md.renderInline('```vue\n\n' +data+ '\n```')

...but I want to just use the VuePress Markdown setup, which looks great.

Unfortunately, my attempt looks like the top half below.

How do I make it look like the result of <<< path/to/file.vue (the bottom half, below)?

[davestewart]

So I figured I can use md.render() to get output over multiple lines, but then I still need to start prism, etc.

I tried importing from vuepress/lib/markdown but webpack complained:

[Vue warn]: Failed to resolve async component: function () {
  return Promise.all(/*! import() */[__webpack_require__.e(23), __webpack_require__.e(3)]).then(__webpack_require__.bind(null, /*! ./.vuepress/components/SiteDemo.vue */ "./.vuepress/components/SiteDemo.vue"));
}
Reason: ReferenceError: process is not defined

I guess this is not the right approach...

[flozero]

i trying to find the solution too here...

i do the same here with look at bot for code. i call it as component in the readme.md

updated: i had to modify in prism js code for data-manual to be true to not auto execute his code if imported

now i just use prism when click that has the impact to not override over element already parsed. But still code in one line no multilines

<template>
    <div class="blockCode code-toolbar">
    <div class="hideMe">
        <slot></slot>
    </div>
        <div class="extra-class" :class="`language-${lang}`">
            <button @click="toggle" class="w3-btn w3-primary w3-text-white">
                <span v-if="code"> preview</span>
                <span v-else> code</span>
            </button>
            <pre v-if="!code" v-html="content" class="w3-text-white"></pre>
            <pre v-else class="line-numbers" :class="`language-${lang}`">
                <code class="codeMe">
                    {{content}}
                </code>
            </pre>
        </div>
    </div>
</template>


<style lang="scss">
    @import '../../../src/scss/main';
    .hideMe {
        display: none;
    }
</style>


<script>

import prism from "prismjs";

export default {
    props: {
        lang: {
            default: "",
            type: String
        }
    },
    data:() => ({
        content: "",
        contentPreview: "",
        code: false,
        element: null
    }),
    methods: {
        toggle() {
            this.code = !this.code
            this.element = this.$el.querySelector(".codeMe");
            if (this.code) {
                setTimeout(() => {
                    prism.highlightElement(this.$el.querySelector(".codeMe"));
                }, 0)
            }
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.content = this.$el.querySelector(".hideMe").innerHTML;
        })
    }
}
</script>

[flozero]

@davestewart your bug is normal because u trying to use a process.env that is node relevant and no client side so yeah not possible

[ulivz]

It seems that you want to highlight the code generated by your raw-loader query. but it's a good idea in VuePress - since our direction is to build everything at build time as much as possible.

I suggest that you write a VuePress for your request of highlight code at runtime as #676, or waiting for our new code snippet API (#1336)