calebman / vuepress-plugin-demo-container

Vuepress plugin for demo block.
https://calebman.github.io/vuepress-plugin-demo-container/
MIT License
119 stars 38 forks source link

请问下支持代码段导入吗? #14

Open winyh opened 4 years ago

winyh commented 4 years ago

::: demo


<<< @/filepath

:::

========================>

上面的 @/filepath 文件内容就是下面的。是否能够支持我在 markdown 文件外写好示例,用代码块的方式导入到markdown文件,渲染出效果的同时将源代码展示出来,目前测试好像不支持,下面的方式可以正常显示。上面的不行

::: demo


<template>
  <div class="box-vue">Vue {{ message }}</div>
  <a-button @click="handle" type="primary">winyh</a-button>
</template>
<script>
  export default {
    data: () => ({ message: "Hello World" }),
    methods: {
      handle(e) {
        console.log(e.target.nodeName);
      },
    },
  };
</script>
<style>
  .box-vue {
    color: red;
  }
</style>

:::

winyh commented 4 years ago

::: demo

<<< @/filepath

:::

========================>

上面的 @/filepath 文件内容就是下面的。是否能够支持我在 markdown 文件外写好示例,用代码块的方式导入到markdown文件,渲染出效果的同时将源代码展示出来,目前测试好像不支持,下面的方式可以正常显示。上面的不行

::: demo

<template>
  <div class="box-vue">Vue {{ message }}</div>
  <a-button @click="handle" type="primary">winyh</a-button>
</template>
<script>
  export default {
    data: () => ({ message: "Hello World" }),
    methods: {
      handle(e) {
        console.log(e.target.nodeName);
      },
    },
  };
</script>
<style>
  .box-vue {
    color: red;
  }
</style>

:::

改了一下,可以满足块导入了 ⬇️⬇️⬇️⬇️⬇️⬇️

:::demo <<< @/examples/ButtonExample/index.vue :::

const fs = require("fs")

const filepath = tokens[idx + 1].type === 'fence' ? tokens[idx + 1].src : ''; const source = fs.readFileSync(filepath).toString();

k644606347 commented 2 years ago

::: demo

<<< @/filepath

::: ========================> 上面的 @/filepath 文件内容就是下面的。是否能够支持我在 markdown 文件外写好示例,用代码块的方式导入到markdown文件,渲染出效果的同时将源代码展示出来,目前测试好像不支持,下面的方式可以正常显示。上面的不行 ::: demo

<template>
  <div class="box-vue">Vue {{ message }}</div>
  <a-button @click="handle" type="primary">winyh</a-button>
</template>
<script>
  export default {
    data: () => ({ message: "Hello World" }),
    methods: {
      handle(e) {
        console.log(e.target.nodeName);
      },
    },
  };
</script>
<style>
  .box-vue {
    color: red;
  }
</style>

:::

改了一下,可以满足块导入了 ⬇️⬇️⬇️⬇️⬇️⬇️

:::demo <<< @/examples/ButtonExample/index.vue :::

const fs = require("fs")

const filepath = tokens[idx + 1].type === 'fence' ? tokens[idx + 1].src : ''; const source = fs.readFileSync(filepath).toString();

求教具体该怎么改造?@winyh