Use markdown as document (by casual-markdown parser)

  • By Casualwriter
  • Last update: Nov 7, 2022
  • Comments: 1

Casual-Markdown-Doc

Casual-Markdown-Doc provide a quick solution to use markdown as html document, and publish by web or share by file.

then start write document in markdown format!

Credit

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)

Sample

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
<!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

  • 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 <body>
  2. update document title
  3. call casual-markdown parse, convert to html and update to content area.
  4. 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(/\&gt;/g,'>')) + '</div></div>'; 
    
  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.

Github

https://github.com/casualwriter/casual-markdown-doc

Comments(1)

  • 1

    Request your help!

    @casualwriter Hi, I tried running following code, but couldnt get proper output (pls see image below). Request your help.

    <!DOCTYPE html>
<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">
-----------------------------------------------------------------------------

title   : Casual Markdown
github  : https://github.com/casualwriter/casual-markdown

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

    Capture96

    In the html output, {{title}} didn't display and link ( casual-markdown ) also didnt render.

    Please advise, if I am making a mistake somewhere.

    Thanks,

Popular Tag

Related