How to show README.md in a web page in Laravel? - laravel

Question

I hava a laravel project, there is a README.md in the root directory. I can see the render result after pushing to GitHub, but I want to render markdown document in the local development browser.
I am trying two ways:
Read file from markdown file
convert markdown file to html with something like Webpack
Who can give a demo for this?

Answer 1

Since the mail blade templates parse markdown, you can use a similar approach to layout.blade.php which uses Illuminate\Mail\Markdown::parse.
In your template, such as welcome.blade.php, add this:
{{ Illuminate\Mail\Markdown::parse(file_get_contents(base_path() . '/README.md')) }}

Answer 2

Here is a Laravel Mix / Webpack solution, convert markdown file to html, and required in Vue.js, then show it with v-html.
First add markdown-loader
yarn add markdown-loader html-loader
Add config in webpack.mix.js, Laravel Mix can add custom config of Webpack.
mix.webpackConfig({
module: {
rules: [{
test: /\.md$/,
use: ["html-loader", "markdown-loader"],
}]
}
});
Considering README.md is in the root of Project, add a alias in webpack.mix.js
mix.alias({
'#': '/resources/js',
'#root': '/',
});
Now we can use a vue component to show the README.md at the root directory.
<script>
const readme = require('#root/README.md')
export default {
data() {
return {
readme: ""
}
},
created() {
this.readme = readme
}
}
</script>
<template>
<div class="container" ref="container" v-html="readme" />
</template>