component---src-pages-content-articles-cheatsheets-markdown-index-md-c7b81fb4006bdd5991f7.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[20],{sGrm:function(e,a,t){"use strict";t.r(a),t.d(a,"_frontmatter",(function(){return n})),t.d(a,"default",(function(){return l}));t("rGqo"),t("yt8O"),t("Btvt"),t("RW0V"),t("91GP"),t("q1tI");var s=t("7ljp");var n={templateKey:"article",published:!0,displayComments:!0,showAuthorInfo:!1,author:"narramadan",title:"Markdown Cheatsheet",description:"Markdown is a lightweight markup language with plain text formatting syntax. Below is the syntax cheatsheet for quick reference to get things done with Markdown.",date:"2020-01-22T15:00:00.000Z",updated:"2020-01-22T15:00:00.000Z",cover:"../../../images/blog-banners/cheatsheet-banner-1200x690.png",category:"cheetsheets",tags:["markdown","cheatsheets","featured"],keywords:["markdown","cheatsheet","how to do in markdown"]},m=function(e){return function(a){return console.warn("Component "+e+" was not imported, exported, or provided by MDXProvider as global scope"),Object(s.mdx)("div",a)}},r=m("Seperator"),i=m("Todo"),c=m("ExternalLink"),d={_frontmatter:n};function l(e){var a=e.components,t=function(e,a){if(null==e)return{};var t,s,n={},m=Object.keys(e);for(s=0;s<m.length;s++)t=m[s],a.indexOf(t)>=0||(n[t]=e[t]);return n}(e,["components"]);return Object(s.mdx)("wrapper",Object.assign({},d,t,{components:a,mdxType:"MDXLayout"}),Object(s.mdx)("h2",null,"Markdown syntax"),Object(s.mdx)("p",null,"Markdown is a lightweight markup language with plain text formatting syntax. Below is the syntax cheatsheet for quick reference to get things done with Markdown."),Object(s.mdx)("h3",null,"Headers"),Object(s.mdx)("div",{className:"gatsby-highlight","data-language":"text"},Object(s.mdx)("pre",Object.assign({parentName:"div"},{className:"language-text"}),Object(s.mdx)("code",Object.assign({parentName:"pre"},{className:"language-text"}),"Heading 1 - Markup :  \n\n# Heading 1\n# Heading 1 #\n============= (below H1 text)"))),Object(s.mdx)(r,{mdxType:"Seperator"}),Object(s.mdx)("div",{className:"gatsby-highlight","data-language":"text"},Object(s.mdx)("pre",Object.assign({parentName:"div"},{className:"language-text"}),Object(s.mdx)("code",Object.assign({parentName:"pre"},{className:"language-text"}),"Heading 2 - Markup :  \n\n## Heading 2\n## Heading 2 ##"))),Object(s.mdx)(r,{mdxType:"Seperator"}),Object(s.mdx)("div",{className:"gatsby-highlight","data-language":"text"},Object(s.mdx)("pre",Object.assign({parentName:"div"},{className:"language-text"}),Object(s.mdx)("code",Object.assign({parentName:"pre"},{className:"language-text"}),"Heading 3 - Markup :  \n\n### Heading 3\n### Heading 3 ###"))),Object(s.mdx)(r,{mdxType:"Seperator"}),Object(s.mdx)("div",{className:"gatsby-highlight","data-language":"text"},Object(s.mdx)("pre",Object.assign({parentName:"div"},{className:"language-text"}),Object(s.mdx)("code",Object.assign({parentName:"pre"},{className:"language-text"}),"Heading 4 - Markup :  \n\n#### Heading 4\n#### Heading 4 ####"))),Object(s.mdx)(r,{mdxType:"Seperator"}),Object(s.mdx)("div",{className:"gatsby-highlight","data-language":"text"},Object(s.mdx)("pre",Object.assign({parentName:"div"},{className:"language-text"}),Object(s.mdx)("code",Object.assign({parentName:"pre"},{className:"language-text"}),"Heading 5 - Markup :  \n\n##### Heading 5\n##### Heading 5 #####"))),Object(s.mdx)("h3",null,"Emphasis"),Object(s.mdx)("p",null,"Common text"),Object(s.mdx)("div",{className:"gatsby-highlight","data-language":"text"},Object(s.mdx)("pre",Object.assign({parentName:"div"},{className:"language-text"}),Object(s.mdx)("code",Object.assign({parentName:"pre"},{className:"language-text"}),"Markup :  Common text"))),Object(s.mdx)("p",null,Object(s.mdx)("em",{parentName:"p"},"Emphasized text")),Object(s.mdx)("div",{className:"gatsby-highlight","data-language":"text"},Object(s.mdx)("pre",Object.assign({parentName:"div"},{className:"language-text"}),Object(s.mdx)("code",Object.assign({parentName:"pre"},{className:"language-text"}),"Markup :  _Emphasized text_ or *Emphasized text*"))),Object(s.mdx)("p",null,Object(s.mdx)("del",{parentName:"p"},"Strikethrough text")),Object(s.mdx)("div",{className:"gatsby-highlight","data-language":"text"},Object(s.mdx)("pre",Object.assign({parentName:"div"},{className:"language-text"}),Object(s.mdx)("code",Object.assign({parentName:"pre"},{className:"language-text"}),"Markup :  ~~Strikethrough text~~"))),Object(s.mdx)("p",null,Object(s.mdx)("strong",{parentName:"p"},"Strong text")),Object(s.mdx)("div",{className:"gatsby-highlight","data-language":"text"},Object(s.mdx)("pre",Object.assign({parentName:"div"},{className:"language-text"}),Object(s.mdx)("code",Object.assign({parentName:"pre"},{className:"language-text"}),"Markup :  __Strong text__ or **Strong text**"))),Object(s.mdx)("p",null,Object(s.mdx)("strong",{parentName:"p"},Object(s.mdx)("em",{parentName:"strong"},"Strong emphasized text"))),Object(s.mdx)("div",{className:"gatsby-highlight","data-language":"text"},Object(s.mdx)("pre",Object.assign({parentName:"div"},{className:"language-text"}),Object(s.mdx)("code",Object.assign({parentName:"pre"},{className:"language-text"}),"Markup :  ___Strong emphasized text___ or ***Strong emphasized text***"))),Object(s.mdx)("span",{style:{color:"red"}},"Colored Text"),Object(s.mdx)("div",{className:"gatsby-highlight","data-language":"text"},Object(s.mdx)("pre",Object.assign({parentName:"div"},{className:"language-text"}),Object(s.mdx)("code",Object.assign({parentName:"pre"},{className:"language-text"}),'Markup: <span style="color:red">**No**</span>'))),Object(s.mdx)("h3",null,"Backslash Escapes"),Object(s.mdx)("p",null,"Markdown allows you to use backslash escapes to generate literal characters which would otherwise have special meaning in Markdown’s formatting syntax. For example, if you wanted to surround a word with literal asterisks (instead of an HTML ",Object(s.mdx)("em",null)," tag), you can use backslashes before the asterisks, like this"),Object(s.mdx)("div",{className:"gatsby-highlight","data-language":"text"},Object(s.mdx)("pre",Object.assign({parentName:"div"},{className:"language-text"}),Object(s.mdx)("code",Object.assign({parentName:"pre"},{className:"language-text"}),"\\*literal asterisks\\*"))),Object(s.mdx)("p",null,"Markdown provides backslash escapes for the following characters:"),Object(s.mdx)("div",{className:"gatsby-highlight","data-language":"text"},Object(s.mdx)("pre",Object.assign({parentName:"div"},{className:"language-text"}),Object(s.mdx)("code",Object.assign({parentName:"pre"},{className:"language-text"}),"\\   backslash\n`   backtick\n*   asterisk\n_   underscore\n{}  curly braces\n[]  square brackets\n()  parentheses\n#   hash mark\n+   plus sign\n-   minus sign (hyphen)\n.   dot\n!   exclamation mark"))),Object(s.mdx)("h3",null,"Links"),Object(s.mdx)("p",null,Object(s.mdx)("a",Object.assign({parentName:"p"},{href:"http://2much2learn.com/",title:"Named link title"}),"Named Link")," and ",Object(s.mdx)("a",Object.assign({parentName:"p"},{href:"http://2much2learn.com"}),"http://2much2learn.com")," or ",Object(s.mdx)("a",Object.assign({parentName:"p"},{href:"http://2much2learn.com/"}),"http://2much2learn.com/")),Object(s.mdx)("div",{className:"gatsby-highlight","data-language":"text"},Object(s.mdx)("pre",Object.assign({parentName:"div"},{className:"language-text"}),Object(s.mdx)("code",Object.assign({parentName:"pre"},{className:"language-text"}),'Markup :  \n\n[Named Link](http://2much2learn.com "Named link title") \nhttp://2much2learn.com\n<http://2much2learn.com>\n<a href="http://2much2learn.com" target="_blank">2 much 2 learn</a>'))),Object(s.mdx)("h3",null,"Internal Links"),Object(s.mdx)("p",null,"If you have headers in the markdown files, you can directly link them in the file."),Object(s.mdx)("p",null,"Markdown Header"),Object(s.mdx)("div",{className:"gatsby-highlight","data-language":"text"},Object(s.mdx)("pre",Object.assign({parentName:"div"},{className:"language-text"}),Object(s.mdx)("code",Object.assign({parentName:"pre"},{className:"language-text"}),"# Heading 1"))),Object(s.mdx)("p",null,"this will generate an implicit id #heading-1 (replace internal spaces with hyphens and make lowercase)."),Object(s.mdx)("p",null,"To navigate to this id, you can create the link like this:"),Object(s.mdx)("p",null,Object(s.mdx)("a",Object.assign({parentName:"p"},{href:"#heading-1",title:"Goto heading-1"}),"heading-1")),Object(s.mdx)("div",{className:"gatsby-highlight","data-language":"text"},Object(s.mdx)("pre",Object.assign({parentName:"div"},{className:"language-text"}),Object(s.mdx)("code",Object.assign({parentName:"pre"},{className:"language-text"}),'Markup: [heading-1](#heading-1 "Goto heading-1")'))),Object(s.mdx)("h3",null,"Tables"),Object(s.mdx)("p",null,"Table, like this one :"),Object(s.mdx)("table",null,Object(s.mdx)("thead",{parentName:"table"},Object(s.mdx)("tr",{parentName:"thead"},Object(s.mdx)("th",Object.assign({parentName:"tr"},{align:null}),"First Header"),Object(s.mdx)("th",Object.assign({parentName:"tr"},{align:null}),"Second Header"))),Object(s.mdx)("tbody",{parentName:"table"},Object(s.mdx)("tr",{parentName:"tbody"},Object(s.mdx)("td",Object.assign({parentName:"tr"},{align:null}),"Content Cell"),Object(s.mdx)("td",Object.assign({parentName:"tr"},{align:null}),"Content Cell")),Object(s.mdx)("tr",{parentName:"tbody"},Object(s.mdx)("td",Object.assign({parentName:"tr"},{align:null}),"Content Cell"),Object(s.mdx)("td",Object.assign({parentName:"tr"},{align:null}),"Content Cell")))),Object(s.mdx)("div",{className:"gatsby-highlight","data-language":"text"},Object(s.mdx)("pre",Object.assign({parentName:"div"},{className:"language-text"}),Object(s.mdx)("code",Object.assign({parentName:"pre"},{className:"language-text"}),"Markdown:\n\nFirst Header  | Second Header\n------------- | -------------\nContent Cell  | Content Cell\nContent Cell  | Content Cell"))),Object(s.mdx)("table",null,Object(s.mdx)("thead",{parentName:"table"},Object(s.mdx)("tr",{parentName:"thead"},Object(s.mdx)("th",Object.assign({parentName:"tr"},{align:null}),"Option"),Object(s.mdx)("th",Object.assign({parentName:"tr"},{align:null}),"Description"))),Object(s.mdx)("tbody",{parentName:"table"},Object(s.mdx)("tr",{parentName:"tbody"},Object(s.mdx)("td",Object.assign({parentName:"tr"},{align:null}),"data"),Object(s.mdx)("td",Object.assign({parentName:"tr"},{align:null}),"path to data files to supply the data that will be passed into templates.")),Object(s.mdx)("tr",{parentName:"tbody"},Object(s.mdx)("td",Object.assign({parentName:"tr"},{align:null}),"engine"),Object(s.mdx)("td",Object.assign({parentName:"tr"},{align:null}),"engine to be used for processing templates. Handlebars is the default.")),Object(s.mdx)("tr",{parentName:"tbody"},Object(s.mdx)("td",Object.assign({parentName:"tr"},{align:null}),"ext"),Object(s.mdx)("td",Object.assign({parentName:"tr"},{align:null}),"extension to be used for dest files.")))),Object(s.mdx)("div",{className:"gatsby-highlight","data-language":"text"},Object(s.mdx)("pre",Object.assign({parentName:"div"},{className:"language-text"}),Object(s.mdx)("code",Object.assign({parentName:"pre"},{className:"language-text"}),"markdown:\n\n| Option | Description                                                               |\n| ------ | ------------------------------------------------------------------------- |\n| data   | path to data files to supply the data that will be passed into templates. |\n| engine | engine to be used for processing templates. Handlebars is the default.    |\n| ext    | extension to be used for dest files.                                      |"))),Object(s.mdx)("p",null,"Each column can be aligned ",Object(s.mdx)("code",Object.assign({parentName:"p"},{className:"language-text"}),"left"),", ",Object(s.mdx)("code",Object.assign({parentName:"p"},{className:"language-text"}),"right"),", or ",Object(s.mdx)("code",Object.assign({parentName:"p"},{className:"language-text"}),"center"),". The alignment is set by using a pattern of dashes and a colon separated by spaces and pipes."),Object(s.mdx)("ul",null,Object(s.mdx)("li",{parentName:"ul"},"To ",Object(s.mdx)("code",Object.assign({parentName:"li"},{className:"language-text"}),"left-align")," a column, put a colon to the left of two dashes ",Object(s.mdx)("code",Object.assign({parentName:"li"},{className:"language-text"}),":--"),". "),Object(s.mdx)("li",{parentName:"ul"},"To ",Object(s.mdx)("code",Object.assign({parentName:"li"},{className:"language-text"}),"right-align"),", put a colon to the right of two dashes ",Object(s.mdx)("code",Object.assign({parentName:"li"},{className:"language-text"}),"--:"),"."),Object(s.mdx)("li",{parentName:"ul"},"To ",Object(s.mdx)("code",Object.assign({parentName:"li"},{className:"language-text"}),"center-align"),", surround a dash with two colons ",Object(s.mdx)("code",Object.assign({parentName:"li"},{className:"language-text"}),":-:"),".")),Object(s.mdx)("p",null,"Right aligned columns"),Object(s.mdx)("table",null,Object(s.mdx)("thead",{parentName:"table"},Object(s.mdx)("tr",{parentName:"thead"},Object(s.mdx)("th",Object.assign({parentName:"tr"},{align:"right"}),"Option"),Object(s.mdx)("th",Object.assign({parentName:"tr"},{align:"right"}),"Description"))),Object(s.mdx)("tbody",{parentName:"table"},Object(s.mdx)("tr",{parentName:"tbody"},Object(s.mdx)("td",Object.assign({parentName:"tr"},{align:"right"}),"data"),Object(s.mdx)("td",Object.assign({parentName:"tr"},{align:"right"}),"path to data files to supply the data that will be passed into templates.")),Object(s.mdx)("tr",{parentName:"tbody"},Object(s.mdx)("td",Object.assign({parentName:"tr"},{align:"right"}),"engine"),Object(s.mdx)("td",Object.assign({parentName:"tr"},{align:"right"}),"engine to be used for processing templates. Handlebars is the default.")),Object(s.mdx)("tr",{parentName:"tbody"},Object(s.mdx)("td",Object.assign({parentName:"tr"},{align:"right"}),"ext"),Object(s.mdx)("td",Object.assign({parentName:"tr"},{align:"right"}),"extension to be used for dest files.")))),Object(s.mdx)("div",{className:"gatsby-highlight","data-language":"text"},Object(s.mdx)("pre",Object.assign({parentName:"div"},{className:"language-text"}),Object(s.mdx)("code",Object.assign({parentName:"pre"},{className:"language-text"}),"markdown:\n\n| Option |                                                               Description |\n| -----: | ------------------------------------------------------------------------: |\n|   data | path to data files to supply the data that will be passed into templates. |\n| engine |    engine to be used for processing templates. Handlebars is the default. |\n|    ext |                                      extension to be used for dest files. |"))),Object(s.mdx)("h3",null,"Code Blocks"),Object(s.mdx)("p",null,Object(s.mdx)("code",Object.assign({parentName:"p"},{className:"language-text"}),"code()")),Object(s.mdx)("div",{className:"gatsby-highlight","data-language":"text"},Object(s.mdx)("pre",Object.assign({parentName:"div"},{className:"language-text"}),Object(s.mdx)("code",Object.assign({parentName:"pre"},{className:"language-text"}),"Markup :  `code()`"))),Object(s.mdx)("div",{className:"gatsby-highlight","data-language":"javascript"},Object(s.mdx)("pre",Object.assign({parentName:"div"},{className:"language-javascript"}),Object(s.mdx)("code",Object.assign({parentName:"pre"},{className:"language-javascript"}),"    ",Object(s.mdx)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"var")," specificLanguage_code ",Object(s.mdx)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," \n    ",Object(s.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n        ",Object(s.mdx)("span",Object.assign({parentName:"code"},{className:"token string"}),'"data"'),Object(s.mdx)("span",Object.assign({parentName:"code"},{className:"token operator"}),":")," ",Object(s.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n            ",Object(s.mdx)("span",Object.assign({parentName:"code"},{className:"token string"}),'"key"'),Object(s.mdx)("span",Object.assign({parentName:"code"},{className:"token operator"}),":")," ",Object(s.mdx)("span",Object.assign({parentName:"code"},{className:"token number"}),"1"),Object(s.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),","),"\n            ",Object(s.mdx)("span",Object.assign({parentName:"code"},{className:"token string"}),'"query"'),Object(s.mdx)("span",Object.assign({parentName:"code"},{className:"token operator"}),":")," ",Object(s.mdx)("span",Object.assign({parentName:"code"},{className:"token string"}),'"2much+2learn"'),Object(s.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),","),"\n            ",Object(s.mdx)("span",Object.assign({parentName:"code"},{className:"token string"}),'"lookedUpItem"'),Object(s.mdx)("span",Object.assign({parentName:"code"},{className:"token operator"}),":")," ",Object(s.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n                ",Object(s.mdx)("span",Object.assign({parentName:"code"},{className:"token string"}),'"name"'),Object(s.mdx)("span",Object.assign({parentName:"code"},{className:"token operator"}),":")," ",Object(s.mdx)("span",Object.assign({parentName:"code"},{className:"token string"}),'"Java8"'),Object(s.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),","),"\n                ",Object(s.mdx)("span",Object.assign({parentName:"code"},{className:"token string"}),'"author"'),Object(s.mdx)("span",Object.assign({parentName:"code"},{className:"token operator"}),":")," ",Object(s.mdx)("span",Object.assign({parentName:"code"},{className:"token string"}),'"narramadan"'),Object(s.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),","),"\n                ",Object(s.mdx)("span",Object.assign({parentName:"code"},{className:"token string"}),'"picture"'),Object(s.mdx)("span",Object.assign({parentName:"code"},{className:"token operator"}),":")," ",Object(s.mdx)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"null"),Object(s.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),","),"\n                ",Object(s.mdx)("span",Object.assign({parentName:"code"},{className:"token string"}),'"link"'),Object(s.mdx)("span",Object.assign({parentName:"code"},{className:"token operator"}),":")," ",Object(s.mdx)("span",Object.assign({parentName:"code"},{className:"token string"}),'"http://2much2learn.com/java8"'),"\n            ",Object(s.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n        ",Object(s.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n    ",Object(s.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}")))),Object(s.mdx)("div",{className:"gatsby-highlight","data-language":"text"},Object(s.mdx)("pre",Object.assign({parentName:"div"},{className:"language-text"}),Object(s.mdx)("code",Object.assign({parentName:"pre"},{className:"language-text"}),"Markup : \n\n    ```javascript\n    ```\n\n    ```java\n    ```\n\n    ```xml\n    ```"))),Object(s.mdx)("h3",null,"Lists"),Object(s.mdx)("h5",null,"Unordered List"),Object(s.mdx)("ul",null,Object(s.mdx)("li",{parentName:"ul"},"Bullet list",Object(s.mdx)("ul",{parentName:"li"},Object(s.mdx)("li",{parentName:"ul"},"Nested bullet",Object(s.mdx)("ul",{parentName:"li"},Object(s.mdx)("li",{parentName:"ul"},"Sub-nested bullet etc"))))),Object(s.mdx)("li",{parentName:"ul"},"Bullet list item 2")),Object(s.mdx)("div",{className:"gatsby-highlight","data-language":"text"},Object(s.mdx)("pre",Object.assign({parentName:"div"},{className:"language-text"}),Object(s.mdx)("code",Object.assign({parentName:"pre"},{className:"language-text"})," Markup : * Bullet list\n              * Nested bullet\n                  * Sub-nested bullet etc\n          * Bullet list item 2"))),Object(s.mdx)("h5",null,"Ordered List"),Object(s.mdx)("ol",null,Object(s.mdx)("li",{parentName:"ol"},"A numbered list\n1 A nested numbered list\n2 Which is numbered"),Object(s.mdx)("li",{parentName:"ol"},"Which is numbered")),Object(s.mdx)("div",{className:"gatsby-highlight","data-language":"text"},Object(s.mdx)("pre",Object.assign({parentName:"div"},{className:"language-text"}),Object(s.mdx)("code",Object.assign({parentName:"pre"},{className:"language-text"})," Markup : 1. A numbered list\n              1.1 A nested numbered list\n              1.2 Which is numbered\n          2. Which is numbered"))),Object(s.mdx)("h3",null,"Task List"),Object(s.mdx)("ul",{className:"contains-task-list"},Object(s.mdx)("li",Object.assign({parentName:"ul"},{className:"task-list-item"}),Object(s.mdx)("input",Object.assign({parentName:"li"},{type:"checkbox",checked:!1,disabled:!0}))," ","An uncompleted task"),Object(s.mdx)("li",Object.assign({parentName:"ul"},{className:"task-list-item"}),Object(s.mdx)("input",Object.assign({parentName:"li"},{type:"checkbox",checked:!0,disabled:!0}))," ","A completed task")),Object(s.mdx)("div",{className:"gatsby-highlight","data-language":"text"},Object(s.mdx)("pre",Object.assign({parentName:"div"},{className:"language-text"}),Object(s.mdx)("code",Object.assign({parentName:"pre"},{className:"language-text"})," Markup : - [ ] An uncompleted task\n          - [x] A completed task"))),Object(s.mdx)("h3",null,"Blockquotes"),Object(s.mdx)("blockquote",null,Object(s.mdx)("p",{parentName:"blockquote"},"Blockquote")),Object(s.mdx)("div",{className:"gatsby-highlight","data-language":"text"},Object(s.mdx)("pre",Object.assign({parentName:"div"},{className:"language-text"}),Object(s.mdx)("code",Object.assign({parentName:"pre"},{className:"language-text"}),"Markup :  > Blockquote"))),Object(s.mdx)("h3",null,"Horizontal Rules"),Object(s.mdx)("hr",null),Object(s.mdx)("div",{className:"gatsby-highlight","data-language":"text"},Object(s.mdx)("pre",Object.assign({parentName:"div"},{className:"language-text"}),Object(s.mdx)("code",Object.assign({parentName:"pre"},{className:"language-text"}),"Markup :  ---- (hyphens)\n          **** (asterisks)\n          ____ (underscores)"))),Object(s.mdx)("h3",null,"Images"),Object(s.mdx)("p",null,Object(s.mdx)("em",{parentName:"p"},"Mouse over to see alt")),Object(s.mdx)("p",null,Object(s.mdx)("img",Object.assign({parentName:"p"},{src:"http://via.placeholder.com/200x150",alt:"picture alt",title:"Title is optional"}))),Object(s.mdx)("div",{className:"gatsby-highlight","data-language":"text"},Object(s.mdx)("pre",Object.assign({parentName:"div"},{className:"language-text"}),Object(s.mdx)("code",Object.assign({parentName:"pre"},{className:"language-text"}),'Markup : \n\n![picture alt](http://via.placeholder.com/200x150 "Title is optional")\n![picture alt](/images/logo.png)\n![picture alt](/images/logo.png "Image Title")\n![picture alt](http://via.placeholder.com/200x150)\n![picture alt](http://via.placeholder.com/200x150 "Title")\n[picture alt]: http://via.placeholder.com/200x150'))),Object(s.mdx)("h3",null,"Foldable text"),Object(s.mdx)("details",null,Object(s.mdx)("summary",null,"Title 1"),Object(s.mdx)("p",null,"Content 1 Content 1 Content 1 Content 1 Content 1")),Object(s.mdx)("details",null,Object(s.mdx)("summary",null,"Title 2"),Object(s.mdx)("p",null,"Content 2 Content 2 Content 2 Content 2 Content 2")),Object(s.mdx)("div",{className:"gatsby-highlight","data-language":"text"},Object(s.mdx)("pre",Object.assign({parentName:"div"},{className:"language-text"}),Object(s.mdx)("code",Object.assign({parentName:"pre"},{className:"language-text"}),"Markup : <details>\n           <summary>Title 1</summary>\n           <p>Content 1 Content 1 Content 1 Content 1 Content 1</p>\n         </details>"))),Object(s.mdx)("h3",null,"HTML text"),Object(s.mdx)("div",{className:"gatsby-highlight","data-language":"html"},Object(s.mdx)("pre",Object.assign({parentName:"div"},{className:"language-html"}),Object(s.mdx)("code",Object.assign({parentName:"pre"},{className:"language-html"}),Object(s.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"h3"),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"HTML",Object(s.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"</"),"h3"),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"\n",Object(s.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"p"),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">"))," Some HTML code here ",Object(s.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"</"),"p"),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">"))))),Object(s.mdx)("h3",null,"Mathematical expressions"),Object(s.mdx)("p",null,"You can render LaTeX mathematical expressions using ",Object(s.mdx)("a",Object.assign({parentName:"p"},{href:"https://github.com/Rokt33r/remark-math"}),"katex-math")),Object(s.mdx)("p",null,"The ",Object(s.mdx)("em",{parentName:"p"},"Gamma function")," satisfying ",Object(s.mdx)("span",Object.assign({parentName:"p"},{className:"katex"}),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"katex-mathml"}),Object(s.mdx)("math",{parentName:"span"},Object(s.mdx)("semantics",{parentName:"math"},Object(s.mdx)("mrow",{parentName:"semantics"},Object(s.mdx)("mi",Object.assign({parentName:"mrow"},{mathvariant:"normal"}),"Γ"),Object(s.mdx)("mo",Object.assign({parentName:"mrow"},{stretchy:"false"}),"("),Object(s.mdx)("mi",{parentName:"mrow"},"n"),Object(s.mdx)("mo",Object.assign({parentName:"mrow"},{stretchy:"false"}),")"),Object(s.mdx)("mo",{parentName:"mrow"},"="),Object(s.mdx)("mo",Object.assign({parentName:"mrow"},{stretchy:"false"}),"("),Object(s.mdx)("mi",{parentName:"mrow"},"n"),Object(s.mdx)("mo",{parentName:"mrow"},"−"),Object(s.mdx)("mn",{parentName:"mrow"},"1"),Object(s.mdx)("mo",Object.assign({parentName:"mrow"},{stretchy:"false"}),")"),Object(s.mdx)("mo",Object.assign({parentName:"mrow"},{stretchy:"false"}),"!"),Object(s.mdx)("mspace",Object.assign({parentName:"mrow"},{width:"1em"})),Object(s.mdx)("mi",Object.assign({parentName:"mrow"},{mathvariant:"normal"}),"∀"),Object(s.mdx)("mi",{parentName:"mrow"},"n"),Object(s.mdx)("mo",{parentName:"mrow"},"∈"),Object(s.mdx)("mi",Object.assign({parentName:"mrow"},{mathvariant:"double-struck"}),"N")),Object(s.mdx)("annotation",Object.assign({parentName:"semantics"},{encoding:"application/x-tex"}),"\\Gamma(n) = (n-1)!\\quad\\forall n\\in\\mathbb N")))),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"katex-html","aria-hidden":"true"}),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"base"}),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"strut",style:{height:"1em",verticalAlign:"-0.25em"}})),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"mord"}),"Γ"),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"mopen"}),"("),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"mord mathdefault"}),"n"),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"mclose"}),")"),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"mspace",style:{marginRight:"0.2777777777777778em"}})),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"mrel"}),"="),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"mspace",style:{marginRight:"0.2777777777777778em"}}))),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"base"}),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"strut",style:{height:"1em",verticalAlign:"-0.25em"}})),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"mopen"}),"("),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"mord mathdefault"}),"n"),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"mspace",style:{marginRight:"0.2222222222222222em"}})),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"mbin"}),"−"),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"mspace",style:{marginRight:"0.2222222222222222em"}}))),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"base"}),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"strut",style:{height:"1em",verticalAlign:"-0.25em"}})),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"mord"}),"1"),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"mclose"}),")"),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"mclose"}),"!"),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"mspace",style:{marginRight:"1em"}})),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"mord"}),"∀"),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"mord mathdefault"}),"n"),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"mspace",style:{marginRight:"0.2777777777777778em"}})),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"mrel"}),"∈"),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"mspace",style:{marginRight:"0.2777777777777778em"}}))),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"base"}),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"strut",style:{height:"0.68889em",verticalAlign:"0em"}})),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"mord mathbb"}),"N"))))," is via the Euler integral"),Object(s.mdx)("span",{className:"katex-display"},Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"katex"}),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"katex-mathml"}),Object(s.mdx)("math",{parentName:"span"},Object(s.mdx)("semantics",{parentName:"math"},Object(s.mdx)("mrow",{parentName:"semantics"},Object(s.mdx)("mi",Object.assign({parentName:"mrow"},{mathvariant:"normal"}),"Γ"),Object(s.mdx)("mo",Object.assign({parentName:"mrow"},{stretchy:"false"}),"("),Object(s.mdx)("mi",{parentName:"mrow"},"z"),Object(s.mdx)("mo",Object.assign({parentName:"mrow"},{stretchy:"false"}),")"),Object(s.mdx)("mo",{parentName:"mrow"},"="),Object(s.mdx)("msubsup",{parentName:"mrow"},Object(s.mdx)("mo",{parentName:"msubsup"},"∫"),Object(s.mdx)("mn",{parentName:"msubsup"},"0"),Object(s.mdx)("mi",Object.assign({parentName:"msubsup"},{mathvariant:"normal"}),"∞")),Object(s.mdx)("msup",{parentName:"mrow"},Object(s.mdx)("mi",{parentName:"msup"},"t"),Object(s.mdx)("mrow",{parentName:"msup"},Object(s.mdx)("mi",{parentName:"mrow"},"z"),Object(s.mdx)("mo",{parentName:"mrow"},"−"),Object(s.mdx)("mn",{parentName:"mrow"},"1"))),Object(s.mdx)("msup",{parentName:"mrow"},Object(s.mdx)("mi",{parentName:"msup"},"e"),Object(s.mdx)("mrow",{parentName:"msup"},Object(s.mdx)("mo",{parentName:"mrow"},"−"),Object(s.mdx)("mi",{parentName:"mrow"},"t"))),Object(s.mdx)("mi",{parentName:"mrow"},"d"),Object(s.mdx)("mi",{parentName:"mrow"},"t"),Object(s.mdx)("mtext",{parentName:"mrow"}," "),Object(s.mdx)("mi",Object.assign({parentName:"mrow"},{mathvariant:"normal"}),".")),Object(s.mdx)("annotation",Object.assign({parentName:"semantics"},{encoding:"application/x-tex"}),"\\Gamma(z) = \\int_0^\\infty t^{z-1}e^{-t}dt\\,.")))),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"katex-html","aria-hidden":"true"}),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"base"}),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"strut",style:{height:"1em",verticalAlign:"-0.25em"}})),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"mord"}),"Γ"),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"mopen"}),"("),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"mord mathdefault",style:{marginRight:"0.04398em"}}),"z"),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"mclose"}),")"),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"mspace",style:{marginRight:"0.2777777777777778em"}})),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"mrel"}),"="),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"mspace",style:{marginRight:"0.2777777777777778em"}}))),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"base"}),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"strut",style:{height:"2.326242em",verticalAlign:"-0.9119499999999999em"}})),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"mop"}),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"mop op-symbol large-op",style:{marginRight:"0.44445em",position:"relative",top:"-0.0011249999999999316em"}}),"∫"),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"msupsub"}),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"vlist-t vlist-t2"}),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"vlist-r"}),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"vlist",style:{height:"1.414292em"}}),Object(s.mdx)("span",Object.assign({parentName:"span"},{style:{top:"-1.7880500000000001em",marginLeft:"-0.44445em",marginRight:"0.05em"}}),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"pstrut",style:{height:"2.7em"}})),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"sizing reset-size6 size3 mtight"}),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"mord mtight"}),"0"))),Object(s.mdx)("span",Object.assign({parentName:"span"},{style:{top:"-3.8129000000000004em",marginRight:"0.05em"}}),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"pstrut",style:{height:"2.7em"}})),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"sizing reset-size6 size3 mtight"}),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"mord mtight"}),"∞")))),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"vlist-s"}),"​")),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"vlist-r"}),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"vlist",style:{height:"0.9119499999999999em"}}),Object(s.mdx)("span",{parentName:"span"})))))),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"mspace",style:{marginRight:"0.16666666666666666em"}})),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"mord"}),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"mord mathdefault"}),"t"),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"msupsub"}),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"vlist-t"}),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"vlist-r"}),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"vlist",style:{height:"0.864108em"}}),Object(s.mdx)("span",Object.assign({parentName:"span"},{style:{top:"-3.113em",marginRight:"0.05em"}}),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"pstrut",style:{height:"2.7em"}})),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"sizing reset-size6 size3 mtight"}),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"mord mtight"}),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"mord mathdefault mtight",style:{marginRight:"0.04398em"}}),"z"),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"mbin mtight"}),"−"),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"mord mtight"}),"1"))))))))),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"mord"}),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"mord mathdefault"}),"e"),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"msupsub"}),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"vlist-t"}),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"vlist-r"}),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"vlist",style:{height:"0.843556em"}}),Object(s.mdx)("span",Object.assign({parentName:"span"},{style:{top:"-3.113em",marginRight:"0.05em"}}),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"pstrut",style:{height:"2.7em"}})),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"sizing reset-size6 size3 mtight"}),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"mord mtight"}),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"mord mtight"}),"−"),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"mord mathdefault mtight"}),"t"))))))))),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"mord mathdefault"}),"d"),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"mord mathdefault"}),"t"),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"mspace",style:{marginRight:"0.16666666666666666em"}})),Object(s.mdx)("span",Object.assign({parentName:"span"},{className:"mord"}),"."))))),Object(s.mdx)("h3",null,"UML diagrams"),Object(s.mdx)("p",null,"Generation of diagrams and flowcharts from text in a similar manner as markdown is achieved using ",Object(s.mdx)("a",Object.assign({parentName:"p"},{href:"https://mermaid-js.github.io/mermaid/"}),"mermaid"),"."),Object(s.mdx)("p",null,"You can render UML diagrams, this will produce a sequence diagram:"),Object(s.mdx)("div",{className:"mermaid","data-processed":"true"},Object(s.mdx)("svg",Object.assign({parentName:"div"},{id:"mermaid-1580701146141",width:"100%",xmlns:"http://www.w3.org/2000/svg",height:"100%",style:{maxWidth:"750px"},viewBox:"-50 -10 750 465"}),Object(s.mdx)("style",{parentName:"svg"},"#mermaid-1580701146141 .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);color:#333}#mermaid-1580701146141 .label text{fill:#333}#mermaid-1580701146141 .node rect,#mermaid-1580701146141 .node circle,#mermaid-1580701146141 .node ellipse,#mermaid-1580701146141 .node polygon,#mermaid-1580701146141 .node path{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-1580701146141 .node .label{text-align:center}#mermaid-1580701146141 .node.clickable{cursor:pointer}#mermaid-1580701146141 .arrowheadPath{fill:#333}#mermaid-1580701146141 .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-1580701146141 .edgeLabel{background-color:#e8e8e8;text-align:center}#mermaid-1580701146141 .cluster rect{fill:#ffffde;stroke:#aa3;stroke-width:1px}#mermaid-1580701146141 .cluster text{fill:#333}#mermaid-1580701146141 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:12px;background:#ffffde;border:1px solid #aa3;border-radius:2px;pointer-events:none;z-index:100}#mermaid-1580701146141 .actor{stroke:#ccf;fill:#ECECFF}#mermaid-1580701146141 text.actor{fill:#000;stroke:none}#mermaid-1580701146141 .actor-line{stroke:grey}#mermaid-1580701146141 .messageLine0{stroke-width:1.5;stroke-dasharray:'2 2';stroke:#333}#mermaid-1580701146141 .messageLine1{stroke-width:1.5;stroke-dasharray:'2 2';stroke:#333}#mermaid-1580701146141 #arrowhead{fill:#333}#mermaid-1580701146141 .sequenceNumber{fill:#fff}#mermaid-1580701146141 #sequencenumber{fill:#333}#mermaid-1580701146141 #crosshead path{fill:#333 !important;stroke:#333 !important}#mermaid-1580701146141 .messageText{fill:#333;stroke:none}#mermaid-1580701146141 .labelBox{stroke:#ccf;fill:#ECECFF}#mermaid-1580701146141 .labelText{fill:#000;stroke:none}#mermaid-1580701146141 .loopText{fill:#000;stroke:none}#mermaid-1580701146141 .loopLine{stroke-width:2;stroke-dasharray:'2 2';stroke:#ccf}#mermaid-1580701146141 .note{stroke:#aa3;fill:#fff5ad}#mermaid-1580701146141 .noteText{fill:black;stroke:none;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:14px}#mermaid-1580701146141 .activation0{fill:#f4f4f4;stroke:#666}#mermaid-1580701146141 .activation1{fill:#f4f4f4;stroke:#666}#mermaid-1580701146141 .activation2{fill:#f4f4f4;stroke:#666}#mermaid-1580701146141 .mermaid-main-font{font-family:\"trebuchet ms\", verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-1580701146141 .section{stroke:none;opacity:0.2}#mermaid-1580701146141 .section0{fill:rgba(102,102,255,0.49)}#mermaid-1580701146141 .section2{fill:#fff400}#mermaid-1580701146141 .section1,#mermaid-1580701146141 .section3{fill:#fff;opacity:0.2}#mermaid-1580701146141 .sectionTitle0{fill:#333}#mermaid-1580701146141 .sectionTitle1{fill:#333}#mermaid-1580701146141 .sectionTitle2{fill:#333}#mermaid-1580701146141 .sectionTitle3{fill:#333}#mermaid-1580701146141 .sectionTitle{text-anchor:start;font-size:11px;text-height:14px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-1580701146141 .grid .tick{stroke:#d3d3d3;opacity:0.8;shape-rendering:crispEdges}#mermaid-1580701146141 .grid .tick text{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-1580701146141 .grid path{stroke-width:0}#mermaid-1580701146141 .today{fill:none;stroke:red;stroke-width:2px}#mermaid-1580701146141 .task{stroke-width:2}#mermaid-1580701146141 .taskText{text-anchor:middle;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-1580701146141 .taskText:not([font-size]){font-size:11px}#mermaid-1580701146141 .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-1580701146141 .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-1580701146141 .task.clickable{cursor:pointer}#mermaid-1580701146141 .taskText.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-1580701146141 .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-1580701146141 .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-1580701146141 .taskText0,#mermaid-1580701146141 .taskText1,#mermaid-1580701146141 .taskText2,#mermaid-1580701146141 .taskText3{fill:#fff}#mermaid-1580701146141 .task0,#mermaid-1580701146141 .task1,#mermaid-1580701146141 .task2,#mermaid-1580701146141 .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-1580701146141 .taskTextOutside0,#mermaid-1580701146141 .taskTextOutside2{fill:#000}#mermaid-1580701146141 .taskTextOutside1,#mermaid-1580701146141 .taskTextOutside3{fill:#000}#mermaid-1580701146141 .active0,#mermaid-1580701146141 .active1,#mermaid-1580701146141 .active2,#mermaid-1580701146141 .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-1580701146141 .activeText0,#mermaid-1580701146141 .activeText1,#mermaid-1580701146141 .activeText2,#mermaid-1580701146141 .activeText3{fill:#000 !important}#mermaid-1580701146141 .done0,#mermaid-1580701146141 .done1,#mermaid-1580701146141 .done2,#mermaid-1580701146141 .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-1580701146141 .doneText0,#mermaid-1580701146141 .doneText1,#mermaid-1580701146141 .doneText2,#mermaid-1580701146141 .doneText3{fill:#000 !important}#mermaid-1580701146141 .crit0,#mermaid-1580701146141 .crit1,#mermaid-1580701146141 .crit2,#mermaid-1580701146141 .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-1580701146141 .activeCrit0,#mermaid-1580701146141 .activeCrit1,#mermaid-1580701146141 .activeCrit2,#mermaid-1580701146141 .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-1580701146141 .doneCrit0,#mermaid-1580701146141 .doneCrit1,#mermaid-1580701146141 .doneCrit2,#mermaid-1580701146141 .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-1580701146141 .milestone{transform:rotate(45deg) scale(0.8, 0.8)}#mermaid-1580701146141 .milestoneText{font-style:italic}#mermaid-1580701146141 .doneCritText0,#mermaid-1580701146141 .doneCritText1,#mermaid-1580701146141 .doneCritText2,#mermaid-1580701146141 .doneCritText3{fill:#000 !important}#mermaid-1580701146141 .activeCritText0,#mermaid-1580701146141 .activeCritText1,#mermaid-1580701146141 .activeCritText2,#mermaid-1580701146141 .activeCritText3{fill:#000 !important}#mermaid-1580701146141 .titleText{text-anchor:middle;font-size:18px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-1580701146141 g.classGroup text{fill:#9370db;stroke:none;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:10px}#mermaid-1580701146141 g.classGroup text .title{font-weight:bolder}#mermaid-1580701146141 g.clickable{cursor:pointer}#mermaid-1580701146141 g.classGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-1580701146141 g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-1580701146141 .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5}#mermaid-1580701146141 .classLabel .label{fill:#9370db;font-size:10px}#mermaid-1580701146141 .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-1580701146141 .dashed-line{stroke-dasharray:3}#mermaid-1580701146141 #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-1580701146141 #compositionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-1580701146141 #aggregationStart{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-1580701146141 #aggregationEnd{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-1580701146141 #dependencyStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-1580701146141 #dependencyEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-1580701146141 #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-1580701146141 #extensionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-1580701146141 .commit-id,#mermaid-1580701146141 .commit-msg,#mermaid-1580701146141 .branch-label{fill:lightgrey;color:lightgrey;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-1580701146141 .pieTitleText{text-anchor:middle;font-size:25px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-1580701146141 .slice{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-1580701146141 g.stateGroup text{fill:#9370db;stroke:none;font-size:10px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-1580701146141 g.stateGroup text{fill:#9370db;stroke:none;font-size:10px}#mermaid-1580701146141 g.stateGroup .state-title{font-weight:bolder;fill:#000}#mermaid-1580701146141 g.stateGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-1580701146141 g.stateGroup line{stroke:#9370db;stroke-width:1}#mermaid-1580701146141 .transition{stroke:#9370db;stroke-width:1;fill:none}#mermaid-1580701146141 .stateGroup .composit{fill:white;border-bottom:1px}#mermaid-1580701146141 .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px}#mermaid-1580701146141 .state-note{stroke:#aa3;fill:#fff5ad}#mermaid-1580701146141 .state-note text{fill:black;stroke:none;font-size:10px}#mermaid-1580701146141 .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5}#mermaid-1580701146141 .stateLabel text{fill:#000;font-size:10px;font-weight:bold;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}:root{--mermaid-font-family: '\"trebuchet ms\", verdana, arial';--mermaid-font-family: \"Comic Sans MS\", \"Comic Sans\", cursive}\n\n#mermaid-1580701146141 .node rect { fill: cornflowerblue; }\n:root { --mermaid-font-family: \"trebuchet ms\", verdana, arial;}"),Object(s.mdx)("style",{parentName:"svg"},'#mermaid-1580701146141 {\n    color: rgb(0, 0, 0);\n    font: normal normal 400 normal 16px / normal "trebuchet ms", verdana, arial;\n  }'),Object(s.mdx)("g",{parentName:"svg"}),Object(s.mdx)("g",{parentName:"svg"},Object(s.mdx)("line",Object.assign({parentName:"g"},{id:"actor0",x1:"75",y1:"5",x2:"75",y2:"454",className:"actor-line",strokeWidth:"0.5px",stroke:"#999"})),Object(s.mdx)("rect",Object.assign({parentName:"g"},{x:"0",y:"0",fill:"#eaeaea",stroke:"#666",width:"150",height:"65",rx:"3",ry:"3",className:"actor"})),Object(s.mdx)("text",Object.assign({parentName:"g"},{x:"75",y:"32.5",dominantBaseline:"central",alignmentBaseline:"central",className:"actor",style:{textAnchor:"middle",fontSize:"14px"}}),Object(s.mdx)("tspan",Object.assign({parentName:"text"},{x:"75",dy:"0"}),"Alice"))),Object(s.mdx)("g",{parentName:"svg"},Object(s.mdx)("line",Object.assign({parentName:"g"},{id:"actor1",x1:"275",y1:"5",x2:"275",y2:"454",className:"actor-line",strokeWidth:"0.5px",stroke:"#999"})),Object(s.mdx)("rect",Object.assign({parentName:"g"},{x:"200",y:"0",fill:"#eaeaea",stroke:"#666",width:"150",height:"65",rx:"3",ry:"3",className:"actor"})),Object(s.mdx)("text",Object.assign({parentName:"g"},{x:"275",y:"32.5",dominantBaseline:"central",alignmentBaseline:"central",className:"actor",style:{textAnchor:"middle",fontSize:"14px"}}),Object(s.mdx)("tspan",Object.assign({parentName:"text"},{x:"275",dy:"0"}),"Bob"))),Object(s.mdx)("g",{parentName:"svg"},Object(s.mdx)("line",Object.assign({parentName:"g"},{id:"actor2",x1:"475",y1:"5",x2:"475",y2:"454",className:"actor-line",strokeWidth:"0.5px",stroke:"#999"})),Object(s.mdx)("rect",Object.assign({parentName:"g"},{x:"400",y:"0",fill:"#eaeaea",stroke:"#666",width:"150",height:"65",rx:"3",ry:"3",className:"actor"})),Object(s.mdx)("text",Object.assign({parentName:"g"},{x:"475",y:"32.5",dominantBaseline:"central",alignmentBaseline:"central",className:"actor",style:{textAnchor:"middle",fontSize:"14px"}}),Object(s.mdx)("tspan",Object.assign({parentName:"text"},{x:"475",dy:"0"}),"John"))),Object(s.mdx)("defs",{parentName:"svg"},Object(s.mdx)("marker",Object.assign({parentName:"defs"},{id:"arrowhead",refX:"5",refY:"2",markerWidth:"6",markerHeight:"4",orient:"auto"}),Object(s.mdx)("path",Object.assign({parentName:"marker"},{d:"M 0,0 V 4 L6,2 Z"})))),Object(s.mdx)("defs",{parentName:"svg"},Object(s.mdx)("marker",Object.assign({parentName:"defs"},{id:"crosshead",markerWidth:"15",markerHeight:"8",orient:"auto",refX:"16",refY:"4"}),Object(s.mdx)("path",Object.assign({parentName:"marker"},{fill:"black",stroke:"#000000",strokeWidth:"1px",d:"M 9,2 V 6 L16,4 Z",style:{strokeDasharray:"0, 0"}})),Object(s.mdx)("path",Object.assign({parentName:"marker"},{fill:"none",stroke:"#000000",strokeWidth:"1px",d:"M 0,1 L 6,7 M 6,1 L 0,7",style:{strokeDasharray:"0, 0"}})))),Object(s.mdx)("defs",{parentName:"svg"},Object(s.mdx)("marker",Object.assign({parentName:"defs"},{id:"sequencenumber",refX:"15",refY:"15",markerWidth:"60",markerHeight:"40",orient:"auto"}),Object(s.mdx)("circle",Object.assign({parentName:"marker"},{cx:"15",cy:"15",r:"6"})))),Object(s.mdx)("g",{parentName:"svg"},Object(s.mdx)("text",Object.assign({parentName:"g"},{x:"175",y:"93",className:"messageText",style:{textAnchor:"middle"}}),"Hello Bob, how are you?"),Object(s.mdx)("line",Object.assign({parentName:"g"},{x1:"75",y1:"100",x2:"275",y2:"100",className:"messageLine0",strokeWidth:"2",stroke:"black",markerEnd:"url(#arrowhead)",style:{fill:"none"}}))),Object(s.mdx)("g",{parentName:"svg"},Object(s.mdx)("text",Object.assign({parentName:"g"},{x:"375",y:"128",className:"messageText",style:{textAnchor:"middle"}}),"How about you John?"),Object(s.mdx)("line",Object.assign({parentName:"g"},{x1:"275",y1:"135",x2:"475",y2:"135",className:"messageLine1",strokeWidth:"2",stroke:"black",markerEnd:"url(#arrowhead)",style:{strokeDasharray:"3, 3",fill:"none"}}))),Object(s.mdx)("g",{parentName:"svg"},Object(s.mdx)("text",Object.assign({parentName:"g"},{x:"175",y:"163",className:"messageText",style:{textAnchor:"middle"}}),"I am good thanks!"),Object(s.mdx)("line",Object.assign({parentName:"g"},{x1:"275",y1:"170",x2:"75",y2:"170",className:"messageLine1",strokeWidth:"2",stroke:"black",markerEnd:"url(#crosshead)",style:{strokeDasharray:"3, 3",fill:"none"}}))),Object(s.mdx)("g",{parentName:"svg"},Object(s.mdx)("text",Object.assign({parentName:"g"},{x:"375",y:"198",className:"messageText",style:{textAnchor:"middle"}}),"I am good thanks!"),Object(s.mdx)("line",Object.assign({parentName:"g"},{x1:"275",y1:"205",x2:"475",y2:"205",className:"messageLine0",strokeWidth:"2",stroke:"black",markerEnd:"url(#crosshead)",style:{fill:"none"}}))),Object(s.mdx)("g",{parentName:"svg"},Object(s.mdx)("rect",Object.assign({parentName:"g"},{x:"500",y:"215",fill:"#EDF2AE",stroke:"#666",width:"150",height:"84",rx:"0",ry:"0",className:"note"})),Object(s.mdx)("text",Object.assign({parentName:"g"},{x:"496",y:"239",className:"noteText"}),Object(s.mdx)("tspan",Object.assign({parentName:"text"},{x:"516"}),"Bob thinks a long")),Object(s.mdx)("text",Object.assign({parentName:"g"},{x:"496",y:"255",className:"noteText"}),Object(s.mdx)("tspan",Object.assign({parentName:"text"},{x:"516"}),"long time, so long")),Object(s.mdx)("text",Object.assign({parentName:"g"},{x:"496",y:"271",className:"noteText"}),Object(s.mdx)("tspan",Object.assign({parentName:"text"},{x:"516"}),"that the text does")),Object(s.mdx)("text",Object.assign({parentName:"g"},{x:"496",y:"287",className:"noteText"}),Object(s.mdx)("tspan",Object.assign({parentName:"text"},{x:"516"}),"not fit on a row."))),Object(s.mdx)("g",{parentName:"svg"},Object(s.mdx)("text",Object.assign({parentName:"g"},{x:"175",y:"327",className:"messageText",style:{textAnchor:"middle"}}),"Checking with John..."),Object(s.mdx)("line",Object.assign({parentName:"g"},{x1:"275",y1:"334",x2:"75",y2:"334",className:"messageLine1",strokeWidth:"2",stroke:"black",style:{strokeDasharray:"3, 3",fill:"none"}}))),Object(s.mdx)("g",{parentName:"svg"},Object(s.mdx)("text",Object.assign({parentName:"g"},{x:"275",y:"362",className:"messageText",style:{textAnchor:"middle"}}),"Yes... John, how are you?"),Object(s.mdx)("line",Object.assign({parentName:"g"},{x1:"75",y1:"369",x2:"475",y2:"369",className:"messageLine0",strokeWidth:"2",stroke:"black",style:{fill:"none"}}))),Object(s.mdx)("g",{parentName:"svg"},Object(s.mdx)("rect",Object.assign({parentName:"g"},{x:"0",y:"389",fill:"#eaeaea",stroke:"#666",width:"150",height:"65",rx:"3",ry:"3",className:"actor"})),Object(s.mdx)("text",Object.assign({parentName:"g"},{x:"75",y:"421.5",dominantBaseline:"central",alignmentBaseline:"central",className:"actor",style:{textAnchor:"middle",fontSize:"14px"}}),Object(s.mdx)("tspan",Object.assign({parentName:"text"},{x:"75",dy:"0"}),"Alice"))),Object(s.mdx)("g",{parentName:"svg"},Object(s.mdx)("rect",Object.assign({parentName:"g"},{x:"200",y:"389",fill:"#eaeaea",stroke:"#666",width:"150",height:"65",rx:"3",ry:"3",className:"actor"})),Object(s.mdx)("text",Object.assign({parentName:"g"},{x:"275",y:"421.5",dominantBaseline:"central",alignmentBaseline:"central",className:"actor",style:{textAnchor:"middle",fontSize:"14px"}}),Object(s.mdx)("tspan",Object.assign({parentName:"text"},{x:"275",dy:"0"}),"Bob"))),Object(s.mdx)("g",{parentName:"svg"},Object(s.mdx)("rect",Object.assign({parentName:"g"},{x:"400",y:"389",fill:"#eaeaea",stroke:"#666",width:"150",height:"65",rx:"3",ry:"3",className:"actor"})),Object(s.mdx)("text",Object.assign({parentName:"g"},{x:"475",y:"421.5",dominantBaseline:"central",alignmentBaseline:"central",className:"actor",style:{textAnchor:"middle",fontSize:"14px"}}),Object(s.mdx)("tspan",Object.assign({parentName:"text"},{x:"475",dy:"0"}),"John"))))),Object(s.mdx)("p",null,"And this will produce a flow chart:"),Object(s.mdx)("div",{className:"mermaid","data-processed":"true"},Object(s.mdx)("svg",Object.assign({parentName:"div"},{id:"mermaid-1580701146141",width:"100%",xmlns:"http://www.w3.org/2000/svg",style:{maxWidth:"495.8031311035156px"},viewBox:"0 0 495.8031311035156 166.71875"}),Object(s.mdx)("style",{parentName:"svg"},"#mermaid-1580701146141 .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);color:#333}#mermaid-1580701146141 .label text{fill:#333}#mermaid-1580701146141 .node rect,#mermaid-1580701146141 .node circle,#mermaid-1580701146141 .node ellipse,#mermaid-1580701146141 .node polygon,#mermaid-1580701146141 .node path{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-1580701146141 .node .label{text-align:center}#mermaid-1580701146141 .node.clickable{cursor:pointer}#mermaid-1580701146141 .arrowheadPath{fill:#333}#mermaid-1580701146141 .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-1580701146141 .edgeLabel{background-color:#e8e8e8;text-align:center}#mermaid-1580701146141 .cluster rect{fill:#ffffde;stroke:#aa3;stroke-width:1px}#mermaid-1580701146141 .cluster text{fill:#333}#mermaid-1580701146141 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:12px;background:#ffffde;border:1px solid #aa3;border-radius:2px;pointer-events:none;z-index:100}#mermaid-1580701146141 .actor{stroke:#ccf;fill:#ECECFF}#mermaid-1580701146141 text.actor{fill:#000;stroke:none}#mermaid-1580701146141 .actor-line{stroke:grey}#mermaid-1580701146141 .messageLine0{stroke-width:1.5;stroke-dasharray:'2 2';stroke:#333}#mermaid-1580701146141 .messageLine1{stroke-width:1.5;stroke-dasharray:'2 2';stroke:#333}#mermaid-1580701146141 #arrowhead{fill:#333}#mermaid-1580701146141 .sequenceNumber{fill:#fff}#mermaid-1580701146141 #sequencenumber{fill:#333}#mermaid-1580701146141 #crosshead path{fill:#333 !important;stroke:#333 !important}#mermaid-1580701146141 .messageText{fill:#333;stroke:none}#mermaid-1580701146141 .labelBox{stroke:#ccf;fill:#ECECFF}#mermaid-1580701146141 .labelText{fill:#000;stroke:none}#mermaid-1580701146141 .loopText{fill:#000;stroke:none}#mermaid-1580701146141 .loopLine{stroke-width:2;stroke-dasharray:'2 2';stroke:#ccf}#mermaid-1580701146141 .note{stroke:#aa3;fill:#fff5ad}#mermaid-1580701146141 .noteText{fill:black;stroke:none;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:14px}#mermaid-1580701146141 .activation0{fill:#f4f4f4;stroke:#666}#mermaid-1580701146141 .activation1{fill:#f4f4f4;stroke:#666}#mermaid-1580701146141 .activation2{fill:#f4f4f4;stroke:#666}#mermaid-1580701146141 .mermaid-main-font{font-family:\"trebuchet ms\", verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-1580701146141 .section{stroke:none;opacity:0.2}#mermaid-1580701146141 .section0{fill:rgba(102,102,255,0.49)}#mermaid-1580701146141 .section2{fill:#fff400}#mermaid-1580701146141 .section1,#mermaid-1580701146141 .section3{fill:#fff;opacity:0.2}#mermaid-1580701146141 .sectionTitle0{fill:#333}#mermaid-1580701146141 .sectionTitle1{fill:#333}#mermaid-1580701146141 .sectionTitle2{fill:#333}#mermaid-1580701146141 .sectionTitle3{fill:#333}#mermaid-1580701146141 .sectionTitle{text-anchor:start;font-size:11px;text-height:14px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-1580701146141 .grid .tick{stroke:#d3d3d3;opacity:0.8;shape-rendering:crispEdges}#mermaid-1580701146141 .grid .tick text{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-1580701146141 .grid path{stroke-width:0}#mermaid-1580701146141 .today{fill:none;stroke:red;stroke-width:2px}#mermaid-1580701146141 .task{stroke-width:2}#mermaid-1580701146141 .taskText{text-anchor:middle;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-1580701146141 .taskText:not([font-size]){font-size:11px}#mermaid-1580701146141 .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-1580701146141 .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-1580701146141 .task.clickable{cursor:pointer}#mermaid-1580701146141 .taskText.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-1580701146141 .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-1580701146141 .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-1580701146141 .taskText0,#mermaid-1580701146141 .taskText1,#mermaid-1580701146141 .taskText2,#mermaid-1580701146141 .taskText3{fill:#fff}#mermaid-1580701146141 .task0,#mermaid-1580701146141 .task1,#mermaid-1580701146141 .task2,#mermaid-1580701146141 .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-1580701146141 .taskTextOutside0,#mermaid-1580701146141 .taskTextOutside2{fill:#000}#mermaid-1580701146141 .taskTextOutside1,#mermaid-1580701146141 .taskTextOutside3{fill:#000}#mermaid-1580701146141 .active0,#mermaid-1580701146141 .active1,#mermaid-1580701146141 .active2,#mermaid-1580701146141 .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-1580701146141 .activeText0,#mermaid-1580701146141 .activeText1,#mermaid-1580701146141 .activeText2,#mermaid-1580701146141 .activeText3{fill:#000 !important}#mermaid-1580701146141 .done0,#mermaid-1580701146141 .done1,#mermaid-1580701146141 .done2,#mermaid-1580701146141 .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-1580701146141 .doneText0,#mermaid-1580701146141 .doneText1,#mermaid-1580701146141 .doneText2,#mermaid-1580701146141 .doneText3{fill:#000 !important}#mermaid-1580701146141 .crit0,#mermaid-1580701146141 .crit1,#mermaid-1580701146141 .crit2,#mermaid-1580701146141 .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-1580701146141 .activeCrit0,#mermaid-1580701146141 .activeCrit1,#mermaid-1580701146141 .activeCrit2,#mermaid-1580701146141 .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-1580701146141 .doneCrit0,#mermaid-1580701146141 .doneCrit1,#mermaid-1580701146141 .doneCrit2,#mermaid-1580701146141 .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-1580701146141 .milestone{transform:rotate(45deg) scale(0.8, 0.8)}#mermaid-1580701146141 .milestoneText{font-style:italic}#mermaid-1580701146141 .doneCritText0,#mermaid-1580701146141 .doneCritText1,#mermaid-1580701146141 .doneCritText2,#mermaid-1580701146141 .doneCritText3{fill:#000 !important}#mermaid-1580701146141 .activeCritText0,#mermaid-1580701146141 .activeCritText1,#mermaid-1580701146141 .activeCritText2,#mermaid-1580701146141 .activeCritText3{fill:#000 !important}#mermaid-1580701146141 .titleText{text-anchor:middle;font-size:18px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-1580701146141 g.classGroup text{fill:#9370db;stroke:none;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:10px}#mermaid-1580701146141 g.classGroup text .title{font-weight:bolder}#mermaid-1580701146141 g.clickable{cursor:pointer}#mermaid-1580701146141 g.classGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-1580701146141 g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-1580701146141 .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5}#mermaid-1580701146141 .classLabel .label{fill:#9370db;font-size:10px}#mermaid-1580701146141 .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-1580701146141 .dashed-line{stroke-dasharray:3}#mermaid-1580701146141 #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-1580701146141 #compositionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-1580701146141 #aggregationStart{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-1580701146141 #aggregationEnd{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-1580701146141 #dependencyStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-1580701146141 #dependencyEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-1580701146141 #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-1580701146141 #extensionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-1580701146141 .commit-id,#mermaid-1580701146141 .commit-msg,#mermaid-1580701146141 .branch-label{fill:lightgrey;color:lightgrey;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-1580701146141 .pieTitleText{text-anchor:middle;font-size:25px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-1580701146141 .slice{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-1580701146141 g.stateGroup text{fill:#9370db;stroke:none;font-size:10px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-1580701146141 g.stateGroup text{fill:#9370db;stroke:none;font-size:10px}#mermaid-1580701146141 g.stateGroup .state-title{font-weight:bolder;fill:#000}#mermaid-1580701146141 g.stateGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-1580701146141 g.stateGroup line{stroke:#9370db;stroke-width:1}#mermaid-1580701146141 .transition{stroke:#9370db;stroke-width:1;fill:none}#mermaid-1580701146141 .stateGroup .composit{fill:white;border-bottom:1px}#mermaid-1580701146141 .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px}#mermaid-1580701146141 .state-note{stroke:#aa3;fill:#fff5ad}#mermaid-1580701146141 .state-note text{fill:black;stroke:none;font-size:10px}#mermaid-1580701146141 .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5}#mermaid-1580701146141 .stateLabel text{fill:#000;font-size:10px;font-weight:bold;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}:root{--mermaid-font-family: '\"trebuchet ms\", verdana, arial';--mermaid-font-family: \"Comic Sans MS\", \"Comic Sans\", cursive}\n\n#mermaid-1580701146141 .node rect { fill: cornflowerblue; }\n:root { --mermaid-font-family: \"trebuchet ms\", verdana, arial;}"),Object(s.mdx)("style",{parentName:"svg"},'#mermaid-1580701146141 {\n    color: rgb(0, 0, 0);\n    font: normal normal 400 normal 16px / normal "trebuchet ms", verdana, arial;\n  }'),Object(s.mdx)("g",Object.assign({parentName:"svg"},{transform:"translate(0, 0)"}),Object(s.mdx)("g",Object.assign({parentName:"g"},{className:"output"}),Object(s.mdx)("g",Object.assign({parentName:"g"},{className:"clusters"})),Object(s.mdx)("g",Object.assign({parentName:"g"},{className:"edgePaths"}),Object(s.mdx)("g",Object.assign({parentName:"g"},{className:"edgePath",style:{opacity:"1"}}),Object(s.mdx)("path",Object.assign({parentName:"g"},{className:"path",d:"M103.13064864549276,69.5390625L170.0546875,38.859375L246.125,38.859375",markerEnd:"url(#arrowhead15)",style:{fill:"none"}})),Object(s.mdx)("defs",{parentName:"g"},Object(s.mdx)("marker",Object.assign({parentName:"defs"},{id:"arrowhead15",viewBox:"0 0 10 10",refX:"9",refY:"5",markerUnits:"strokeWidth",markerWidth:"8",markerHeight:"6",orient:"auto"}),Object(s.mdx)("path",Object.assign({parentName:"marker"},{d:"M 0 0 L 10 5 L 0 10 z",className:"arrowheadPath",style:{strokeWidth:"1",strokeDasharray:"1, 0"}}))))),Object(s.mdx)("g",Object.assign({parentName:"g"},{className:"edgePath",style:{opacity:"1"}}),Object(s.mdx)("path",Object.assign({parentName:"g"},{className:"path",d:"M103.13064864549276,108.5390625L170.0546875,139.21875L226.921875,139.21875",markerEnd:"url(#arrowhead16)",style:{fill:"none"}})),Object(s.mdx)("defs",{parentName:"g"},Object(s.mdx)("marker",Object.assign({parentName:"defs"},{id:"arrowhead16",viewBox:"0 0 10 10",refX:"9",refY:"5",markerUnits:"strokeWidth",markerWidth:"8",markerHeight:"6",orient:"auto"}),Object(s.mdx)("path",Object.assign({parentName:"marker"},{d:"M 0 0 L 10 5 L 0 10 z",className:"arrowheadPath",style:{strokeWidth:"1",strokeDasharray:"1, 0"}}))))),Object(s.mdx)("g",Object.assign({parentName:"g"},{className:"edgePath",style:{opacity:"1"}}),Object(s.mdx)("path",Object.assign({parentName:"g"},{className:"path",d:"M307.84375,38.859375L352.046875,38.859375L398.8313695308371,68.25456873210244",markerEnd:"url(#arrowhead17)",style:{fill:"none"}})),Object(s.mdx)("defs",{parentName:"g"},Object(s.mdx)("marker",Object.assign({parentName:"defs"},{id:"arrowhead17",viewBox:"0 0 10 10",refX:"9",refY:"5",markerUnits:"strokeWidth",markerWidth:"8",markerHeight:"6",orient:"auto"}),Object(s.mdx)("path",Object.assign({parentName:"marker"},{d:"M 0 0 L 10 5 L 0 10 z",className:"arrowheadPath",style:{strokeWidth:"1",strokeDasharray:"1, 0"}}))))),Object(s.mdx)("g",Object.assign({parentName:"g"},{className:"edgePath",style:{opacity:"1"}}),Object(s.mdx)("path",Object.assign({parentName:"g"},{className:"path",d:"M327.046875,139.21875L352.046875,139.21875L398.83136859142724,110.82355685436673",markerEnd:"url(#arrowhead18)",style:{fill:"none"}})),Object(s.mdx)("defs",{parentName:"g"},Object(s.mdx)("marker",Object.assign({parentName:"defs"},{id:"arrowhead18",viewBox:"0 0 10 10",refX:"9",refY:"5",markerUnits:"strokeWidth",markerWidth:"8",markerHeight:"6",orient:"auto"}),Object(s.mdx)("path",Object.assign({parentName:"marker"},{d:"M 0 0 L 10 5 L 0 10 z",className:"arrowheadPath",style:{strokeWidth:"1",strokeDasharray:"1, 0"}})))))),Object(s.mdx)("g",Object.assign({parentName:"g"},{className:"edgeLabels"}),Object(s.mdx)("g",Object.assign({parentName:"g"},{className:"edgeLabel",transform:"translate(170.0546875,38.859375)",style:{opacity:"1"}}),Object(s.mdx)("g",Object.assign({parentName:"g"},{transform:"translate(-31.8671875,-9.5)",className:"label"}),Object(s.mdx)("foreignObject",Object.assign({parentName:"g"},{width:"63.734375",height:"19"}),Object(s.mdx)("div",Object.assign({parentName:"foreignObject"},{xmlns:"http://www.w3.org/1999/xhtml",style:{display:"inline-block",whiteSpace:"nowrap"}}),Object(s.mdx)("span",Object.assign({parentName:"div"},{className:"edgeLabel"}),"Link text"))))),Object(s.mdx)("g",Object.assign({parentName:"g"},{className:"edgeLabel",transform:"",style:{opacity:"1"}}),Object(s.mdx)("g",Object.assign({parentName:"g"},{transform:"translate(0,0)",className:"label"}),Object(s.mdx)("foreignObject",Object.assign({parentName:"g"},{width:"0",height:"0"}),Object(s.mdx)("div",Object.assign({parentName:"foreignObject"},{xmlns:"http://www.w3.org/1999/xhtml",style:{display:"inline-block",whiteSpace:"nowrap"}}),Object(s.mdx)("span",Object.assign({parentName:"div"},{className:"edgeLabel"})))))),Object(s.mdx)("g",Object.assign({parentName:"g"},{className:"edgeLabel",transform:"",style:{opacity:"1"}}),Object(s.mdx)("g",Object.assign({parentName:"g"},{transform:"translate(0,0)",className:"label"}),Object(s.mdx)("foreignObject",Object.assign({parentName:"g"},{width:"0",height:"0"}),Object(s.mdx)("div",Object.assign({parentName:"foreignObject"},{xmlns:"http://www.w3.org/1999/xhtml",style:{display:"inline-block",whiteSpace:"nowrap"}}),Object(s.mdx)("span",Object.assign({parentName:"div"},{className:"edgeLabel"})))))),Object(s.mdx)("g",Object.assign({parentName:"g"},{className:"edgeLabel",transform:"",style:{opacity:"1"}}),Object(s.mdx)("g",Object.assign({parentName:"g"},{transform:"translate(0,0)",className:"label"}),Object(s.mdx)("foreignObject",Object.assign({parentName:"g"},{width:"0",height:"0"}),Object(s.mdx)("div",Object.assign({parentName:"foreignObject"},{xmlns:"http://www.w3.org/1999/xhtml",style:{display:"inline-block",whiteSpace:"nowrap"}}),Object(s.mdx)("span",Object.assign({parentName:"div"},{className:"edgeLabel"}))))))),Object(s.mdx)("g",Object.assign({parentName:"g"},{className:"nodes"}),Object(s.mdx)("g",Object.assign({parentName:"g"},{className:"node",id:"A",transform:"translate(60.59375,89.0390625)",style:{opacity:"1"}}),Object(s.mdx)("rect",Object.assign({parentName:"g"},{rx:"0",ry:"0",x:"-52.59375",y:"-19.5",width:"105.1875",height:"39",className:"label-container"})),Object(s.mdx)("g",Object.assign({parentName:"g"},{className:"label",transform:"translate(0,0)"}),Object(s.mdx)("g",Object.assign({parentName:"g"},{transform:"translate(-42.59375,-9.5)"}),Object(s.mdx)("foreignObject",Object.assign({parentName:"g"},{width:"85.1875",height:"19"}),Object(s.mdx)("div",Object.assign({parentName:"foreignObject"},{xmlns:"http://www.w3.org/1999/xhtml",style:{display:"inline-block",whiteSpace:"nowrap"}}),"Square Rect"))))),Object(s.mdx)("g",Object.assign({parentName:"g"},{className:"node",id:"B",transform:"translate(276.984375,38.859375)",style:{opacity:"1"}}),Object(s.mdx)("circle",Object.assign({parentName:"g"},{x:"-30.859375",y:"-19.5",r:"30.859375",className:"label-container"})),Object(s.mdx)("g",Object.assign({parentName:"g"},{className:"label",transform:"translate(0,0)"}),Object(s.mdx)("g",Object.assign({parentName:"g"},{transform:"translate(-20.859375,-9.5)"}),Object(s.mdx)("foreignObject",Object.assign({parentName:"g"},{width:"41.71875",height:"19"}),Object(s.mdx)("div",Object.assign({parentName:"foreignObject"},{xmlns:"http://www.w3.org/1999/xhtml",style:{display:"inline-block",whiteSpace:"nowrap"}}),"Circle"))))),Object(s.mdx)("g",Object.assign({parentName:"g"},{className:"node",id:"C",transform:"translate(276.984375,139.21875)",style:{opacity:"1"}}),Object(s.mdx)("rect",Object.assign({parentName:"g"},{rx:"5",ry:"5",x:"-50.0625",y:"-19.5",width:"100.125",height:"39",className:"label-container"})),Object(s.mdx)("g",Object.assign({parentName:"g"},{className:"label",transform:"translate(0,0)"}),Object(s.mdx)("g",Object.assign({parentName:"g"},{transform:"translate(-40.0625,-9.5)"}),Object(s.mdx)("foreignObject",Object.assign({parentName:"g"},{width:"80.125",height:"19"}),Object(s.mdx)("div",Object.assign({parentName:"foreignObject"},{xmlns:"http://www.w3.org/1999/xhtml",style:{display:"inline-block",whiteSpace:"nowrap"}}),"Round Rect"))))),Object(s.mdx)("g",Object.assign({parentName:"g"},{className:"node",id:"D",transform:"translate(432.42499923706055,89.0390625)",style:{opacity:"1"}}),Object(s.mdx)("polygon",Object.assign({parentName:"g"},{points:"55.378125000000004,0 110.75625000000001,-55.378125000000004 55.378125000000004,-110.75625000000001 0,-55.378125000000004",transform:"translate(-55.378125000000004,55.378125000000004)",className:"label-container"})),Object(s.mdx)("g",Object.assign({parentName:"g"},{className:"label",transform:"translate(0,0)"}),Object(s.mdx)("g",Object.assign({parentName:"g"},{transform:"translate(-32.03125,-9.5)"}),Object(s.mdx)("foreignObject",Object.assign({parentName:"g"},{width:"64.0625",height:"19"}),Object(s.mdx)("div",Object.assign({parentName:"foreignObject"},{xmlns:"http://www.w3.org/1999/xhtml",style:{display:"inline-block",whiteSpace:"nowrap"}}),"Rhombus")))))))))),Object(s.mdx)("h3",null,"Hotkey"),Object(s.mdx)("kbd",null,"⌘F"),Object(s.mdx)("kbd",null,"⇧⌘F"),Object(s.mdx)("div",{className:"gatsby-highlight","data-language":"text"},Object(s.mdx)("pre",Object.assign({parentName:"div"},{className:"language-text"}),Object(s.mdx)("code",Object.assign({parentName:"pre"},{className:"language-text"}),"Markup : <kbd>⌘F</kbd>"))),Object(s.mdx)("p",null,"Hotkey list:"),Object(s.mdx)("table",null,Object(s.mdx)("thead",{parentName:"table"},Object(s.mdx)("tr",{parentName:"thead"},Object(s.mdx)("th",Object.assign({parentName:"tr"},{align:null}),"Key"),Object(s.mdx)("th",Object.assign({parentName:"tr"},{align:null}),"Symbol"))),Object(s.mdx)("tbody",{parentName:"table"},Object(s.mdx)("tr",{parentName:"tbody"},Object(s.mdx)("td",Object.assign({parentName:"tr"},{align:null}),"Option"),Object(s.mdx)("td",Object.assign({parentName:"tr"},{align:null}),"⌥")),Object(s.mdx)("tr",{parentName:"tbody"},Object(s.mdx)("td",Object.assign({parentName:"tr"},{align:null}),"Control"),Object(s.mdx)("td",Object.assign({parentName:"tr"},{align:null}),"⌃")),Object(s.mdx)("tr",{parentName:"tbody"},Object(s.mdx)("td",Object.assign({parentName:"tr"},{align:null}),"Command"),Object(s.mdx)("td",Object.assign({parentName:"tr"},{align:null}),"⌘")),Object(s.mdx)("tr",{parentName:"tbody"},Object(s.mdx)("td",Object.assign({parentName:"tr"},{align:null}),"Shift"),Object(s.mdx)("td",Object.assign({parentName:"tr"},{align:null}),"⇧")),Object(s.mdx)("tr",{parentName:"tbody"},Object(s.mdx)("td",Object.assign({parentName:"tr"},{align:null}),"Caps Lock"),Object(s.mdx)("td",Object.assign({parentName:"tr"},{align:null}),"⇪")),Object(s.mdx)("tr",{parentName:"tbody"},Object(s.mdx)("td",Object.assign({parentName:"tr"},{align:null}),"Tab"),Object(s.mdx)("td",Object.assign({parentName:"tr"},{align:null}),"⇥")),Object(s.mdx)("tr",{parentName:"tbody"},Object(s.mdx)("td",Object.assign({parentName:"tr"},{align:null}),"Esc"),Object(s.mdx)("td",Object.assign({parentName:"tr"},{align:null}),"⎋")),Object(s.mdx)("tr",{parentName:"tbody"},Object(s.mdx)("td",Object.assign({parentName:"tr"},{align:null}),"Power"),Object(s.mdx)("td",Object.assign({parentName:"tr"},{align:null}),"⌽")),Object(s.mdx)("tr",{parentName:"tbody"},Object(s.mdx)("td",Object.assign({parentName:"tr"},{align:null}),"Return"),Object(s.mdx)("td",Object.assign({parentName:"tr"},{align:null}),"↩")),Object(s.mdx)("tr",{parentName:"tbody"},Object(s.mdx)("td",Object.assign({parentName:"tr"},{align:null}),"Delete"),Object(s.mdx)("td",Object.assign({parentName:"tr"},{align:null}),"⌫")),Object(s.mdx)("tr",{parentName:"tbody"},Object(s.mdx)("td",Object.assign({parentName:"tr"},{align:null}),"Up"),Object(s.mdx)("td",Object.assign({parentName:"tr"},{align:null}),"↑")),Object(s.mdx)("tr",{parentName:"tbody"},Object(s.mdx)("td",Object.assign({parentName:"tr"},{align:null}),"Down"),Object(s.mdx)("td",Object.assign({parentName:"tr"},{align:null}),"↓")),Object(s.mdx)("tr",{parentName:"tbody"},Object(s.mdx)("td",Object.assign({parentName:"tr"},{align:null}),"Left"),Object(s.mdx)("td",Object.assign({parentName:"tr"},{align:null}),"←")),Object(s.mdx)("tr",{parentName:"tbody"},Object(s.mdx)("td",Object.assign({parentName:"tr"},{align:null}),"Right"),Object(s.mdx)("td",Object.assign({parentName:"tr"},{align:null}),"→")))),Object(s.mdx)("h3",null,"Emoji"),Object(s.mdx)("p",null,"❗ Use emoji icons to enhance text. 👍  Look up emoji codes at ",Object(s.mdx)("a",Object.assign({parentName:"p"},{href:"http://emoji-cheat-sheet.com/"}),"emoji-cheat-sheet.com")),Object(s.mdx)("div",{className:"gatsby-highlight","data-language":"text"},Object(s.mdx)("pre",Object.assign({parentName:"div"},{className:"language-text"}),Object(s.mdx)("code",Object.assign({parentName:"pre"},{className:"language-text"}),"Markup : Code appears between colons :EMOJICODE:"))),Object(s.mdx)("p",null,"| 😱 ",Object(s.mdx)("code",Object.assign({parentName:"p"},{className:"language-text"}),":scream:")," | 😄 ",Object(s.mdx)("code",Object.assign({parentName:"p"},{className:"language-text"}),":smile:")," | 😆 ",Object(s.mdx)("code",Object.assign({parentName:"p"},{className:"language-text"}),":laughing:"),"\n| 😊 ",Object(s.mdx)("code",Object.assign({parentName:"p"},{className:"language-text"}),":blush:")," | 😃 ",Object(s.mdx)("code",Object.assign({parentName:"p"},{className:"language-text"}),":smiley:")," | ☺️ ",Object(s.mdx)("code",Object.assign({parentName:"p"},{className:"language-text"}),":relaxed:"),"\n| 😏 ",Object(s.mdx)("code",Object.assign({parentName:"p"},{className:"language-text"}),":smirk:")," | 😍 ",Object(s.mdx)("code",Object.assign({parentName:"p"},{className:"language-text"}),":heart_eyes:")," | 😘 ",Object(s.mdx)("code",Object.assign({parentName:"p"},{className:"language-text"}),":kissing_heart:"),"\n| 😚 ",Object(s.mdx)("code",Object.assign({parentName:"p"},{className:"language-text"}),":kissing_closed_eyes:")," | 😳 ",Object(s.mdx)("code",Object.assign({parentName:"p"},{className:"language-text"}),":flushed:")," | 😌 ",Object(s.mdx)("code",Object.assign({parentName:"p"},{className:"language-text"}),":relieved:"),"\n| 😆 ",Object(s.mdx)("code",Object.assign({parentName:"p"},{className:"language-text"}),":satisfied:")," | 😁 ",Object(s.mdx)("code",Object.assign({parentName:"p"},{className:"language-text"}),":grin:")," | 😉 ",Object(s.mdx)("code",Object.assign({parentName:"p"},{className:"language-text"}),":wink:"),"\n| 😜 ",Object(s.mdx)("code",Object.assign({parentName:"p"},{className:"language-text"}),":stuck_out_tongue_winking_eye:")," | 😝 ",Object(s.mdx)("code",Object.assign({parentName:"p"},{className:"language-text"}),":stuck_out_tongue_closed_eyes:")," | 😞 ",Object(s.mdx)("code",Object.assign({parentName:"p"},{className:"language-text"}),":disappointed:"),"\n| 😗 ",Object(s.mdx)("code",Object.assign({parentName:"p"},{className:"language-text"}),":kissing:")," | 😙 ",Object(s.mdx)("code",Object.assign({parentName:"p"},{className:"language-text"}),":kissing_smiling_eyes:")," | 😛 ",Object(s.mdx)("code",Object.assign({parentName:"p"},{className:"language-text"}),":stuck_out_tongue:"),"\n| 😴 ",Object(s.mdx)("code",Object.assign({parentName:"p"},{className:"language-text"}),":sleeping:")," | 😟 ",Object(s.mdx)("code",Object.assign({parentName:"p"},{className:"language-text"}),":worried:")," | 😦 ",Object(s.mdx)("code",Object.assign({parentName:"p"},{className:"language-text"}),":frowning:"),"\n| 😧 ",Object(s.mdx)("code",Object.assign({parentName:"p"},{className:"language-text"}),":anguished:")," | 😮 ",Object(s.mdx)("code",Object.assign({parentName:"p"},{className:"language-text"}),":open_mouth:")," | 😬 ",Object(s.mdx)("code",Object.assign({parentName:"p"},{className:"language-text"}),":grimacing:")," "),Object(s.mdx)("h2",null,"2much2learn.com Markup Syntax"),Object(s.mdx)("p",null,"The above syntax is generic and can be used for creating/updating Markdown documents. Below are few additional syntax that can be used to document articles in 2much2learn.com."),Object(s.mdx)("h3",null,"Seperator"),Object(s.mdx)("p",null,"Seperate section in an article with a short horizontal line"),Object(s.mdx)(r,{mdxType:"Seperator"}),Object(s.mdx)("div",{className:"gatsby-highlight","data-language":"text"},Object(s.mdx)("pre",Object.assign({parentName:"div"},{className:"language-text"}),Object(s.mdx)("code",Object.assign({parentName:"pre"},{className:"language-text"}),"Markup : <Seperator>"))),Object(s.mdx)("h3",null,"Code block with title"),Object(s.mdx)("div",{className:"gatsby-code-title gatsby-remark-code-title"},"example-file.js"),Object(s.mdx)("div",{className:"gatsby-highlight","data-language":"js"},Object(s.mdx)("pre",Object.assign({parentName:"div"},{className:"language-js"}),Object(s.mdx)("code",Object.assign({parentName:"pre"},{className:"language-js"}),Object(s.mdx)("span",Object.assign({parentName:"code"},{className:"token function"}),"alert"),Object(s.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),Object(s.mdx)("span",Object.assign({parentName:"code"},{className:"token string"}),"'how cool is this!'"),Object(s.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),Object(s.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")))),Object(s.mdx)("div",{className:"gatsby-highlight","data-language":"text"},Object(s.mdx)("pre",Object.assign({parentName:"div"},{className:"language-text"}),Object(s.mdx)("code",Object.assign({parentName:"pre"},{className:"language-text"}),"Markup : \n```js:title=example-file.js\n    alert('how cool is this!');\n```"))),Object(s.mdx)("h3",null,"Todo"),Object(s.mdx)("p",null,"Add Todo task to remind something to add later when drafting an article"),Object(s.mdx)(i,{mdxType:"Todo"},"Complete this Section"),Object(s.mdx)("div",{className:"gatsby-highlight","data-language":"text"},Object(s.mdx)("pre",Object.assign({parentName:"div"},{className:"language-text"}),Object(s.mdx)("code",Object.assign({parentName:"pre"},{className:"language-text"}),"Markup :\n<Todo>Complete this Section</Todo>"))),Object(s.mdx)("h3",null,"ExternalLink"),Object(s.mdx)("p",null,"Component to create hyperlink to external resources and open it in new tab when clicked on it"),Object(s.mdx)(c,{href:"https://docs.oracle.com/javase/8/docs/api/java/util/ArrayList.html",mdxType:"ExternalLink"},"java.util.**ArrayList**"),Object(s.mdx)("div",{className:"gatsby-highlight","data-language":"text"},Object(s.mdx)("pre",Object.assign({parentName:"div"},{className:"language-text"}),Object(s.mdx)("code",Object.assign({parentName:"pre"},{className:"language-text"}),'Markup:\n<ExternalLink href="https://docs.oracle.com/javase/8/docs/api/java/util/ArrayList.html">java.util.**ArrayList**</ExternalLink>'))),Object(s.mdx)("h4",null,"Resources"),Object(s.mdx)("ul",null,Object(s.mdx)("li",{parentName:"ul"},Object(s.mdx)("a",{href:"http://daringfireball.net/projects/markdown/basics",target:"_blank"},"Markdown Basics")),Object(s.mdx)("li",{parentName:"ul"},Object(s.mdx)("a",{href:"https://help.github.com/articles/github-flavored-markdown/",target:"_blank"},"Github Flavored Markdown"))))}l.isMDXComponent=!0}}]);
//# sourceMappingURL=component---src-pages-content-articles-cheatsheets-markdown-index-md-c7b81fb4006bdd5991f7.js.map