Casual-Markdown-Doc provide a quick solution to use markdown as html document, and publish by web or share by file.
- include javascript lib casual-markdown-doc.js
- include css style casual-markdown-doc.css
then start write document in markdown format!
This project based on the design idea of Strapdown.js. but use casual-markdown parser, build-in css, vanilla javascript without any dependence. (support all browsers include IE9)
- Introduction of Casual-Markdown-Doc. src: sample.html => preview
- Supported Markdown Syntax https://casualwriter.github.io/casual-markdown/casual-markdown-syntax.html
- create your document in html format. e.g.
casual-markdown-syntax.html - use below first 5 line as header, and start draft content in markdown format
- at line 5, revise title to your document title
- start draft document in markdown format
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://casualwriter.github.io/dist/casual-markdown-doc.css" rel="stylesheet">
<script src="https://casualwriter.github.io/dist/casual-markdown-doc.js"></script>
<body title="Supported Syntax of Casual-Markdown">
## Heading
content in markdown format
or include casual-markdown-doc.js from local
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="casual-markdown-doc.css" rel="stylesheet">
<script src="casual-markdown-doc.js"></script>
<body title="Supported Syntax of Casual-Markdown">
## Heading
content in markdown format
- table-of-content will be auto-generated from markdown heading
- hotkey [alt-t] to toggle table-of-content popup-box
- hotkey [ctrl-p] to print document, table-of-content will be inserted as first page automatically.
- if donot want table-of-content printout. please close TOC box first, then print document.
- table-of-content will be hidden if screen width less than 1024 (e.g. mobile).
The following themes are available, by adding class="theme-name" in body tag.
They are pre-defined in casual-markdown-doc.css (sorry not good at UI design, set your style if you like)
/* ==== theme for casual-markdown-doc.css ==== */
.dark, .dark div, .dark pre, .dark code { background:#383838!important; color:#ccc }
.dark h2, .dark h3, .dark h4, .dark a { color:white } .dark header{ background:#888 } .dark .active {color:pink}
.ukraine header { background: linear-gradient(to bottom right, #0057b8, #ffd700); }
.skygreen header { background: linear-gradient(to bottom, skyblue, green); }
.skyblue header { background: skyblue; }
.coffee header { background:#6F4E37 } .coffee .toc h3, .coffee .toc .active { color:#6F4E37 }
.purple header { background:Purple } .purple .toc h3, .purple .active { color:Purple }
.pink header { background:MediumVioletRed } .pink .toc h3, .pink .active { color:teal }
The main program is very simple by doing the following steps.
- read markdown content from
<body> - update document title
- call casual-markdown parse, convert to html and update to content area.
- generate table-of-content with scrollspy feature.
//=============================================================================
// 20220719, convert markdown-document in <body> tag into HTML document
//=============================================================================
window.onload = function () {
var html = '<div class="container" style="margin:auto; max-width:1024px; padding:4px;">'
html += '<header id=heading>' + (document.body.title||document.title) + '</header>'
html += '\n<div id=tocbox><button style="float:right" onclick="this.parentElement.style.display=\'none\'">'
html += 'X</button><div id="toc"></div></div>'
html += '\n<div id=content>' + md.html(document.body.innerHTML.replace(/\>/g,'>')) + '</div></div>';
document.body.innerHTML = html
document.body.style.display = 'block';
md.toc( 'content', 'toc', { scrollspy:'body' } )
}
- 2022/07/22, v0.70, initial release.
- 2022/08/06, v0.80, support themes, cater mobile, and some minor fix.