md.toc( 'content', 'toc', { title:'Index', scrollspy:'content' } ) ~~~ ## Supported Markdown Syntax {markdown-syntax} [casual-markdown](https://github.com/casualwriter/casual-markdown) parser support [Basic Markdown Syntax](https://www.markdownguide.org/basic-syntax/ "new") with some advanced featurens. Please refer the following samples. ### Heading

Markdown	HTML	Rendered Layout
~~~ may add multiple # in right side. following with {id} to specify id # heading 1 {no-toc-1} ## heading 2 {no-toc-2} ## ### heading 3 {no-toc-3} #### #### heading 4 {no-toc-4} ####### ##### heading 5 {id=five} ~~~	# heading 1 {no-toc-1} ## heading 2 {no-toc-2} ## ### heading 3 {no-toc-3} #### #### heading 4 {no-toc-4} ####### ##### heading 5 {id=five}	# heading 1 {no-toc-1} ## heading 2 {no-toc-2} ## ### heading 3 {no-toc-3} #### #### heading 4 {no-toc-4} ####### ##### heading 5 {id=five}

### Text Decoratoin (Bold/Italic)

Markdown	HTML	Rendered Layout
~~~ **basic decoration** this is ***bold+italic*** sample this is **bold** sample this is *italic* sample this is ___bold+italic___ sample this is __underline__ sample **enhance syntax** * ~~Strikethrough~~ sample * ~~delete~~ then ^^insert^^ * ^^^mark text^^^ **disable decoration** * disable \*\*bold\*\* by esc\ * disable \*italic\* by esc\ * disable by following ** with space* * not support _italic_ !! ~~~	**basic decoration** this is ***bold+italic*** sample this is **bold** sample this is *italic* sample this is ___bold+italic___ sample this is __underline__ sample **enhance syntax** * ~~Strikethrough~~ sample * ~~delete~~ then ^^insert^^ * ^^^mark text^^^ **disable decoration** * disable \*\*bold\*\* by esc\ * disable \*italic\* by esc\ * disable by following ** with space* * not support _italic_ !!	**basic decoration** this is ***bold+italic*** sample this is **bold** sample this is *italic* sample this is ___bold+italic___ sample this is __underline__ sample **enhance syntax** * ~~Strikethrough~~ sample * ~~delete~~ then ^^insert^^ * ^^^mark text^^^ **disable decoration** * disable \*\*bold\*\* by esc\ * disable \*italic\* by esc\ * disable by following ** with space* * not support _italic_ !!

### Paragraph, Line Breaks and HR

Markdown	HTML	Rendered Layout
~~~ Empty will be considered as paragraph. Don't put tabs or spaces in front of your paragraphs. Line break will be added if line wne with 2+ space ~~~	Empty will be considered as paragraph. Don't put tabs or spaces in front of your paragraphs. Line break will be added if line wne with 2+ space	Empty will be considered as paragraph. Don't put tabs or spaces in front of your paragraphs. Line break will be added if line wne with 2+ space
~~~ Use - or _ or * for horizontal rule. -------- ________ ******** ~~~	Use - or _ or * for horizontal rule. -------- ________ ********	Use - or _ or * for horizontal rule. -------- ________ ********

### Blockquote and Code (same line)

