---------------------------------------------------------------- github : https://github.com/casualwriter/casual-markdown-doc ---------------------------------------------------------------- ## Introduction This is a sample document of [Casual-Markdown-Doc]({{ github }}) [Casual-Markdown-Doc](https://github.com/casualwriter/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! ### Credit This project based on the design idea of [Strapdown.js](https://strapdownjs.com/). but use [casual-markdown](https://github.com/casualwriter/casual-markdown) parser, build-in css, vanilla javascript without any dependence. (support all browsers include IE9) ### Sample * Introduction of Casual-Markdown-Doc. src: [sample.html](source/sample.html) => [preview](https://raw.githack.com/casualwriter/casual-markdown-doc/main/source/sample.html) * Supported Markdown Syntax https://casualwriter.github.io/casual-markdown/casual-markdown-syntax.html ## Usage Guide 1. create your document in html format. e.g. `casual-markdown-syntax.html` 2. use below first 5 line as header, and start draft content in markdown format 3. at line 5, revise title to your document title 4. start draft document in markdown format ~~~ ## Heading content in markdown format ~~~ ### Table of Content * 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). ### Themes 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 } ~~~ ### How it works The main program is very simple by doing the following steps. 1. read markdown content from ```` 1. update document title 2. call casual-markdown parse, convert to html and update to content area. 3. generate table-of-content with scrollspy feature. ~~~ //============================================================================= // 20220719, convert markdown-document in tag into HTML document //============================================================================= window.onload = function () { var html = '

' html += '

' + (document.body.title||document.title) + '

' html += '\n

' + md.html(document.body.innerHTML.replace(/\>/g,'>')) + '

'; document.body.innerHTML = html document.body.style.display = 'block'; md.toc( 'content', 'toc', { scrollspy:'body' } ) } ~~~ ### Modification History * 2022/07/22, v0.70, initial release. * 2022/08/06, v0.80, support themes, cater mobile, and some minor fix.