I am currently developing a website to showcase fundamental details about a particular sport. The (small) rulebook is stored as rulebook.md in my project. I am utilizing webpack along with the latest vue-cli and yarn for this project.
To import the rulebook, I am employing the use of raw-loader which passes the content to a Vue component named markdown. This component utilizes the showdown module to format the markdown content.
@/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>
...
I have attempted to configure showdown to handle line breaks and instructed CSS to display line breaks accordingly. However, when using console.log(source), the rulebook is displayed without any line breaks. After researching this issue, I discovered on the Github page for raw-loader that it does not preserve newlines.