Markdown	HTML	Rendered Layout
~~~ > blockquote line1 > blockquote line2 >> blockquote line3 >> blockquote line4 > Below is empty line > > line 5 single quote in same line may allow `decoration text` double quote in same line will show ``RAW `text`` include single quote ~~~	> blockquote line1 > blockquote line2 >> blockquote line3 >> blockquote line4 > Below is empty line > > line 5 single quote in same line may allow `<b>decoration</b> text` double quote in same line will show ``RAW `<u>text</u>`` include single quote	> blockquote line1 > blockquote line2 >> blockquote line3 >> blockquote line4 > Below is empty line > > line 5 single quote in same line may allow `decoration text` double quote in same line will show ``RAW `text`` include single quote

### Code-Block (Multiple lines) * use **three** ``\~ or \` `` to define code-block. * may define language or title using ``\~\~\~ {language or title}`` * ``comment and keyword`` will be highlighted in code-block if language is specified. ~~~ javascript //===== format code-block, highlight remarks/keywords for code/sql md.formatCode = function (match, title, block) { // convert tag <> to < > block = block.replace(//g,'>').replace(/\t/g,' ') // highlight comment and keyword based on title := none | sql | code if (title.toLowerCase(title) == 'sql') { block = block.replace(/^\-\-(.*)/gm,'--$1').replace(/\s\-\-(.*)/gm,' --$1') block = block.replace(/(\s)(function|procedure|return|if|then|else|end|loop|while|or|and|case|when)(\s)/gim,'$1$2$3') block = block.replace(/(\s)(select|update|delete|insert|create|from|where|group by|having|set)(\s)/gim,'$1$2$3') } else if ((title||'none')!=='none') { block = block.replace(/^\/\/(.*)/gm,'//$1').replace(/\s\/\/(.*)/gm,' //$1') block = block.replace(/(\s)(function|procedure|return|if|then|else|end|loop|while|or|and|case|when)(\s)/gim,'$1$2$3') block = block.replace(/(\s)(var|let|const|for|next|do|while|loop|continue|break|switch|try|catch|finally)(\s)/gim,'$1$2$3') } return '

'  + block + '

' } ~~~ * will highlight SQL keyword if language=sql ~~~ sql -- show department staffs select dept_code, grade, staff_id, staff_name from dept where dept_code = 'IT' ~~~ ### Lists (Ordered and unordered)

Markdown	HTML	Rendered Layout
~~~ use *|+|- for unorder list * item 1 * item 2 * item 3 ~~~	use *|+|- for unorder list * item 1 * item 2 * item 3	use *|+|- for unorder list * item 1 * item 2 * item 3
~~~ use number [0-9] with dot for ordered list. 1. one 1. two 0. three 4. Four ~~~	use number [0-9] with dot for ordered list. 1. one 1. two 0. three 4. Four	use number [0-9] with dot for ordered list. 1. one 1. two 0. three 4. Four
~~~ indent for nested list, max 2 level, level 1 should be unordered list * colors + red + green + blue * numbers 1. one 2. two * languages 0. javascript 0. python 0. c, c++ * OS - Windows - Linux - macOS ~~~	indent for nested list, max 2 level, level 1 should be unordered list * colors + red + green + blue * numbers 1. one 2. two * languages 0. javascript 0. python 0. c, c++ * OS - Windows - Linux - macOS	indent for nested list, max 2 level, level 1 should be unordered list * colors + red + green + blue * numbers 1. one 2. two * languages 0. javascript 0. python 0. c, c++ * OS - Windows - Linux - macOS

### Links and Images

Markdown

HTML

~~~ * Link to [google](https://google.com) * Link with title [youtube](https://youtube.com "google") * Link in new tab [google](https://google.com "new") * quick link: * direct link: https://youtube.com * link as text [https://youtube.com]() * Show Image  * Show Image with options (width=380px or style="width:70%")   ~~~

* Link to [google](https://google.com) * Link with title [youtube](https://youtube.com "google") * Link in new tab [google](https://google.com "new") * quick link: <https://youtube.com> * direct link: https://youtube.com * link as text [https://youtube.com]() * Show Image  * Show Image with options (width=380px or style="width:70%")  

**Rendered Layout** * Link to [google](https://google.com) * Link with title [youtube](https://youtube.com "google") * Link in new tab [google](https://google.com "new") * quick link: * direct link: https://youtube.com * link as text [https://youtube.com]() * Show Image  * Show Image with options (width=380px or style="width:70%")   ### Escaping Characters

Markdown	HTML	Rendered Layout
~~~ \` \~ \_ \* \+ \- \. \^ \\ \< \> \( \) \[ \] ~~~	\` \~ \_ \* \+ \- \. \^ \\ \< \> \( \) \[ \]	\` \~ \_ \* \+ \- \. \^ \\ \< \> \( \) \[ \]

### Tables below is a typical table ~~~ header1 | Header2 | Header3 ---------|---------|-------- row1,c1 | row1, c2 | row1, c3 r2,col1 | r2,col2 | r2,col3 row3,col1 | row3,col2 | row3,col3 | row4,col1 | row4,col2 | row4,col3 | | row5,col1 | row5,col2 | also ok also ok | row6,col2 | row6,col3 | ~~~ the render output like below header1 | Header2 | Header3 ---------|---------|-------- row1,c1 | row1, c2 | row1, c3 r2,col1 | r2,col2 | r2,col3 row3,col1 | row3,col2 | row3,col3 | row4,col1 | row4,col2 | row4,col3 | | row5,col1 | row5,col2 | also ok also ok | row6,col2 | row6,col3 | ### Enhanced Syntax {enhanced-syntax} The following enhanced syntax are support by the [casual-markdown](https://github.com/casualwriter/casual-markdown) parser. however, be aware compatibility issue if document will be parsed by other parser (e.g. github) * Specify ID for Header. ie. ``\n## header {id} [#*]`` => ``

header

`` * Specify title for Code-Block. ie. ``\n~\~\~ {title}\n{code-block}\n~\~\~`` => ``

{code-block}

`` * Highlight keyword within code-block based on title. ie. ``\n~\~\~ sql\n{sql scripts}\n~\~\~`` to highlight keyword of SQL * link as text. ie. `[link]\()` => ``{link}`` * text as link for url. ie. ```` => ``https://{url}`` * Open link in new page. i.e. ``[text]\(url "new")`` => ``text`` * Specify title for Link i.e. ``[text]\(url "title")`` => ``text`` * Specify property for image. ie. `![title]\(image "{width=400px,etc..}")` * table support (if second line likes `\-\-|\-\-`) * __Underline__ by `_\_Underline_\_` => `text` * ~~Strikethrough~~ by `~\~Strikethrough~\~` => ``text` * ^^highlight^^ by `^\^highlight^\^` => ``text`` * ^^^mark text^^^ by `^\^\^highlight^\^\^` => ``text``, ^^^supported within code-block^^^ * Escaping Characters `` \` \~ \_ \* \+ \- \. \^ \\ < > \( \) \[ \] `` ### Frontmatter for simple YAML Support frontmatter for simple YAML, only support string value at first level (i.e. key = value) Frontmatter start with `---` (at least three) in first line of markdown document, for example ``` ----------------------------------------------------------------------------- github : https://github.com/casualwriter/casual-markdown title : Casual-Markdown toc : leftspy menu : Syntax : cmd-syntax.md Document : cmd-document.md Blog : cmd-blog.md ----------------------------------------------------------------------------- ## ^^^{{ title }}^^^ [casual-markdown](^^^{{github}}^^^) is a super lightweight RegExp-based markdown parser, with TOC and scrollspy support ``` After called md.html(), js program may refer these values by `md.yaml[name]` (i.e. md.yaml = { title:'Casual Markdown', toc:'leftspy', .... }) and html string with ``{{ name }}`` will be replaced with related values ## Notes ### Modification History * 2021/10/06, v0.50, initial version * 2021/10/09, v0.60, add scrollspy feature * 2021/10/11, v0.63, rewrite code-block, highlight remarks and keywords * 2021/10/12, v0.64, support table syntax * 2021/10/20, v0.66, minor fixes. support nested unordered list. * 2022/07/18, v0.70, refine table syntax * 2022/07/19, v0.80, toc support with scrollspy * 2022/07/21, v0.82, refine toc/scrollspy, add md.before(), md.after() * 2022/07/22, v0.85, frontmatter for simple YAML * 2022/07/31, v0.90, support indent YAML, use md file for https://casualwriter.github.io/casual-markdown/