How to show README.md in a web page in 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?

Does this help? https://stackoverflow.com/questions/35442329/visualizing-readme-md-files-in-my-website — user3532758, Aug 28 '20 at 11:36

score 2 · Answer 1 · answered Apr 03 '21 at 15:40

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')) }}

score 0 · Accepted Answer · answered Aug 28 '20 at 12:21

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>

How did you come up with this in under an hour – Flame Aug 28 '20 at 12:27 — Flame, Aug 28 '20 at 12:27

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

2 Answers2