如何在从原始加载器导入文本并使用showdown格式化时在VueJS中保留换行符

Question

我在一个网站上工作，展示一项运动的基本信息。我将(小)规则手册保存为rulebook.md。我的项目是使用webpack和最新的vue-cli和纱线。

为了导入规则手册，我使用raw-loader并将内容传递给一个名为markdown的Vue组件，该组件获取标记并使用showdown模块对其进行格式化。

@/components/Markdown.vue

<template>
  <div id="markdown">
    {{ source }}
    {{ converted }}
  </div>
</template>

<script>
import * as showdown from 'showdown'
const converter = new showdown.Converter()
converter.setOption('simpleLineBreaks', true)

export default {
  name: 'markdown',
  props: ['source'],
  data () {
    return {
      converted: converter.makeHtml(this.source)
    }
  }
}
</script>

<style lang="scss" scoped>
.markdown {
  white-space: pre-line;
  word-wrap: break-word;
}
</style>

@/views/punchies/Rulebook.vue

<template>
  <div id="punchies-rulebook" class="container">
    ...
    <markdown ... :source="source"></markdown>
  </div>
</template>

<script>
import Markdown from '@/components/Markdown.vue'
// eslint-disable-next-line
import source from 'raw-loader!@/views/punchies/misc/rulebook.md'

export default {
  name: 'rulebook',
  components: {
    'markdown': Markdown
  },
  data () {
    return {
      source
    }
  }
}
</script>

...

我尝试将showdown设置为使用换行符，并告诉CSS呈现换行符。只需执行console.log(source)即可显示没有任何换行的规则手册。在搜索此问题时，raw-loader github显示了一个问题，其中解释了raw-loader确实会保留换行符。

Answer 1

在Markdown.vue中

<template>
    <p>{{source}}</p>
    <p v-html="converted"></p>
</template>