Can't get correct interpolation for codeblock in markdown

[avishnyakov]

Bug report

Can't get correct interpolation for codeblock in markdown. Followed approach with custom Vue component to inject markdown content via slot described below:

• https://vuepress.vuejs.org/guide/using-vue.html#templating
• Rendering Markdown inside components #257 (comment)

That works well for inline markdown within a Vue component. However, does not seem to work if interpolation is used within markdown codeblock. That prevents rendering source code which is stored elsewhere outside of markdown pages - metadata, front matter or external files.

MarkdownInVue.vue

<template>
  <div>
    <slot></slot>
  </div>
</template>

Then using directive over JSON data:

{
    "samples": [
        {
            "title":"sample1",
            "description": "descriptoin 1",
            "code": "\nvar i = 1;\n"
        },
         {
            "title":"sample2",
            "description": "descriptoin 2",
            "code": "\nvar i = 2;\n"
        }
    ] 
}

Later my markdown file:

// just preloaded mentioned JSON into themeConfig.samples variable
<div v-for="(item, index) in this.$site.themeConfig.samples">
{{ item.title }} with source code:

<MarkdownInVue>

  ## {{ item.title  }}
  {{ item.description }}

  \~~~~ 
  {{ item.code }} 
  \~~~~ 

  \```
  {{ item.code }} 
  \```

</MarkdownInVue>

</div>

Outcome:

Version

0.10.0

Steps to reproduce

As per setup early

What is expected?

Either of these:

1. VuePress allows interpolation within codeblock in markdown so that the source code can be rendered dynamically.
2. VuePress provides means to render source code from variable (which is stored elsewhere outside of markdown pages - metadata, front matter or external file)

What is actually happening?

VuePress skips interpolation for markdown codeblock.

Other relevant information

• Your OS: Windows
• Node.js version: v9.5.0
• Is this a global or local install? - Global
• Which package manager did you use for the install? - npm

[ulivz]

Let's see your usage:

// just preloaded mentioned JSON into themeConfig.samples variable
<div v-for="(item, index) in this.$site.themeConfig.samples">
{{ item.title }} with source code:

<MarkdownInVue>

  ## {{ item.title  }}
  {{ item.description }}

  \~~~~ 
  {{ item.code }} 
  \~~~~ 

  \```
  {{ item.code }} 
  \```

</MarkdownInVue>

</div>

You may not understand how vuepress works, you are generating markdown at runtime...

Although we can support interpolation in code block, BUT your usage is INVALID.

Closing it since it is duplicate of #413 / #415.

[avishnyakov]

@ulivz, thanks for spending some time on this, appreciate that.

Not sure how #413 / #415 can help to get a bunch of source code stored in a variable rendered nicely.