JeffreyWay/index.blade.php

## index.blade.php
<!doctype html>
<html lang="en">
<head>
    <title>Markdown Example</title>
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://unpkg.com/@tailwindcss/typography@0.4.x/dist/typography.min.css">
    <script src="https://unpkg.com/axios@0.24.0/dist/axios.min.js"></script>
</head>

<body>
    <div class="grid grid-cols-2 gap-x-2 h-screen">
        <div class="border p-2">
            <textarea id="markdown" class="w-full h-full outline-none"></textarea>
        </div>

        <div class="border p-2">
            <div id="html" class="prose"></div>
        </div>
    </div>

    <script>
        (function () {
            let markdownTextarea = () => document.querySelector('#markdown');

            let convert = () => {
                let markdown = markdownTextarea().value;

                axios.post('/', {markdown})
                    .then(response => {
                        document.querySelector("#html").innerHTML = response.data;
                    });

                localStorage.setItem('markdown', markdown);
            };

            let init = () => {
                markdownTextarea().value = localStorage.getItem('markdown');

                setInterval(convert, 1000);
            }

            init();
        })();
    </script>
</body>
</html>

## routes.php
<?php

use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('welcome');
});

Route::post('/', function () {
    return \Illuminate\Support\Str::of(request('markdown'))->markdown();
});
	<!doctype html>
	<html lang="en">
	<head>
	<title>Markdown Example</title>
	<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
	<link rel="stylesheet" href="https://unpkg.com/@tailwindcss/typography@0.4.x/dist/typography.min.css">
	<script src="https://unpkg.com/axios@0.24.0/dist/axios.min.js"></script>
	</head>

	<body>
	<div class="grid grid-cols-2 gap-x-2 h-screen">
	<div class="border p-2">
	<textarea id="markdown" class="w-full h-full outline-none"></textarea>
	</div>

	<div class="border p-2">
	<div id="html" class="prose"></div>
	</div>
	</div>

	<script>
	(function () {
	let markdownTextarea = () => document.querySelector('#markdown');

	let convert = () => {
	let markdown = markdownTextarea().value;

	axios.post('/', {markdown})
	.then(response => {
	document.querySelector("#html").innerHTML = response.data;
	});

	localStorage.setItem('markdown', markdown);
	};

	let init = () => {
	markdownTextarea().value = localStorage.getItem('markdown');

	setInterval(convert, 1000);
	}

	init();
	})();
	</script>
	</body>
	</html>
	<?php

	use Illuminate\Support\Facades\Route;

	/*
	\|--------------------------------------------------------------------------
	\| Web Routes
	\|--------------------------------------------------------------------------
	\|
	\| Here is where you can register web routes for your application. These
	\| routes are loaded by the RouteServiceProvider within a group which
	\| contains the "web" middleware group. Now create something great!
	\|
	*/

	Route::get('/', function () {
	return view('welcome');
	});

	Route::post('/', function () {
	return \Illuminate\Support\Str::of(request('markdown'))->markdown();
	});