Some way to remove indentation?

[chriscalo]

I'd like to be able to type Markdown into a <VueMarkdown/> component with indentation that matches the surrounding markup, like this:

<template>
  <div>
    <VueMarkdown>
      # Heading

      Some text followed by a list.
      - one
      - two
      - three
    </VueMarkdown>
  </div>
</template>

But instead, that leading indentation gets interpreted as a code block, so I have to do this, which kind of defeats the value of typing Markdown in a Vue component (I'd rather use separate .md files to keep things tidy):

<template>
  <div>
    <VueMarkdown>
# Heading

Some text followed by a list.
- one
- two
- three
    </VueMarkdown>
  </div>
</template>

Seems like this would be really nice default behavior. Thoughts?

Two existing libs are dedent and dedent-js.

[chriscalo]

I was able to hack together this wrapper component, but I'm pretty sure there are lots of problems with the way I've done it.

<!-- Markdown.vue -->
<template>
  <div>
    <div style="display: none">
      <slot></slot>
    </div>
    <VueMarkdown :source="content"></VueMarkdown>
  </div>
</template>

<script>
import VueMarkdown from "vue-markdown";
import dedent from "dedent";

export default {
  name: "Markdown",
  data: () => ({
    content: "",
  }),
  components: {
    VueMarkdown,
  },
  mounted() {
    const rawText = childrenAsText(this.$slots.default);
    const dedented = dedent(rawText);
    this.content = dedented;
  },
};

const childrenAsText = children =>
  children
    .map(node => (node.children ? childrenAsText(node.children) : node.text))
    .join("");
</script>

[jaylu]

A wrapper vue component probably can solve the problem

<template>
  <vue-markdown :prerender="prerender">
    <slot></slot>
  </vue-markdown>
</template>

<script>
import VueMarkdown from 'vue-markdown/src/VueMarkdown'
import dedent from 'dedent'
export default {
  name: 'DemoMarkdown',
  components: { VueMarkdown },
  methods: {
    prerender (sourceData) {
      return dedent(sourceData)
    }
  }
}
</script>

But as you mention @chriscalo , it still have problem, as markdown use indent for formatting like hierarchical list. The indent information might lost after IDE do the formatting.