Guvalif/singlefile-markdown-viewer.html

## singlefile-markdown-viewer.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Single-file Markdown Viewer</title>

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/skeleton.css@2.0.4/skeleton.min.css">
  <script src="https://cdn.jsdelivr.net/npm/markdown-wasm@1.2.0/dist/markdown.min.js"></script>
  <style>
    h1 {
      font-size: 3rem;
      font-weight: bold;
      margin-top: 2rem;
    }

    h2 {
      font-size: 2.5rem;
      font-weight: bold;
    }

    h3 {
      font-size: 2rem;
      font-weight: bold;
    }

    code {
      overflow-x: auto;
    }

    .container {
      width: 95%;
      max-width: 95%;
    }

    .menu-label {
      margin-top: 2.5rem;
    }

    #markdown-output {
      height: 100vh;
      overflow-y: auto;
      padding-right: 1em;
    }
  </style>
</head>

<body class="container">
  <div class="row">
    <aside class="four columns">
      <p class="menu-label">
        Table of Contents
      </p>
      <ul id="markdown-toc">
        <!-- Put markdown files at the same directory, then fill out `href` as file name prefixed by `#` -->
        <li><a href="#FILE_NAME.md">TITLE</a></li>
        <li><a href="#FILE_NAME.md">TITLE</a></li>
        <li><a href="#FILE_NAME.md">TITLE</a></li>
        <!-- more ... -->
      </ul>
    </aside>
    <div id="markdown-output" class="eight columns">
      <!-- Render a markdown file dynamically ... -->
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', async () => {
      await markdown.ready;

      const $output = document.getElementById('markdown-output');

      async function loadMarkdown(uri) {
        const response = await fetch(uri, { cache: 'no-cache' });
        const raw = await response.text();

        $output.innerHTML = markdown.parse(raw);
        $output.scrollTo(0, 0);

        const links = document.querySelectorAll('#markdown-output a[href^=http]');

        for (const $a of links) {
          $a.setAttribute('target', '_blank');
        }
      }

      if (location.hash) {
        await loadMarkdown(location.hash.slice(1));
      }

      window.addEventListener('hashchange', async () => {
        if (location.hash) {
          await loadMarkdown(location.hash.slice(1));
        }
      });
    });
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Single-file Markdown Viewer</title>

	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/skeleton.css@2.0.4/skeleton.min.css">
	<script src="https://cdn.jsdelivr.net/npm/markdown-wasm@1.2.0/dist/markdown.min.js"></script>
	<style>
	h1 {
	font-size: 3rem;
	font-weight: bold;
	margin-top: 2rem;
	}

	h2 {
	font-size: 2.5rem;
	font-weight: bold;
	}

	h3 {
	font-size: 2rem;
	font-weight: bold;
	}

	code {
	overflow-x: auto;
	}

	.container {
	width: 95%;
	max-width: 95%;
	}

	.menu-label {
	margin-top: 2.5rem;
	}

	#markdown-output {
	height: 100vh;
	overflow-y: auto;
	padding-right: 1em;
	}
	</style>
	</head>

	<body class="container">
	<div class="row">
	<aside class="four columns">
	<p class="menu-label">
	Table of Contents
	</p>
	<ul id="markdown-toc">
	<!-- Put markdown files at the same directory, then fill out `href` as file name prefixed by `#` -->
	<li><a href="#FILE_NAME.md">TITLE</a></li>
	<li><a href="#FILE_NAME.md">TITLE</a></li>
	<li><a href="#FILE_NAME.md">TITLE</a></li>
	<!-- more ... -->
	</ul>
	</aside>
	<div id="markdown-output" class="eight columns">
	<!-- Render a markdown file dynamically ... -->
	</div>
	</div>

	<script>
	document.addEventListener('DOMContentLoaded', async () => {
	await markdown.ready;

	const $output = document.getElementById('markdown-output');

	async function loadMarkdown(uri) {
	const response = await fetch(uri, { cache: 'no-cache' });
	const raw = await response.text();

	$output.innerHTML = markdown.parse(raw);
	$output.scrollTo(0, 0);

	const links = document.querySelectorAll('#markdown-output a[href^=http]');

	for (const $a of links) {
	$a.setAttribute('target', '_blank');
	}
	}

	if (location.hash) {
	await loadMarkdown(location.hash.slice(1));
	}

	window.addEventListener('hashchange', async () => {
	if (location.hash) {
	await loadMarkdown(location.hash.slice(1));
	}
	});
	});
	</script>
	</body>
	</html>