document.html

<!DOCTYPE html>
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/casualwriter/casual-markdown/dist/casual-markdown.css">
<script src="https://cdn.jsdelivr.net/gh/casualwriter/casual-markdown/dist/casual-markdown.js"></script>
<style>  
  body { line-height:1.5; margin:auto; padding:3px; max-width:1024px; display:none; FONT-FAMILY:CONSOLAS,ARIAL; }
  h1  { font-size:200%; padding:16px; border:1px solid lightgrey; BACKGROUND:POWDERBLUE }
  h2  { border-bottom:1px solid grey; padding:2px }
</style>
<body onload="document.body.innerHTML=md.html(document.body.innerHTML); document.body.style.display='block'; 
              document.getElementById('qrcode').src='https://chart.googleapis.com/chart?cht=qr&chs=177x177&chl='+location.href" >
<img id=qrcode style="float:right; margin:5px; border:1px solid lightgrey; width:70px" />
<!--======= COPY ABOVE CODE AS HEADER, THEN FOLLOW WITH CONTENT IN MARKDOWN FORMAT =========-->

<span style="float:right;padding:6px">someone@email.com<br>by casualwriter</span>

# casual-markdown-page

[Casual-Markdown-Page](https://github.com/casualwriter/casual-markdown-page) directly use markdown files as web page or web site (ie. markdown-as-webpage).

Just a single html file [index.html](source/index.html) to load markdown file into web page by the syntax of `index.html?file={markdown-file.md}`

It is very handy to build simple web-site from markdown files, for example, 

* github (self-host): https://raw.githack.com/casualwriter/casual-markdown-page/main/source/index.html
* all-in-one version: https://raw.githack.com/casualwriter/casual-markdown-page/main/source/index-one.html
* github page: https://casualwriter.github.io/casual-markdown
* github page: https://casualwriter.github.io/
* direct render md file: https://casualwriter.github.io/casual-markdown?file=https://raw.githack.com/casualwriter/powerpage/main/README.md

## Features

* single html, all-in-one version [index-one.html](source/index-one.html)
* vanilla javascript, no dependence
* support all browser (include IE9)
* dark mode
* responsive, support mobile

## Usage Guide

1. copy [index.html](source/index.html) or [index-one.html](source/index-one.html) to web server
2. copy [index.md](source/index.md) and other files (*.md) to the folder

**that's it!**

* by default, it will load `index.md` as home page.
* hotkey [alt-s] to show markdown html for developer
* hotkey [alt-k] to showpage in dark mode
* for mobile, click on title to show/hide TOC. 
* use frontmatter for page configuration (title, menu, navigation), for example

~~~
-----------------------------------------------------------------------------
github  : https://github.com/casualwriter/casual-markdown 
title   : Casual-Markdown 
style   : #header { background: RoyalBlue } // additional style, optional
menu    :    
  Home            : index.md
  Supported Syntax: md-syntax.md
  md-as-Doc       : md-as-doc.md
  md-as-Page      : md-as-page.md
  md-as-Blog      : md-as-blog.md
  [DarkMode]      : javascript:darkmode()
-----------------------------------------------------------------------------

## {{ title }} 

[casual-markdown]({{github}}) is a super lightweight RegExp-based markdown parser, 
with TOC and scrollspy support
~~~ 


## Modification History

* 2022/08/11, v0.60, initial release.
* 2022/08/12, add all-in-one version. [index-one.html](source/index-one.html)
 