Markdown

• 1: Awesome Bookmarklet
• 2: Extended Markdown Cheatsheet
• 3: Basic Markdown Cheatsheet
• 4: Markdown Tools and Apps
• 5: Pandoc
• 6: List of Library for Commonmark
• 7: Extended Commonmark
• 8: List of Extension in Markdown
• 9: Markdown with Commonmark
• 10: Style Guide for Markdown Writing
• 11: Markdown Cheatsheet
• 12: Getting Started about Markdown
• 13: Extended Syntax of Markdown
• 14: Basic Syntax of Markdown
• 15: Complete Markdown Cheatsheet
• 16: About Markdown

1 - Awesome Bookmarklet

Awesome Bookmarklet

Google Related

Add Selected Text to Google Calendar

• via Google Calendar

javascript:var s;if(window.getSelection){s=window.getSelection();}else{s=document.selection.createRange().text;}var t=prompt('Please enter a description for the event',s);if(t){void(window.open(encodeURI('https://www.google.com/calendar/event?ctext='+t+'&action=TEMPLATE&pprop=HowCreated%3AQUICKADD'),'gcal'));}else{void(s);}

Google Definitions

• Find definition of selected text in Google

javascript:d=""+(window.getSelection?window.getSelection():document.getSelection?document.getSelection():document.selection.createRange().text);d=d.replace(/\r\n|\r|\n/g," ,");if(!d)d=prompt("Enter the words:", "");if(d!=null)location="https://www.google.com/search?q=define:"+escape(d).replace(/ /g,"+");void(0);

Google Indexed

• Check what Google indexed on a website
• via Google

javascript: location = "https://www.google.com/search?num=100&q=site:" + escape(location.hostname); void 0

Select to Google Map

• Find map of selected text in Google Map

javascript:d=""+(window.getSelection?window.getSelection():document.getSelection?document.getSelection():document.selection.createRange().text);d=d.replace(/\r\n|\r|\n/g," ,");if(!d)d=prompt("Enter the address:", "");if(d!=null)location="https://maps.google.com?q="+escape(d).replace(/ /g,"+");void 0

Select to Google Translate

• Find translation of selected text in Google Translate

javascript:var t=((window.getSelection&&window.getSelection())||(document.getSelection&&document.getSelection())||(document.selection &&document.selection.createRange&&document.selection.createRange().text));var e=(document.charset||document.characterSet);if(t!=''){location.href='https://translate.google.com/translate_t?text='+t+'&hl=en&tbb=1&ie='+e;}else{location.href='https://translate.google.com/translate?u='+escape(location.href)+'&hl=en&tbb=1&ie='+e;};

Google Bookmarks

• Add a webpage to Google Boomarks

javascript:(function(){var a=window,b=document,c=encodeURIComponent,d=a.open("https://www.google.com/bookmarks/mark?op=edit&output=popup&bkmk="+c(b.location)+"&title="+c(b.title),"bkmk_popup","left="+((a.screenX||a.screenLeft)+10)+",top="+((a.screenY||a.screenTop)+10)+",height=420px,width=550px,resizable=1,alwaysRaised=1");a.setTimeout(function(){d.focus()},300)})();

Google Site Search

• Search keyword in a site using Google

javascript: q = "" + (window.getSelection ? window.getSelection() : document.getSelection ? document.getSelection() : document.selection.createRange().text); if (!q) q = prompt("You didn't select any text. Enter a search phrase:", ""); if (q != null) location = ("https://www.google.com/search?num=100&q=site:" + escape(location.hostname) + " \"" + escape(q.replace(/\"/g, "")) + "\"").replace(/ /g, "+"); void 0

Google Cache

• Check Google Cache of a webpage

javascript:void((function(){var a=location.href.replace(/^http%5C:%5C/%5C/(.*)$/,"$1");location.href="http://www.google.com/search?q=cache:"+escape(a);})())

Website Assets

Check Web robot.txt

• check robot.txt of any website

javascript:void(location.href%3D%27http://%27%20%2B%20location.host%20%2B%20%27/robots.txt%27)

Check Web sitemap.xml

• check sitemap (sitemap.xml) of any website

javascript:void(location.href%3D%27http://%27%20%2B%20location.host%20%2B%20%27/sitemap.xml%27)

Enable Protection

Enable Right Click

javascript: void(document.oncontextmenu = null)

Enable Select

javascript: (function() { function R(a) { ona = "on" + a; if (window.addEventListener) window.addEventListener(a, function(e) { for (var n = e.originalTarget; n; n = n.parentNode) n[ona] = null; }, true); window[ona] = null; document[ona] = null; if (document.body) document.body[ona] = null; } R("click"); R("mousedown"); R("mouseup"); R("selectstart"); })()

Edit a Website

• Edit a website

javascript:document.body.contentEditable%20=%20'true';%20document.designMode='on';%20void%200

Show which Hidden

Anchor to HREF

• Show the http link of an anchor

javascript:(function(){var i,c,x,h; for(i=0;x=document.links[i];++i) { h=x.getAttribute("href"); x.title+=" " + x.innerHTML; while(c=x.firstChild)x.removeChild(c); x.appendChild(document.createTextNode(h)); } })()

Internal External Link

• check internal or external link of a web page
• red if internal, blue if external

javascript: (function() { var i, x; for (i = 0; x = document.links[i]; ++i) x.style.color = ["blue", "red", "orange"][sim(x, location)];  function sim(a, b) { if (a.hostname != b.hostname) return 0; if (fixPath(a.pathname) != fixPath(b.pathname) || a.search != b.search) return 1; return 2; }  function fixPath(p) { p = (p.charAt(0) == "/" ? "" : "/") + p; /*many browsers*/ p = p.split("?")[0]; /*opera*/ return p; } })()

Show Password

• show password text in password form/field

javascript: (function() { var s, F, j, f, i; s = ""; F = document.forms; for (j = 0; j < F.length; ++j) { f = F[j]; for (i = 0; i < f.length; ++i) { if (f[i].type.toLowerCase() == "password") s += f[i].value + "\n"; } } if (s) alert("Passwords in forms on this page:\n\n" + s); else alert("There are no passwords in forms on this page."); })();

Show Source Code

• show source code of a webpage

javascript: function getSelSource() { x = document.createElement("div"); x.appendChild(window.getSelection().getRangeAt(0).cloneContents()); return x.innerHTML; }  function makeHR() { return nd.createElement("hr"); }  function makeParagraph(text) { p = nd.createElement("p"); p.appendChild(nd.createTextNode(text)); return p; }  function makePre(text) { p = nd.createElement("pre"); p.appendChild(nd.createTextNode(text)); return p; } nd = window.open().document; ndb = nd.body; if (!window.getSelection || !window.getSelection().rangeCount || window.getSelection().getRangeAt(0).collapsed) { nd.title = "Generated Source of: " + location.href; ndb.appendChild(makeParagraph("No selection, showing generated source of entire document.")); ndb.appendChild(makeHR()); ndb.appendChild(makePre("<html>\n" + document.documentElement.innerHTML + "\n</html>")); } else { nd.title = "Partial Source of: " + location.href; ndb.appendChild(makePre(getSelSource())); }; void 0

Show Outbound Links

• List all of outbound link from a webpage

javascript:(function(){var url = document.location; var links = document.links;var output ='';var isExternal = function(url) {var domain = function(url) {return url.replace('http://','').replace('https://','').split('/')[0];};return domain(location.href) !== domain(url);};output ='\n\n#####%20External%20Links%20#####\n\n';for%20(i=0;%20i<links.length;%20i++)%20{var%20link%20=%20new%20String(links[i]);if(links[i].hostname%20!=%20window.location.hostname){var%20pat%20=%20/^https?:\/\//i;if(pat.test(links[i])){output%20+=%20links[i].href+'\n'}}}%20alert(output);})();

Webstack Identification

Identify Font

• Font identification on a website
• via Typesample

javascript:void((function(d)%7Bvar%20e=d.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','//www.typesample.com/assets/typesample.js?r='+Math.random()*99999999);d.body.appendChild(e)%7D)(document));

Identify CSS

• Check CSS on a website

javascript: s = document.getElementsByTagName('STYLE'); ex = document.getElementsByTagName('LINK'); d = window.open().document; /*set base href*/ d.open(); d.close(); b = d.body;  function trim(s) { return s.replace(/^\s*\n/, '').replace(/\s*$/, ''); };  function iff(a, b, c) { return b ? a + b + c : ''; }  function add(h) { b.appendChild(h); }  function makeTag(t) { return d.createElement(t); }  function makeText(tag, text) { t = makeTag(tag); t.appendChild(d.createTextNode(text)); return t; } add(makeText('style', 'iframe{width:100%;height:18em;border:1px solid;')); add(makeText('h3', d.title = 'Style sheets in ' + location.href)); for (i = 0; i < s.length; ++i) { add(makeText('h4', 'Inline style sheet' + iff(' title="', s[i].title, '"'))); add(makeText('pre', trim(s[i].innerHTML))); } for (i = 0; i < ex.length; ++i) { rs = ex[i].rel.split(' '); for (j = 0; j < rs.length; ++j) if (rs[j].toLowerCase() == 'stylesheet') { add(makeText('h4', 'link rel="' + ex[i].rel + '" href="' + ex[i].href + '"' + iff(' title="', ex[i].title, '"'))); iframe = makeTag('iframe'); iframe.src = ex[i].href; add(iframe); break; } } void 0

Identify Javascript

• view javascript on a webpage

javascript: s = document.getElementsByTagName('SCRIPT'); d = window.open().document; /*140681*/ d.open(); d.close(); b = d.body;  function trim(s) { return s.replace(/^\s*\n/, '').replace(/\s*$/, ''); };  function add(h) { b.appendChild(h); }  function makeTag(t) { return d.createElement(t); }  function makeText(tag, text) { t = makeTag(tag); t.appendChild(d.createTextNode(text)); return t; } add(makeText('style', 'iframe{width:100%;height:18em;border:1px solid;')); add(makeText('h3', d.title = 'Scripts in ' + location.href)); for (i = 0; i < s.length; ++i) { if (s[i].src) { add(makeText('h4', 'script src="' + s[i].src + '"')); iframe = makeTag('iframe'); iframe.src = s[i].src; add(iframe); } else { add(makeText('h4', 'Inline script')); add(makeText('pre', trim(s[i].innerHTML))); } } void 0

Identify WebStack

• via Wappalyzer

javascript: (function() { var d = document, e = d.getElementById('wappalyzer-container'); if (e !== null) { d.body.removeChild(e); } var u = 'https://www.wappalyzer.com/', t = new Date().getTime(), c = d.createElement('div'), p = d.createElement('div'), l = d.createElement('link'), s = d.createElement('script'); c.setAttribute('id', 'wappalyzer-container'); l.setAttribute('rel', 'stylesheet'); l.setAttribute('href', u + 'css/bookmarklet.css'); d.head.appendChild(l); p.setAttribute('id', 'wappalyzer-pending'); p.setAttribute('style', 'background-image: url(' + u + 'images/spinner.gif) !important'); c.appendChild(p); s.setAttribute('src', u + 'bookmarklet/wappalyzer.js'); s.onload = function() { window.wappalyzer = new Wappalyzer(); s = d.createElement('script'); s.setAttribute('src', u + 'bookmarklet/apps.js'); s.onload = function() { s = d.createElement('script'); s.setAttribute('src', u + 'bookmarklet/driver.js'); c.appendChild(s); }; c.appendChild(s); }; c.appendChild(s); d.body.appendChild(c); })();

Check RSS

• Check RSS link of a website
• via Savanttools

javascript:(function(){document.body.appendChild(document.createElement('script')).src='http://savanttools.com/feedhelp-bookmarklet.js';})();

Table and List Modifier

Change Bullet List to Number List

javascript: uls = document.getElementsByTagName("ul"); for (i = uls.length - 1; i >= 0; --i) { oldul = uls[i]; newol = document.createElement("ol"); for (j = 0; j < oldul.childNodes.length; ++j) newol.appendChild(oldul.childNodes[j].cloneNode(true)); oldul.parentNode.replaceChild(newol, oldul); } void 0

Sort Tables

javascript:function toArray (c){var a, k;a=new Array;for (k=0; k<c.length; ++k)a[k]=c[k];return a;}function insAtTop(par,child){if(par.childNodes.length) par.insertBefore(child, par.childNodes[0]);else par.appendChild(child);}function countCols(tab){var nCols, i;nCols=0;for(i=0;i<tab.rows.length;++i)if(tab.rows[i].cells.length>nCols)nCols=tab.rows[i].cells.length;return nCols;}function makeHeaderLink(tableNo, colNo, ord){var link;link=document.createElement('a');link.href='javascript:sortTable('+tableNo+','+colNo+','+ord+');';link.appendChild(document.createTextNode((ord>0)?'a':'d'));return link;}function makeHeader(tableNo,nCols){var header, headerCell, i;header=document.createElement('tr');for(i=0;i<nCols;++i){headerCell=document.createElement('td');headerCell.appendChild(makeHeaderLink(tableNo,i,1));headerCell.appendChild(document.createTextNode('/'));headerCell.appendChild(makeHeaderLink(tableNo,i,-1));header.appendChild(headerCell);}return header;}g_tables=toArray(document.getElementsByTagName('table'));if(!g_tables.length) alert("This page doesn't contain any tables.");(function(){var j, thead;for(j=0;j<g_tables.length;++j){thead=g_tables[j].createTHead();insAtTop(thead, makeHeader(j,countCols(g_tables[j])))}}) ();function compareRows(a,b){if(a.sortKey==b.sortKey)return 0;return (a.sortKey < b.sortKey) ? g_order : -g_order;}function sortTable(tableNo, colNo, ord){var table, rows, nR, bs, i, j, temp;g_order=ord;g_colNo=colNo;table=g_tables[tableNo];rows=new Array();nR=0;bs=table.tBodies;for(i=0; i<bs.length; ++i)for(j=0; j<bs[i].rows.length; ++j){rows[nR]=bs[i].rows[j];temp=rows[nR].cells[g_colNo];if(temp) rows[nR].sortKey=temp.innerHTML;else rows[nR].sortKey="";++nR;}rows.sort(compareRows);for (i=0; i < rows.length; ++i)insAtTop(table.tBodies[0], rows[i]);}

Table Number

• Add number colomn in a table

javascript: (function() { function has(par, ctag) { for (var k = 0; k < par.childNodes.length; ++k) if (par.childNodes[k].tagName == ctag) return true; }  function add(par, ctag, text) { var c = document.createElement(ctag); c.appendChild(document.createTextNode(text)); par.insertBefore(c, par.childNodes[0]); } var i, ts = document.getElementsByTagName("TABLE"); for (i = 0; i < ts.length; ++i) { var n = 0, trs = ts[i].rows, j, tr; for (j = 0; j < trs.length; ++j) { tr = trs[j]; if (has(tr, "TD")) add(tr, "TD", ++n); else if (has(tr, "TH")) add(tr, "TH", "Row"); } } })()

Table Transpose

• Transpose Table

javascript: (function() { var d = document, q = "table", i, j, k, y, r, c, t; for (i = 0; t = d.getElementsByTagName(q)[i]; ++i) { var w = 0, N = t.cloneNode(0); N.width = ""; N.height = ""; N.border = 1; for (j = 0; r = t.rows[j]; ++j) for (y = k = 0; c = r.cells[k]; ++k) { var z, a = c.rowSpan, b = c.colSpan, v = c.cloneNode(1); v.rowSpan = b; v.colSpan = a; v.width = ""; v.height = ""; if (!v.bgColor) v.bgColor = r.bgColor; while (w < y + b) N.insertRow(w++).p = 0; while (N.rows[y].p > j) ++y; N.rows[y].appendChild(v); for (z = 0; z < b; ++z) N.rows[y + z].p += a; y += b; } t.parentNode.replaceChild(N, t); } })()

Zap Hide Elements

Zap Hide Colors

• Remove color of a website

javascript:(function(){var newSS, styles='* { background: white ! important; color: black !important } :link, :link * { color: #0000EE%20!important%20 } %20:visited,%20:visited%20*%20 { %20color:%20#551A8B%20!important%20}';%20if(document.createStyleSheet)%20{%20document.createStyleSheet("javascript:'"+styles+"'");%20} %20else%20 { %20newSS=document.createElement('link');%20newSS.rel='stylesheet';%20newSS.href='data:text/css,'+escape(styles);%20document.getElementsByTagName("head")[0].appendChild(newSS);%20}%20})();

Zap Hide Images

• Hide Images

javascript:(function(){function toArray (c){var a, k;a=new Array;for (k=0; k < c.length; ++k)a[k]=c[k];return a;}var images, img, altText;images=toArray(document.images);for (var i=0; i < images.length; ++i){img=images[i];altText=document.createTextNode(img.alt);img.parentNode.replaceChild(altText, img)}})();

Hide Image Show Alt Text

• Hide image of a website, change to its alt text

javascript:(function(){function toArray (c){var a, k;a=new Array;for (k=0; k < c.length; ++k)a[k]=c[k];return a;}var images, img, altText;images=toArray(document.images);for (var i=0; i < images.length; ++i){img=images[i];altText=document.createTextNode(img.alt);img.parentNode.replaceChild(altText, img)}})();

Page Zipper Auto Next Page

• Automatically go to next page

javascript:(function(){if(window['pgzp']){_pgzpToggleBookmarklet();}else{window._page_zipper_is_bookmarklet=true;window._page_zipper=document.createElement('script');window._page_zipper.type='text/javascript';window._page_zipper.src='//www.printwhatyoulike.com/static/pagezipper/pagezipper_10.js';document.getElementsByTagName('head')[0].appendChild(window._page_zipper);}})();

Print What You Like

• Select webpage elements to print

javascript:(function(){if(window['ppw']&&ppw['bookmarklet']){ppw.bookmarklet.toggle();}else{window._pwyl_home='//www.printwhatyoulike.com/';window._pwyl_pro_id=null;window._pwyl_bmkl=document.createElement('script');window._pwyl_bmkl.setAttribute('type','text/javascript');window._pwyl_bmkl.setAttribute('src',window._pwyl_home+'static/compressed/pwyl_bookmarklet_10.js');window._pwyl_bmkl.setAttribute('pwyl','true');document.getElementsByTagName('head')[0].appendChild(window._pwyl_bmkl);}})();

Select View Print

• view selection ready to print, hide others

javascript:(function(){ var d=open().document; d.title="Selection"; if (window.getSelection) { /*Moz*/ var s = getSelection(); for(i=0; i<s.rangeCount; ++i) { var a, r = s.getRangeAt(i); if (!r.collapsed) { var x = document.createElement("div"); x.appendChild(r.cloneContents()); if (d.importNode) x = d.importNode(x, true); d.body.appendChild(x); } } } else { /*IE*/ d.body.innerHTML = document.selection.createRange().htmlText; } })();

Unclutter Youtube Video

• Watch Youtube video without clutter
• via Viewpure

javascript:void(location.href='http://viewpure.com/process?bkmrk='+location.href)

Read Outline

• read outline
• via Outline

javascript:(function()%7Bwindow.location.href %3D 'https%3A%2F%2Foutline.com%2F' %2B window.location.href%7D)()

No CSS

• Remove CSS for a Website

javascript: (function() { var i, x; for (i = 0; x = document.styleSheets[i]; ++i) x.disabled = true; })();

Rosyadi.com related

Rosyadi.com Info

javascript:var d=document,w=window,e=w.getSelection,k=d.getSelection,x=d.selection,s=(e?e():(k)?k():(x?x.createRange().text:0)),f='https://rosyadi.com/info/wp-admin/edit.php?pf-nominate-this=2',l=d.location,e=encodeURIComponent,u=f+'&u='+e(l.href)+'&t='+e(d.title)+'&s='+e(s)+'&v=4';a=function(){if(!w.open(u,'t','toolbar=0,resizable=1,scrollbars=1,status=1,width=720px,height=620px'))l.href=u;};if (/Firefox/.test(navigator.userAgent)) setTimeout(a, 0); else a();void(0)

Rosyadi.com Read

javascript:(function(){var url=location.href||url;var wllbg=window.open('https://rosyadi.com/read/web/bookmarklet?url=' + encodeURIComponent(url),'_blank');})();

Rosyadi.com Share

javascript:(          function(){            var%20url%20=%20location.href;            var%20title%20=%20document.title%20||%20url;            var%20desc=document.getSelection().toString();            if(desc.length>4000){              desc=desc.substr(0,4000)+'...';              alert('The%20selected%20text%20is%20too%20long,%20it%20will%20be%20truncated.');            }            window.open(              'https://rosyadi.com/share/?post='%20+%20encodeURIComponent(url)+              '&title='%20+%20encodeURIComponent(title)+              '&description='%20+%20encodeURIComponent(desc)+              '&source=bookmarklet','_blank','menubar=no,height=800,width=600,toolbar=no,scrollbars=yes,status=no,dialog=1'            );          }        )();

Rosyadi.com Short

javascript:(function()%7B%20var%20d%3Ddocument%2C%20sc%3Dd.createElement(%27script%27)%2C%20l%3Dd.location.href%2C%20enc%3DencodeURIComponent%2C%20ups%3Dl.match(%2F%5E%5Ba-zA-Z0-9%5C%2B%5C.-%5D%2B%3A(%5C%2F%5C%2F)%3F%2F)%5B0%5D%2C%20ur%3Dl.split(new%20RegExp(ups))%5B1%5D%2C%20ups%3Dups.split(%2F%5C%3A%2F)%2C%20p%3D%27%3Fup%3D%27%2Benc(ups%5B0%5D%2B%27%3A%27)%2B%27%26us%3D%27%2Benc(ups%5B1%5D)%2B%27%26ur%3D%27%2Benc(ur)%2B%27%26t%3D%27%2Benc(d.title)%3B%20window.yourls_callback%3Dfunction(r)%7B%20if(r.short_url)%7B%20prompt(r.message%2Cr.short_url)%3B%7Delse%7B%20alert(%27An%20error%20occured%3A%20%27%2Br.message)%3B%7D%7D%3B%20sc.src%3D%27https%3A%2F%2Frosyadi.com%2Fs%2Fadmin%2Findex.php%27%2Bp%2B%27%26jsonp%3Dyourls%27%3B%20void(d.body.appendChild(sc))%3B%7D)()%3B

Link Tools

Linkify

javascript:(function () { if (!window.linkifyLoaded) { var doc = document; var scriptElem = document.createElement('script'); scriptElem.type = 'text/javascript'; scriptElem.src = 'http://www-static.linkify.mobi/api/linkify.js?key=c63dd5f8d0a50029038ecabd01e1ded8cfed5bee'; doc.getElementsByTagName('head')[0].appendChild(scriptElem); window.linkifyLoaded = true; } })();

Long URLs

javascript:void(function(){if(typeof%20jQuery%20==%20'undefined'){var%20s=document.createElement('script');s.src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js';document.getElementsByTagName('head')[0].appendChild(s);}var%20l=document.createElement('script');l.src='http://www.longurlplease.com/js/longurlplease.js';document.getElementsByTagName('head')[0].appendChild(l);function%20runIfReady(){try{if($.longurlplease){%20clearInterval(interval);%20$.longurlplease();}}catch(e){}};%20var%20interval%20=%20window.setInterval(runIfReady,100);}())

Remove URL Parameters

javascript:console.log('Original URL: '+window.location);window.history.replaceState('','',window.location.origin+window.location.pathname);

Text as URL Link

javascript: (function() { var i, c, x, h; for (i = 0; x = document.links[i]; ++i) { h = x.href; x.title += " " + x.innerHTML; while (c = x.firstChild) x.removeChild(c); x.appendChild(document.createTextNode(h)); } })()

Remove Redirect

javascript:(function(){var k,x,t,i,j,p; for(k=0;x=document.links[k];k++){t=x.href.replace(/[%]3A/ig,':').replace(/[%]2f/ig,'/');i=t.lastIndexOf('http');if(i>0){ t=t.substring(i); j=t.indexOf('&'); if(j>0)t=t.substring(0,j); p=/https?\:\/\/[^\s]*[^.,;'">\s\)\]]/.exec(unescape(t)); if(p) x.href=p[0]; } else if (x.onmouseover&&x.onmouseout){x.onmouseover(); if (window.status && window.status.indexOf('://')!=-1)x.href=window.status; x.onmouseout(); } x.onmouseover=null; x.onmouseout=null; }})();

Search Tool

Highlight Search

• Highlight text you want to search

javascript:(function(){var%20count=0,%20text,%20dv;text=prompt("Search%20phrase:",%20"");if(text==null%20||%20text.length==0)return;dv=document.defaultView;function%20searchWithinNode(node,%20te,%20len){var%20pos,%20skip,%20spannode,%20middlebit,%20endbit,%20middleclone;skip=0;if(%20node.nodeType==3%20){pos=node.data.toUpperCase().indexOf(te);if(pos>=0){spannode=document.createElement("SPAN");spannode.style.backgroundColor="yellow";middlebit=node.splitText(pos);endbit=middlebit.splitText(len);middleclone=middlebit.cloneNode(true);spannode.appendChild(middleclone);middlebit.parentNode.replaceChild(spannode,middlebit);++count;skip=1;}}else%20if(%20node.nodeType==1&&%20node.childNodes%20&&%20node.tagName.toUpperCase()!="SCRIPT"%20&&%20node.tagName.toUpperCase!="STYLE"){for%20(var%20child=0;%20child%20<%20node.childNodes.length;%20++child){child=child+searchWithinNode(node.childNodes[child],%20te,%20len);}}return%20skip;}window.status="Searching%20for%20'"+text+"'...";searchWithinNode(document.body,%20text.toUpperCase(),%20text.length);window.status="Found%20"+count+"%20occurrence"+(count==1?"":"s")+"%20of%20'"+text+"'.";})();

Photo Search

javascript:void(window.open('http://tineye.com/search?pluginver=bookmark_1.0&url='+encodeURIComponent(document.URL)));

Paper Search with Scihub

• via scihub.tw

javascript:(function(){location.href=%22https://sci-hub.ee/%22+location.href})();

Image Tools

Image Gallery

javascript:(function(){function%20I(u){var%20t=u.split('.'),e=t[t.length-1].toLowerCase();return%20{gif:1,jpg:1,jpeg:1,png:1,mng:1}[e]}function%20hE(s){return%20s.replace(/&/g,'&amp;').replace(/>/g,'>').replace(/</g,'<').replace(/"/g,'&quot;');}var%20q,h,i,z=open().document;z.write('<p>Images%20linked%20to%20by%20'+hE(location.href)+':</p><hr>');for(i=0;q=document.links[i];++i){h=q.href;if(h&&I(h))z.write('<p>'+q.innerHTML+'%20('+hE(h)+')<br><img%20src="'+hE(h)+'">');}z.close();})()

Image Gallery as Thumbnail

javascript:var%20sHTML=%22<html><head><title>gallery</title><body><center><table%20border=0>%22;var%20y=0;for(x=0;x<document.links.length;x++){a=document.links[x].href;%20if%20(a.match(/jpe|jpeg|jpg|bmp|tiff|tif|bmp|gif|png/i)){sHTML+='<td%20style=%22border-style:solid;border-width:1px%22><a%20target=%22_new%22%20href=%22'+a+'%22><img%20border=%220%22%20width=%22100%22%20src=%22'+a+'%22></a></td>';%20if%20(!((x+1)%5))%20sHTML+=%22</tr><tr>%22}};this.innerHTML=sHTML+%22</table></center></body></html>%22;

Instagram View

javascript:(function(){;!function(e)%7Bvar%20t=%7B%7D;function%20n(a)%7Bif(t%5Ba%5D)return%20t%5Ba%5D.exports;var%20r=t%5Ba%5D=%7Bi:a,l:!1,exports:%7B%7D%7D;return%20e%5Ba%5D.call(r.exports,r,r.exports,n),r.l=!0,r.exports%7Dn.m=e,n.c=t,n.d=function(e,t,a)%7Bn.o(e,t)%7C%7CObject.defineProperty(e,t,%7Benumerable:!0,get:a%7D)%7D,n.r=function(e)%7B%22undefined%22!=typeof%20Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,%7Bvalue:%22Module%22%7D),Object.defineProperty(e,%22__esModule%22,%7Bvalue:!0%7D)%7D,n.t=function(e,t)%7Bif(1&t&&(e=n(e)),8&t)return%20e;if(4&t&&%22object%22==typeof%20e&&e&&e.__esModule)return%20e;var%20a=Object.create(null);if(n.r(a),Object.defineProperty(a,%22default%22,%7Benumerable:!0,value:e%7D),2&t&&%22string%22!=typeof%20e)for(var%20r%20in%20e)n.d(a,r,function(t)%7Breturn%20e%5Bt%5D%7D.bind(null,r));return%20a%7D,n.n=function(e)%7Bvar%20t=e&&e.__esModule?function()%7Breturn%20e.default%7D:function()%7Breturn%20e%7D;return%20n.d(t,%22a%22,t),t%7D,n.o=function(e,t)%7Breturn%20Object.prototype.hasOwnProperty.call(e,t)%7D,n.p=%22%22,n(n.s=4)%7D(%5Bfunction(e,t,n)%7B%22use%20strict%22;Object.defineProperty(t,%22__esModule%22,%7Bvalue:!0%7D),t.default=function(e)%7Bvar%20t=%5B%5D;t.push(e);for(;e.parentNode;)t.unshift(e.parentNode),e=e.parentNode;return%20t%7D%7D,function(e,t,n)%7B%22use%20strict%22;Object.defineProperty(t,%22__esModule%22,%7Bvalue:!0%7D),t.default=function(e,t)%7Bt=t%7C%7Cwindow%7C%7Cdocument.documentElement;var%20n=e.getBoundingClientRect();return%20n.bottom%3E0&&n.right%3E0&&n.left%3C(t.innerWidth%7C%7Ct.clientWidth)&&n.top%3C(t.innerHeight%7C%7Ct.clientHeight)%7D%7D,function(e,t,n)%7B%22use%20strict%22;Object.defineProperty(t,%22__esModule%22,%7Bvalue:!0%7D);var%20a=function(e)%7Breturn%20e&&e.__esModule?e:%7B%22default%22:e%7D%7D(n(5));var%20r=%7Bde:%22de-DE%22,pt:%22pt-BR%22,en:%22en-US%22,%22en-GB%22:%22en-US%22%7D%5Bnavigator.language%5D;function%20o(e)%7Bvar%20t=arguments.length%3E1&&void%200!==arguments%5B1%5D?arguments%5B1%5D:r;try%7Bif(a.default.langs.hasOwnProperty(t)%7C%7C(t=%22en-US%22),a.default.langs%5Bt%5D%5Be%5D)return%20a.default.langs%5Bt%5D%5Be%5D%7Dcatch(n)%7Breturn%20console.error(%22%5Binstantgram%5DLOC%20error:%22,n),%22ops,%20an%20error%20ocurred%20in%20localization%20system.%20Enter%20in%20https://github.com/theus/instantgram/issues/new%20and%20open%20an%20issue%20with%20this%20code:%20'LOC_dont_found_str_neither_default:%5B%22+t+%22-%3E%22+e+%22%5D'%5Cn%20%20%20%20for%20more%20information%20open%20the%20console%22%7D%7Dconsole.info(o(%22helpers.localize_defaultlang%22).replace(%22$%7BLANG_DEFAULT%7D%22,r)),t.default=o%7D,function(e,t,n)%7B%22use%20strict%22;Object.defineProperty(t,%22__esModule%22,%7Bvalue:!0%7D),t.default=function(e,t,n)%7Bfor(var%20a=0;a%3Ce.length;a++)t.call(n,a,e%5Ba%5D)%7D%7D,function(e,t,n)%7B%22use%20strict%22;var%20a=g(n(2)),r=g(n(6)),o=g(n(3)),i=g(n(1)),s=g(n(7)),d=g(n(8)),u=g(n(9)),l=g(n(10)),c=g(n(13)),m=g(n(14));function%20g(e)%7Breturn%20e&&e.__esModule?e:%7B%22default%22:e%7D%7Dvar%20f=%7BVERSION:%223.0.1%22,hostname:window.location.hostname,path:window.location.pathname,images:%5B%5D,imagesOnViewPort:%5B%5D,videos:document.querySelectorAll(%22video%22),regexOriginalImage:/%5C/%5Ba-z%5D+%5Cd+%5Ba-z%5D?x%5Cd+%5Ba-z%5D?/,regexMaxResImage:/%5C/%5Ba-z%5D+%5B1080%5D+%5Ba-z%5D?x%5B1080%5D+%5Ba-z%5D?/,regexPath:/%5E%5C/p%5C//,regexHostname:/instagram%5C.com/,regexStoriesURI:/stories%5C/(.*)+/,regexURL:/(%5B--:%5Cw?@%25&+~#=%5D*%5C.%5Ba-z%5D%7B2,4%7D%5C/%7B0,2%7D)((?:%5B?&%5D(?:%5Cw+)=(?:%5Cw+))+%7C%5B--:%5Cw?@%25&+~#=%5D+)?/,foundByModule:null,probablyHasAGallery:%7Bcheck:null,byModule:%22%22%7D,setImageLink:function(e)%7Bthis.imageLinkBeforeParse=e,this.regexMaxResImage.test(e)?this.imageLink=e:this.imageLink=this.regexOriginalImage.test(e)?e.replace(this.regexOriginalImage,%22%22):e%7D,foundVideo:!1,foundImage:!1,imageLink:!1,imageLinkBeforeParse:!1,alertNotInInstagramPost:!1,context:%7BhasMsg:!1,msg:%22%22%7D%7D,p=document.images;(0,o.default)(p,function(e,t)%7B((0,s.default)(t)%7C%7C2===p.length)&&(f.images.push(t),(0,i.default)(t)&&f.imagesOnViewPort.push(t))%7D),f.regexHostname.test(f.hostname)%7C%7Cwindow.alert((0,a.default)(%22index@alert_onlyWorks%22)),f.regexHostname.test(f.hostname)&&(!1===(0,m.default)(f)&&!1===(0,c.default)(f)&&!1===(0,u.default)(f)&&!1===(0,d.default)(f)&&!1===(0,l.default)(f)&&(f.context.hasMsg=!1),f.context.hasMsg&&window.alert((0,a.default)(f.context.msg)),!f.alertNotInInstagramPost%7C%7Cf.foundVideo%7C%7Cf.foundImage%7C%7Cwindow.alert((0,a.default)(%22index#program@alert_dontFound%22)),(0,r.default)(f.VERSION))%7D,function(e,t,n)%7B%22use%20strict%22;Object.defineProperty(t,%22__esModule%22,%7Bvalue:!0%7D),t.default=%7Blangs:%7B%22en-US%22:%7B%22helpers.localize_defaultlang%22:%22%5Binstantgram%5D%20set%20language:%20$%7BLANG_DEFAULT%7D%20%5Cn%20For%20more%20information%20about%20available%20languages%20please%20check%20http://theus.github.io/instantgram%22,%22modules.update@oudated_outdated%22:%22%5Binstantgram%5D%20is%20outdated.%20Please%20check%20http://theus.github.io/instantgram%20for%20available%20updates.%22,%22modules.update@oudated_localInfo%22:%22%5Binstantgram%5D%20Installed%20version:%20$%7Bdata.version%7D%20%7C%20New%20update:%20$%7Bdata.gitVersion%7D%22,%22modules.update@determineIfGetUpdateIsNecessary_contacting%22:%22%5Binstantgram%5D%20is%20looking%20for%20available%20updates%E2%80%A6%22,%22modules.update@determineIfGetUpdateIsNecessary_updated%22:%22%5Binstantgram%5D%20updated%20your%20current%20version.%22,%22modules.update@determineIfGetUpdateIsNecessary_@alert_found%22:'%5Binstantgram%5D%20found%20a%20new%20available%20update.%5CnPlease%20check%20%3Ca%20href=%22http://theus.github.io/instantgram%22%3Ehttp://theus.github.io/instantgram%3C/a%3E%20to%20install%20it.',%22index@alert_onlyWorks%22:%22%5Binstantgram%5D%20only%20works%20on%20instagram.com.%22,%22index#program#modal@alert_dontFound%22:%22%5Binstantgram%5D%20didn't%20find%20any%20image%20in%20this%20Instagram%20post.%20Please%20try%20to%20open%20the%20link%20in%20a%20new%20tab.%22,%22index#program#post@alert_dontFound%22:%22Ops,%20%5Binstantgram%5D%20couldn't%20find%20any%20image%20%20:-(%22,%22index#program#screen@alert_dontFound%22:%22%5Binstantgram%5D%20found%20more%20than%201%20image.%20Are%20you%20on%20a%20profile%20page?%20If%20yes,%20please%20open%20a%20single%20post%20first%20and%20open%20%5Binstantgram%5D%20again.%22,%22index#program@alert_dontFound%22:%22Ops,%20did%20you%20open%20any%20Instagram%20post?%20Like%20for%20example%20instagram.com/p/82jd828jd%22,%22index#program@alert_videoBlob%22:%22If%20you're%20trying%20open%20a%20video,%20try%20enter%20on%20Instagram%20post%20page.%20Like%20for%20example%20instagram.com/p/82jd828jd.%20If%20you're%20already%20in%20it,%20try%20refreshing%20the%20page%20before%20running%20%5Binstantgram%5D%20or%20open%20the%20post%20in%20a%20new%20tab.%20(this%20proccess%20is%20neccessary%20only%20for%20videos)%22%7D,%22pt-BR%22:%7B%22helpers.localize_defaultlang%22:%22%5Binstantgram%5D%20idioma%20configurado:%20$%7BLANG_DEFAULT%7D%20%5Cnpara%20mais%20informa%C3%A7%C3%B5es%20sobre%20os%20idiomas%20suportados,%20acesse%20http://theus.github.io/instantgram%22,%22modules.update@oudated_outdated%22:%22%5Binstantgram%5D%20est%C3%A1%20desatualizado.%20Acesse%20http://theus.github.io/instantgram%20para%20atualizar%22,%22modules.update@oudated_localInfo%22:%22%5Binstantgram%5D%20vers%C3%A3o%20local:%20$%7Bdata.version%7D%20%7C%20nova%20vers%C3%A3o:%20$%7Bdata.gitVersion%7D%22,%22modules.update@determineIfGetUpdateIsNecessary_contacting%22:%22%5Binstantgram%5D%20est%C3%A1%20procurando%20atualiza%C3%A7%C3%B5es...%22,%22modules.update@determineIfGetUpdateIsNecessary_updated%22:%22%5Binstantgram%5D%20informa%C3%A7%C3%B5es%20locais%20atualizadas%22,%22modules.update@determineIfGetUpdateIsNecessary_@alert_found%22:%22%5Binstantgram%5D%20encontrou%20uma%20atualiza%C3%A7%C3%A3o.%5Cn%20acesse%20theus.github.io/instantgram%20para%20atualizar%22,%22index@alert_onlyWorks%22:%22%5Binstantgram%5D%20somente%20funciona%20no%20instagram.com%22,%22index#program#modal@alert_dontFound%22:%22%5Binstantgram%5D%20n%C3%A3o%20encontrou%20uma%20imagem%20em%20um%20post.%20Tente%20abrir%20o%20link%20em%20uma%20nova%20aba.%22,%22index#program#post@alert_dontFound%22:%22ops,%20%5Binstantgram%5D%20n%C3%A3o%20encontrou%20a%20imagem%20:(%22,%22index#program#screen@alert_dontFound%22:%22%5Binstantgram%5D%20a%20procura%20por%20imagem%20na%20tela%20encontrou%20mais%20de%201%20imagem.%20Voc%C3%AA%20est%C3%A1%20em%20um%20perfil?%20Se%20sim,%20abra%20alguma%20imagem%20antes%20de%20rodar%20o%20%5Binstantgram%5D%22,%22index#program@alert_dontFound%22:%22ops,%20voc%C3%AA%20est%C3%A1%20em%20algum%20post%20do%20instagram?%20ex:%20instagram.com/p/82jd828jd%22,%22index#program@alert_videoBlob%22:%22Se%20voc%C3%AA%20est%C3%A1%20tentando%20abrir%20um%20v%C3%ADdeo,%20tente%20entrar%20na%20p%C3%A1gina%20do%20post%20do%20Instagram.%20ex:%20instagram.com/p/82jd828jd.%20Se%20voc%C3%AA%20j%C3%A1%20est%C3%A1%20na%20p%C3%A1gina,%20tente%20atualizar%20a%20p%C3%A1gina%20antes%20de%20executar%20o%20%5Binstantgram%5D%20ou%20abra%20o%20post%20em%20uma%20nova%20aba.%20(este%20processo%20s%C3%B3%20%C3%A9%20necess%C3%A1rio%20com%20v%C3%ADdeos)%22%7D,%22de-DE%22:%7B%22helpers.localize_defaultlang%22:%22Ausgew%C3%A4hlte%20Sprache:%20$%7BLANG_DEFAULT%7D%20%5Cn%20Weitere%20Informationen%20zu%20den%20unterst%C3%BCtzten%20Sprachen%20findest%20du%20auf%20http://theus.github.io/instantgram%22,%22modules.update@oudated_outdated%22:%22%5Binstantgram%5D%20ist%20veraltet.%20Bitte%20besuche%20die%20Seite%20http://theus.github.io/instantgram%20f%C3%BCr%20ein%20Update.%22,%22modules.update@oudated_localInfo%22:%22%5Binstantgram%5D%20Installierte%20Version%20$%7Bdata.version%7D%20%7C%20Neue%20Version:%20$%7Bdata.gitVersion%7D%22,%22modules.update@determineIfGetUpdateIsNecessary_contacting%22:%22%5Binstantgram%5D%20sucht%20nach%20neuen%20verf%C3%BCgbaren%20Updates%E2%80%A6%22,%22modules.update@determineIfGetUpdateIsNecessary_updated%22:%22%5Binstantgram%5D%20wurde%20aktualisiert.%22,%22modules.update@determineIfGetUpdateIsNecessary_@alert_found%22:%22%5Binstantgram%5D%20hat%20ein%20neues%20Update%20gefunden.%5CnBitte%20besuche%20die%20Seite%20http://theus.github.io/instantgram,%20um%20das%20Update%20zu%20installieren.%22,%22index@alert_onlyWorks%22:%22%5Binstantgram%5D%20funktioniert%20nur%20mit%20instagram.com.%22,%22index#program#modal@alert_dontFound%22:%22%5Binstantgram%5D%20konnte%20kein%20Bild%20in%20diesem%20Post%20finden.%20Bitte%20%C3%B6ffne%20den%20Link%20in%20einem%20neuen%20Tab.%22,%22index#program#post@alert_dontFound%22:%22Ops,%20%5Binstantgram%5D%20konnte%20leider%20kein%20Bild%20finden%20%20:-(%22,%22index#program#screen@alert_dontFound%22:%22%5Binstantgram%5D%20hat%20mehr%20als%201%20Bild%20gefunden.%20Bist%20du%20in%20der%20Profilansicht?%20Falls%20ja,%20%C3%B6ffne%20bitte%20zuerst%20einen%20einzelnen%20Post%20und%20f%C3%BChre%20%5Binstantgram%5D%20erneut%20aus.%22,%22index#program@alert_dontFound%22:%22Ops,%20hast%20du%20einen%20Instagram%20Post%20ge%C3%B6ffnet?%20Zum%20Beispiel%20instagram.com/p/82jd828jd%22,%22index#program@alert_videoBlob%22:%22If%20you're%20trying%20open%20a%20video,%20try%20enter%20on%20Instagram%20post%20page.%20Like%20for%20example%20instagram.com/p/82jd828jd.%20If%20you're%20already%20in%20it,%20try%20refreshing%20the%20page%20before%20running%20%5Binstantgram%5D%20or%20open%20the%20post%20in%20a%20new%20tab.%20(this%20proccess%20is%20neccessary%20only%20for%20videos)%20//%20we%20need%20translate%20this%20string%20to%20Deutsch,%20if%20you%20can%20help%20us%20enter%20in%20contact%20by%20Github%22%7D%7D%7D%7D,function(e,t,n)%7B%22use%20strict%22;Object.defineProperty(t,%22__esModule%22,%7Bvalue:!0%7D);var%20a=function(e)%7Breturn%20e&&e.__esModule?e:%7B%22default%22:e%7D%7D(n(2));function%20r(e)%7Bconsole.warn((0,a.default)(%22modules.update@oudated_outdated%22)),console.warn((0,a.default)(%22modules.update@oudated_localInfo%22).replace(%22$%7Bdata.version%7D%22,e.version).replace(%22$%7Bdata.gitVersion%7D%22,e.gitVersion))%7Dt.default=function(e)%7Bvar%20t=e.replace(/%5C./g,%22%22);if(t=parseInt(t),function()%7Bvar%20e=window.localStorage.getItem(%22instantgram%22);return!e%7C%7C((e=JSON.parse(e)).version!==e.gitVersion&&r(e),Date.now()%3Ee.dateExpiration)%7D())%7Bvar%20n=new%20window.XMLHttpRequest;n.addEventListener(%22readystatechange%22,function()%7Bif(console.info((0,a.default)(%22modules.update@determineIfGetUpdateIsNecessary_contacting%22)),4===this.readyState)%7Bvar%20n=new%20Date;n.setDate(n.getDate()+2),window.localStorage.setItem(%22instantgram%22,JSON.stringify(%7Bversion:e,gitVersion:JSON.parse(this.responseText).version,lastVerification:Date.now(),dateExpiration:n.valueOf()%7D));var%20o=JSON.parse(this.responseText).version;if(o=o.replace(/%5C./g,%22%22),o=parseInt(o),console.info((0,a.default)(%22modules.update@determineIfGetUpdateIsNecessary_updated%22)),t%3Co)%7Bvar%20i=JSON.parse(window.localStorage.getItem(%22instantgram%22));window.alert((0,a.default)(%22modules.update@determineIfGetUpdateIsNecessary_@alert_found%22)),r(i)%7Delse%20console.info(window.localStorage.getItem(%22instantgram%22))%7D%7D),n.open(%22GET%22,%22https://theus.github.io/instantgram/package.json%22),n.send()%7D%7D%7D,function(e,t,n)%7B%22use%20strict%22;Object.defineProperty(t,%22__esModule%22,%7Bvalue:!0%7D),t.default=function(e)%7Breturn(0,a.default)(e).filter(function(e)%7Breturn%22ARTICLE%22===e.nodeName%7D).length%3E0%7D;var%20a=function(e)%7Breturn%20e&&e.__esModule?e:%7B%22default%22:e%7D%7D(n(0))%7D,function(e,t,n)%7B%22use%20strict%22;Object.defineProperty(t,%22__esModule%22,%7Bvalue:!0%7D),t.default=function(e)%7Bvar%20t=!1,n=e.images.length%3E2;n&&e.regexPath.test(e.path)&&(e.probablyHasAGallery.check=n,e.probablyHasAGallery.byModule=%22searchImage%22);if(e.regexPath.test(e.path)&&!e.imageLink&!1===n)%7Bif(!e.foundVideo&&!e.foundImage)%7Btry%7Bif(2===document.getElementsByTagName(%22article%22).length)%7Bvar%20a=document.getElementsByTagName(%22article%22)%5B1%5D,r=a.querySelector(%22header%20+%20div%20img%22).src;r?(e.setImageLink(r),window.open(e.imageLink),t=!0,e.foundByModule=%22searchImage%22):e.context=%7BhasMsg:!0,msg:%22index#program#modal@alert_dontFound%22%7D%7D%7Dcatch(t)%7Bconsole.error(%22searchImage()%22,%22%5Binstantgram%5D%20%22+e.VERSION,t)%7Dtry%7Bif(1===document.getElementsByTagName(%22article%22).length)%7Bvar%20o=document.querySelector(%22article%20%3E%20div%20img%22).src;e.setImageLink(o),e.imageLink?(window.open(e.imageLink),t=!0,e.foundByModule=%22searchImage%22):e.context=%7BhasMsg:!0,msg:%22index#program#post@alert_dontFound%22%7D%7D%7Dcatch(t)%7Bconsole.error(%22searchImage()%22,%22%5Binstantgram%5D%20%22+e.VERSION,t)%7D%7D%7Delse%20e.alertNotInInstagramPost=!0;return%20t%7D%7D,function(e,t,n)%7B%22use%20strict%22;Object.defineProperty(t,%22__esModule%22,%7Bvalue:!0%7D),t.default=function(e)%7Bvar%20t=!1;try%7Be:%7Bvar%20n=!0,r=!1,o=void%200;try%7Bfor(var%20i,s=e.videos%5BSymbol.iterator%5D();!(n=(i=s.next()).done);n=!0)%7Bvar%20d=i.value;if((0,a.default)(d))%7Bvar%20u=d.src;if(u)%7Bif(-1!==u.indexOf(%22blob:%22))%7Be.context=%7BhasMsg:!0,msg:%22index#program@alert_videoBlob%22%7D;break%20e%7Dwindow.open(u),t=!0,e.foundVideo=!0,e.foundByModule=%22searchVideoOnScreen%22,e.alertNotInInstagramPost=!0%7Dbreak%20e%7D%7D%7Dcatch(e)%7Br=!0,o=e%7Dfinally%7Btry%7B!n&&s.return&&s.return()%7Dfinally%7Bif(r)throw%20o%7D%7D%7D%7Dcatch(t)%7Bconsole.error(%22searchVideoOnScreen()%22,%22%5Binstantgram%5D%20%22+e.VERSION,t)%7Dreturn%20t%7D;var%20a=function(e)%7Breturn%20e&&e.__esModule?e:%7B%22default%22:e%7D%7D(n(1))%7D,function(e,t,n)%7B%22use%20strict%22;Object.defineProperty(t,%22__esModule%22,%7Bvalue:!0%7D),t.default=function(e)%7Bvar%20t=!1;try%7Bif(!e.imageLink&&!e.foundVideo)e:%7Be.images.reverse();var%20n=!0,s=!1,d=void%200;try%7Bfor(var%20u,l=e.images%5BSymbol.iterator%5D();!(n=(u=l.next()).done);n=!0)%7Bvar%20c=u.value;if((0,a.default)(c)&&!(0,o.default)(c)&&!(0,i.default)(c))%7Bvar%20m=(0,r.default)(c).filter(function(e)%7Breturn%22UL%22===e.nodeName%7D),g=m.length%3E0;if(g)%7Be.probablyHasAGallery.check=g,e.probablyHasAGallery.byModule=%22searchImageOnScreen%22;var%20f=(0,r.default)(c).filter(function(e)%7Breturn%20e.style&&e.style.transform&&%22%22!==e.style.transform%7D)%5B0%5D,p=f.querySelector(%22ul%22),h=+f.style.transform.split(%22(%22)%5B1%5D.replace(%22px)%22,%22%22),y=h/c.width,v=y%3C0?-1*y:y,_=p.children%5Bv%5D.querySelector(%22img%22);e.setImageLink(_.src),!0%7Delse%20e.setImageLink(c.src);e.imageLink?(window.open(e.imageLink),e.foundImage=!0,t=!0,e.foundByModule=%22searchImageOnScreen%22):e.context=%7BhasMsg:!0,msg:%22index#program#screen@alert_dontFound%22%7D,e.alertNotInInstagramPost=!1;break%20e%7D%7D%7Dcatch(e)%7Bs=!0,d=e%7Dfinally%7Btry%7B!n&&l.return&&l.return()%7Dfinally%7Bif(s)throw%20d%7D%7D%7D%7Dcatch(t)%7Bconsole.error(%22searchImageOnScreen()%22,%22%5Binstantgram%5D%20%22+e.VERSION,t)%7Dreturn%20t%7D;var%20a=s(n(1)),r=s(n(0)),o=s(n(11)),i=s(n(12));function%20s(e)%7Breturn%20e&&e.__esModule?e:%7B%22default%22:e%7D%7D%7D,function(e,t,n)%7B%22use%20strict%22;Object.defineProperty(t,%22__esModule%22,%7Bvalue:!0%7D),t.default=function(e)%7Breturn%22a%22===e.parentElement.localName%7C%7C(0,a.default)(e).filter(function(e)%7Breturn%22HEADER%22===e.nodeName%7D).length%3E0%7D;var%20a=function(e)%7Breturn%20e&&e.__esModule?e:%7B%22default%22:e%7D%7D(n(0))%7D,function(e,t,n)%7B%22use%20strict%22;Object.defineProperty(t,%22__esModule%22,%7Bvalue:!0%7D),t.default=function(e)%7Breturn%22SPAN%22===e.parentElement.nodeName&&%22link%22===e.parentElement.getAttribute(%22role%22)%7D;!function(e)%7Be&&e.__esModule%7D(n(0))%7D,function(e,t,n)%7B%22use%20strict%22;Object.defineProperty(t,%22__esModule%22,%7Bvalue:!0%7D),t.default=function(e)%7Bvar%20t=!1;try%7Bif(e.regexStoriesURI.test(e.path))%7Bvar%20n=document.getElementById(%22react-root%22),r=n.querySelectorAll(%22section%20section%20div%22),o=%22%22;if((0,a.default)(r,function(t,n)%7Bvar%20a=n.style.backgroundImage.match(e.regexURL);null!==a&&(o=a%5B0%5D)%7D),o.length%3E0&&(e.setImageLink(o),window.open(e.imageLink),t=!0,e.foundImage=!0,e.foundByModule=%22searchStories%22),!1===t&&e.videos.length%3E0)%7Bvar%20i=e.videos%5B0%5D.src;!i&&e.videos%5B0%5D.children&&(i=e.videos%5B0%5D.children%5B0%5D.src),i&&(window.open(i),t=!0,e.foundVideo=!0,e.alertNotInInstagramPost=!0,e.foundByModule=%22searchStories%22)%7D%7D%7Dcatch(t)%7Bconsole.error(%22searchStories()%22,%22%5Binstantgram%5D%20%22+e.VERSION,t)%7Dreturn%20t%7D;var%20a=function(e)%7Breturn%20e&&e.__esModule?e:%7B%22default%22:e%7D%7D(n(3))%7D,function(e,t,n)%7B%22use%20strict%22;Object.defineProperty(t,%22__esModule%22,%7Bvalue:!0%7D),t.default=function(e)%7Bvar%20t=!1;try%7Bif(!e.imageLink&&!e.foundVideo)%7Bvar%20n=document.querySelector('%5Bproperty=%22og:video%22%5D')?document.querySelector('%5Bproperty=%22og:video%22%5D'):document.querySelector('%5Bproperty=%22og:video:secure_url%22%5D')?document.querySelector('%5Bproperty=%22og:video:secure_url%22%5D'):null,a=!!n&&n.content;a&&(window.open(a),t=!0,e.foundVideo=!0,e.alertNotInInstagramPost=!0)%7D%7Dcatch(e)%7Bconsole.error(%22getVideoOnPage()%22,%22%5Binstantgram%5D%203.0.1%22,e)%7Dreturn%20t%7D%7D%5D);})()

Others

Reddit Stream

• Show reddit comment as a stream via Reddit Stream
• Tracking protection shoud be off

javascript:(function%20stream()%20{var%20s%20=%20window.location.href.split('/');var%20id%20=%20s[s.indexOf('comments')+1];if(s.indexOf('comments')%20!=%20-1)%20{%20window.location.href%20=%20'http://reddit-stream.com/comments/'%20+%20id;%20}})();

Wayback Machine

• Access cached page on Wayback Machine

javascript:location.href='https://web.archive.org/web/*/'+location.href

Download All Selected Format

• download all selected format from a web page

javascript:!function(){var%20t=prompt("Enter%20filetype%20to%20download%20(format:%20.mp3)");if(null!==t)for(var%20e=document.querySelectorAll('[href$="'+t+'"]'),o=0;o<e.length;o++)e[o].setAttribute("download",""),e[o].click();else%20alert("No%20format")}();

Hypothesis

• Add webpage to Hypothesis, web snippet manager

javascript:(function(){window.hypothesisConfig=function(){return{showHighlights:true,appType:'bookmarklet'};};var d=document,s=d.createElement('script');s.setAttribute('src','https://hypothes.is/embed.js');d.body.appendChild(s)})();

Didn’t Work

Read Text Only

• Read text only of a website using Text Fish

javascript:(function(){ window.location = 'https://text.fish/'+window.location })()

Read Paywalled Page

• Read paywalled webpage

javascript:var%20currentsite%3Ddocument.querySelector(%22meta%5Bproperty%3D'al%3Aandroid%3Aapp_name'%5D%22)%3Fdocument.querySelector(%22meta%5Bproperty%3D'al%3Aandroid%3Aapp_name'%5D%22).content%3Awindow.location.href%3Bfunction%20isPage(b)%7Bconsole.log(b%2B%22%20%22%2Bcurrentsite.includes(b))%3Breturn%20currentsite.includes(b)%7Dfunction%20process(b)%7Bvar%20a%3Db%3BisPage(%22NYTimes%22)%26%26(document.querySelector(%22html%22).innerHTML%3Da)%3BisPage(%22Medium%22)%26%26(a%3Db.replace(%2F%3C%5C%2F%3Fnoscript%3E%2Fg%2C%22%22)%2Cdocument.querySelector(%22html%22).innerHTML%3Da)%3Bif(isPage(%22Bloomberg%22)%7C%7CisPage(%22businessinsider%22))a%3Ddocument.createElement(%22html%22)%2Ca.innerHTML%3Db%2Ca.querySelectorAll(%22script%22).forEach(function(a)%7Breturn%20a.outerHTML%3D%22%22%7D)%2Ca%3Da.outerHTML%2Cdocument.open()%2Cdocument.write(a)%2Cdocument.close()%3BisPage(%22businessinsider%22)%26%26(a%3Ddocument.createElement(%22html%22)%2Ca.innerHTML%3Db%2Ca.querySelectorAll(%22script%22).forEach(function(a)%7Breturn%20a.outerHTML%3D%22%22%7D)%2Ca.querySelectorAll(%22figure%22).forEach(function(a)%7Ba.innerHTML%3Da.querySelector(%22noscript%22).innerHTML%7D)%2Ca%3Da.outerHTML%2Cdocument.open()%2Cdocument.write(a)%2Cdocument.close())%7Dfetch(window.location.href%2C%7Bcredentials%3A%22omit%22%2Credirect%3A%22follow%22%2Cmode%3A%22no-cors%22%7D).then(function(b)%7Breturn%20b.text()%7D).then(function(b)%7Bprocess(b)%7D)%3Bvoid+0

Switch CSS

• Switch CSS to Minimal CSS according to Dohliam

javascript:(function()%7Bvar%20body%20%3D%20document.getElementsByTagName('body')%5B0%5D%3Bscript%20%3D%20document.createElement('script')%3Bscript.type%3D%20'text%2Fjavascript'%3Bscript.src%3D%20'https%3A%2F%2Fdohliam.github.io%2Fdropin-minimal-css%2Fswitcher.js'%3Bbody.appendChild(script)%7D)()

2 - Extended Markdown Cheatsheet

Extended Markdown Cheatsheet

1. Heading ID

Markdown:

### My Great Heading {#heading-ids}

Markdown

My Great Heading

In HTML:

My Great Heading

Link to Heading IDs

2.2. Code Fencing and Highlighting

Notes:

• We can make block code fences without need to be idented
• lang is optional to specify the language of the code; if not specified, the app won’t highlight the code;
• We need one empty line before

Syntaxes

    ```
    This is a fenced code block.
    ```

Syntaxes

    ~~~
    This is another fenced code block.
    ~~~

Showcases

This is a fenced code block.

No language indicated, so no syntax highlighting.
s = "There is no highlighting for this."
But let's throw in a <b>tag</b>.

Showcases (javascript)

var s = "JavaScript syntax highlighting";
alert(s);

Showcases (python)

def function():
    #indenting works just fine in the fenced code block
    s = "Python syntax highlighting"
    print s

Showcases (ruby)

require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html

2.3. Tables

Notes:

• we can set alignment in table with a colon (:)
• we can add formatting text, links, code and HTML character code, but not: heading, headings, blockquotes, lists, horizontal rules, images, HTML tags, or fenced code

Syntaxes

| Option | Description |
| ------ | ----------- |
| data   | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext    | extension to be used for dest files. |

Showcases

Syntaxes

| Syntax      | Description | Test Text is long    |
| :---        |    :----:   |          ---: |
| Header from      | Title       | Here's this  is |
| Paragraph   | Text        | And more   |

Showcases

Syntaxes

| Syntax      | Description | Test Text is long    |
| :---        |    :----:   |          ---: |
| [Example](https://www.example.com/)      | **Title**       | `Here's this  is` |
| Paragraph   | Text        | And more   |

Showcases

2.4. Footnote

Example: The First Part
Here’s a simple footnote,¹ and here’s a longer one,², and ³

Example: The Second Part

Or add inline footnote
Another example of footnote 1 link⁴ and footnote 2 link⁵.
Or to add inline footnote^[Text of inline footnote] definition.

Or duplictade reference
This duplicated footnote reference⁵.

2.4. Strikethrough, Highlighting, Underline

Example of strikethrough
strikethrough
In HTML: strikethrough

Example of mark/highlighting
==marked text==
in HTML: marked text

Example of underline
underline
in HTML: underline

2.5. Task Lists

Example

• Write the press release
• Update the website
• Contact the media

2.6. Definition Lists

Example

First Term

This is the definition of the first term.

Second Term

This is one definition of the second term.

This is another definition of the second term.

In HTML:

First Term

This is the definition of the first term.

Second Term

This is one definition of the second term.

This is another definition of the second term.

*Or *

Term 1

Definition 1
with lazy continuation.

Term 2 with inline markup

Definition 2
{ some code, part of Definition 2 }

Third paragraph of definition 2.

Or in compact style:

Term 1
~ Definition 1

Term 2
~ Definition 2a ~ Definition 2b

2.7. Emojies

Emoji can be copy pasted

Gone camping! ⛺ Be back soon.
That is so funny! 😂

Or, use markdown

Gone camping! :tent: Be back soon.
That is so funny! :joy:

Classic markup: :wink: :crush: :cry: :tear: :laughing: :yum:

Shortcuts (emoticons): :-) :-( 8-) ;)

2.9. Typographic replacements

Example

(c) (C) (r) (R) (tm) (TM) (p) (P) +-
test.. test… test….. test?….. test!….
!!!!!! ???? ,, – —
“Smartypants, double quotes” and ‘single quotes’

2.10. Superscript and Subscript

Example Superscript
x^2^
In HTML: x²

Example Subscript
H~2~O
In HTML: H₂O

2.11. Inserted Text

Example
++Inserted text++
In HTML: This text has been inserted

2.12. Abbreviations

Example
The “HTML” specification is maintained by the “W3C”.
*[HTML]: Hyper Text Markup Language
*[W3C]: World Wide Web Consortium

In HTML:
The HTML specification is maintained by the W3C.

2.13. HTML Entities and Character Codes

Example

© & ¨ ™ ¡ £
& < > ¥ € ® ± ¶ § ¦ ¯ « ·
|

Or

X² Y³ ¾ ¼ × ÷ »

Or

18ºC " '

2.14. Latex

Note:

• Sometimes with \( and \) brackets

Example

$E=mc^2$

$$\sin(\alpha)^{\theta}=\sum_{i=0}^{n}(x^i + \cos(f))$$

Or, inline

The Gamma function satisfying $\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$ is via the Euler integral

2.15. Mentions, Tag, Font Awesome

Note:

• with fa-something:

Example

This is @mentions
This is #tags
This is tags
This is font awesome :fa-star:

2.16. Diagram

Notes:

• Your app should support the specific library or engine to draw the diagram
• You should specify particular language of the fenced code block and write the definition of your diagram within it.

2.16.1 Mermaid

Notes:

• It’s implemented in showdown-mermaid.js
• Rendering diagrams of Flowchart or Sequence or Gantt
• Using mermaid
• Check mermaid doc for more information.
• Code inside { } is optional

Syntaxes

• Flowchart syntax:

    ```mermaid {"align": "left | center | right", "codeblock": true | false}
    graph TD;
    <code content>
    ```
  

• Sequence diagram syntax:

    ```mermaid {"align": "left | center | right", "codeblock": true | false}
    sequenceDiagram
    <code content>
    ```
  

• Gantt diagram syntax:

    ```mermaid {"align": "left | center | right", "codeblock": true | false}
    gantt
    <code content>
    ```
  

Showcases

• Flowchart

graph TD;
           A-->B;
           A-->C;
           B-->D;
           C-->D;

graph TD;
           A-->B;
           A-->C;
           B-->D;
           C-->D;

• Sequence diagram

sequenceDiagram
           participant Alice
           participant Bob
           Alice->>John: Hello John, how are you?
           loop Healthcheck
               John->>John: Fight against hypochondria
           end
           Note right of John: Rational thoughts <br/>prevail!
           John-->>Alice: Great!
           John->>Bob: How about you?
           Bob-->>John: Jolly good!

• Gantt diagram

       gantt
       dateFormat  YYYY-MM-DD
       title Adding GANTT diagram to mermaid
       excludes weekdays 2014-01-10

       section A section
       Completed task            :done,    des1, 2014-01-06,2014-01-08
       Active task               :active,  des2, 2014-01-09, 3d
       Future task               :         des3, after des2, 5d
       Future task2               :         des4, after des3, 5d

2.16.2 Plantuml

Notes:

• It’s implemented in showdown-plantuml.js,
• Render diagrams of uml,
• Using plantuml,
• Check plantuml website fpr more information.
• Code inside { } is optional

Syntaxes

```plantuml {"align": "left | center | right", "codeblock": true | false}
@startuml
<code content>
@enduml
```

Showcases

      @startuml
      participant User

      User -> A: DoWork
      activate A

      A -> B: << createRequest >>
      activate B

      B -> C: DoWork
      activate C
      C --> B: WorkDone
      destroy C

      B --> A: RequestCreated
      deactivate B

      A -> User: Done
      deactivate A

      @enduml

2.16.3 Flowchart

Notes:

• It’s implemented in showdown-flowchart.js
• Render diagrams of flowchart
• Using flowchart.js
• Check flowchart website for more information.
• Code inside { } is optional

Syntaxes

```flow {"align": "left | center | right", "codeblock": true | false}
<code content>
```

Syntaxes

```flowchart {"align": "left | center | right", "codeblock": true | false}
<code content>
```

Showcases

st=>start: Start:>https://www.google.com[blank]
e=>end:>https://www.google.com
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes
or No?:>https://www.google.com
io=>inputoutput: catch something...
para=>parallel: parallel tasks

st->op1->cond
cond(yes)->io->e
cond(no)->para
para(path1, bottom)->sub1(right)->op1
para(path2, top)->op1

Showcases

st=>start: Start
e=>end
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes
or No?:>https://www.google.com
io=>inputoutput: catch something
st->op1->cond
cond(yes)->io->e
cond(no)->sub1(right)->op1

2.16.4 Graphviz’s dot

Notes:

• It’s implemented in showdown-viz.js
• Render diagrams of graphviz’s dot
• Using viz.js.
• Code inside { } is optional

Syntaxes

The <engine name> of json’s “engine” field value is ‘circo’, ‘dot’, ’neato’, ‘osage’, ’twopi’ in syntax language attribute.

```dot {"engine": "<engine name>", "align": "<align>"}
<code content>
```

Showcases

• Dot example with dot engine:

digraph G {
    main -> parse -> execute;
    main -> init;
    main -> cleanup;
    execute -> make_string;
    execute -> printf
    init -> make_string;
    main -> printf;
    execute -> compare;
}

• Dot example with circo engine:

digraph G {
    main -> parse -> execute;
    main -> init;
    main -> cleanup;
    execute -> make_string;
    execute -> printf
    init -> make_string;
    main -> printf;
    execute -> compare;
}

2.16.5 Railroad diagrams

Notes:

• It’s implemented in showdown-viz.js
• Render diagrams of railroad
• Using railroad-diagrams.
• Code inside { } is optional

Syntaxes

```railroad {"align": "left | center | right", "codeblock": true | false}
<code content>
```

Showcases

Diagram(
  Optional('+', 'skip'),
    Choice(0,
      NonTerminal('name-start char'),
      NonTerminal('escape')),
      ZeroOrMore(
        Choice(0,
          NonTerminal('name char'),
          NonTerminal('escape'))))

2.16.6 WaveDrom

Notes:

• It’s implemented in showdown-viz.js
• Render diagrams of wavedrom
• Using wavedrom
• Check wavedrom website for more information.
• Code inside { } is optional

Syntaxes

```wavedrom {"align": "left | center | right", "codeblock": true | false}
<code content>
```

Showcases

{signal: [
  {name: 'clk', wave: 'p.....|...'},
  {name: 'dat', wave: 'x.345x|=.x', data: ['head', 'body', 'tail', 'data']},
  {name: 'req', wave: '0.1..0|1.0'},
  {},
  {name: 'ack', wave: '1.....|01.'}
]}

Showcases

{ signal: [
  { name: "pclk", wave: 'p.......' },
  { name: "Pclk", wave: 'P.......' },
  { name: "nclk", wave: 'n.......' },
  { name: "Nclk", wave: 'N.......' },
  {},
  { name: 'clk0', wave: 'phnlPHNL' },
  { name: 'clk1', wave: 'xhlhLHl.' },
  { name: 'clk2', wave: 'hpHplnLn' },
  { name: 'clk3', wave: 'nhNhplPl' },
  { name: 'clk4', wave: 'xlh.L.Hx' },
]}

2.16.7 Vega and Vega-Lite

Notes:

• It’s implemented in showdown-vega.js
• Render diagrams of Vega and Vega-Lite
• Using vega-embed
• Check vega website and vega-lite website for more information.
• Code inside { } is optional

Syntaxes

```vega {"align": "left | center | right", "codeblock": true | false}
<code content>
```

Syntaxes

```vega-lite {"align": "left | center | right", "codeblock": true | false}
<code content>
```

Showcases

• Vega example:

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "width": 200,
  "height": 200,
  "autosize": "none",

  "signals": [
    {
      "name": "startAngle", "value": 0,
      "bind": {"input": "range", "min": 0, "max": 6.29, "step": 0.01}
    },
    {
      "name": "endAngle", "value": 6.29,
      "bind": {"input": "range", "min": 0, "max": 6.29, "step": 0.01}
    },
    {
      "name": "padAngle", "value": 0,
      "bind": {"input": "range", "min": 0, "max": 0.1}
    },
    {
      "name": "innerRadius", "value": 0,
      "bind": {"input": "range", "min": 0, "max": 90, "step": 1}
    },
    {
      "name": "cornerRadius", "value": 0,
      "bind": {"input": "range", "min": 0, "max": 10, "step": 0.5}
    },
    {
      "name": "sort", "value": false,
      "bind": {"input": "checkbox"}
    }
  ],

  "data": [
    {
      "name": "table",
      "values": [
        {"id": 1, "field": 4},
        {"id": 2, "field": 6},
        {"id": 3, "field": 10},
        {"id": 4, "field": 3},
        {"id": 5, "field": 7},
        {"id": 6, "field": 8}
      ],
      "transform": [
        {
          "type": "pie",
          "field": "field",
          "startAngle": {"signal": "startAngle"},
          "endAngle": {"signal": "endAngle"},
          "sort": {"signal": "sort"}
        }
      ]
    }
  ],

  "scales": [
    {
      "name": "color",
      "type": "ordinal",
      "domain": {"data": "table", "field": "id"},
      "range": {"scheme": "category20"}
    }
  ],

  "marks": [
    {
      "type": "arc",
      "from": {"data": "table"},
      "encode": {
        "enter": {
          "fill": {"scale": "color", "field": "id"},
          "x": {"signal": "width / 2"},
          "y": {"signal": "height / 2"}
        },
        "update": {
          "startAngle": {"field": "startAngle"},
          "endAngle": {"field": "endAngle"},
          "padAngle": {"signal": "padAngle"},
          "innerRadius": {"signal": "innerRadius"},
          "outerRadius": {"signal": "width / 2"},
          "cornerRadius": {"signal": "cornerRadius"}
        }
      }
    }
  ]
}

• Vega-Lite example:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "Plots two functions using a generated sequence.",
  "width": 300,
  "height": 150,
  "data": {
    "sequence": {
      "start": 0,
      "stop": 12.7,
      "step": 0.1,
      "as": "x"
    }
  },
  "transform": [
    {
      "calculate": "sin(datum.x)",
      "as": "sin(x)"
    },
    {
      "calculate": "cos(datum.x)",
      "as": "cos(x)"
    },
    {
      "fold": ["sin(x)", "cos(x)"]
    }
  ],
  "mark": "line",
  "encoding": {
    "x": {
      "type": "quantitative",
      "field": "x"
    },
    "y": {
      "field": "value",
      "type": "quantitative"
    },
    "color": {
      "field": "key",
      "type": "nominal",
      "title": null
    }
  }
}

2.16.8 Network Sequence

Notes:

• It’s implemented in showdown-sequence.js,
• Render diagrams of sequence
• Using js-sequence-diagrams.
• Code inside { } is optional

Syntaxes

The <theme name> of json’s “theme” field value is “hand” or “simple” in syntax language attribute;

```sequence {"theme": "<theme name>", "align": "<align>"}
<code content>
```

Showcases

• Sequence example with hand theme:

Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!

• Sequence example with simple theme:

Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!

2.17. Table of Content Generation

Example

[TOC]

Or

[[TOC]]

Or

[[TOC]]

2.18. Admonition

Example

!!! note

This is the **note** admonition body

!!! danger Danger Title
    This is the **danger** admonition body

2.19. Attributes

Example

item bold red{style=“color:red”}

in HTML: item bold red

2.13. Custom Containers or Alerts

Notes:

• Some engine such as Markdown-it, you can add some alert text.
• Available variants:

alert-primary
alert-secondary
alert-success
alert-info
alert-warning
alert-danger
alert-light
alert-dark

Syntaxes

::: alert-info
This is an info text.
:::

::: alert-danger
This is a danger text.
:::

Showcases

::: alert-primary alert-primary :::

::: alert-secondary alert-secondary :::

::: alert-success alert-success :::

::: alert-info alert-info :::

::: alert-warning alert-warning :::

::: alert-danger alert-danger :::

::: alert-light alert-light :::

::: alert-dark alert-dark :::

in HTML

or

or

2.14. Comments

[//]: # (These are reference links used in the body of this note and get stripped out when the markdown processor does its job.

3 - Basic Markdown Cheatsheet

Basic Markdown Cheatsheet (example of Heading 1)

1. Heading (example of Heading 2)

Syntaxes

# h1 Heading
## h2 Heading
### h3 Heading
#### h4 Heading
##### h5 Heading
###### h6 Heading

Showcases

h3 Heading

h4 Heading

h5 Heading

h6 Heading

2. Paragraphs

Notes:

• To create paragraphs, use a blank line to separate one or more lines of text.
• Don’t ident paragraphs with spaces or tabs

Syntaxes

This is the first paragraph.

This is the second paragraph

Showcases

This is the first paragraph.

This is the second paragraph

3 Line Break

Notes:

• To create a line break, end a line with two or more spaces, and then type return
• Or use the <br> HTML tag

Syntaxes

This is the first line. 
And this is the second line.

Showcases

This is the first line.
And this is the second line.

Alternative Syntaxes

First line with the HTML tag after.<br>
And the next line.

Showcases

First line with the HTML tag after.
And the next line.

4. Emphasis

Syntaxes

**This is bold text**
__This is bold text__
*This is italic text*
_This is italic text_
We have **bold***italic*
This text is ***really important***
This text is ___really important___
This text is __*really important*__
This text is **_really important_**

Showcases

This is bold text
This is bold text
This is italic text
This is italic text
We have bolditalic
This text is really important
This text is really important
This text is really important
This text is really important

5. Blockquotes

Notes:

• Space is needed after the marker >;
• You could just add only one > at the first line;
• Blockquotes can be nested
• Blockquotes can contain multiple paragraphs. Add a > between the paragraphs.
• Blockquotes can contain other Markdown formatted elements. But not all elements can be used.

Syntaxes

> Blockquotes can also be nested...
>> ...by using additional greater-than signs right next to each other...
> > > ...or with spaces between arrows.

Showcases

Blockquotes can also be nested…

…by using additional greater-than signs right next to each other…

…or with spaces between arrows.

Syntaxes

> Dorothy followed her through many of the beautiful rooms in her castle.
>
> The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.

Showcases

Dorothy followed her through many of the beautiful rooms in her castle.

The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.

Syntaxes

> #### The quarterly results look great!
>
> - Revenue was off the chart.
> - Profits were higher than ever.
>
>  *Everything* is going according to **plan**.

Showcases

The quarterly results look great!

• Revenue was off the chart.
• Profits were higher than ever.

Everything is going according to plan.

6. Lists

6.1. Unordered

Syntaxes

+ To start a list, there should be an empty line above
+ Create a list by starting a line with `+`, `-`, or `*`
- Changing the sign will add a linespace
+ Add text under an item  
This is a text under an item. Notice that there are two spaces at the end above.
- Sub-lists are made by indenting 2 spaces:
  * Item 2a
  * Item 2b
* Item 3

To end a list, there should be one empty line above.

Showcases

• To start a list, there should be an empty line above
• Create a list by starting a line with +, -, or *

• Changing the sign will add a linespace

• Add text under an item
  This is a text under an item. Notice that there are two spaces at the end above.

• Sub-lists are made by indenting 2 spaces:
  • Item 2a
  • Item 2b

• Item 3

To end a list, there should be one empty line above.

6.2. Ordered

Syntaxes

1. Item 1
1. Item 2  
Notice that the sequence number is irrelevant. 
Markdown will change the sequence automatically when renderring. 
Notice that there are two spaces at the end above to make a new text under item.
3. Sub-lists are made by indenting 4 spaces
    1. Item 3a
    2. Item 3b
8. Any number for item 4

Showcases

1. Item 1
2. Item 2
   Notice that the sequence number is irrelevant.
   Markdown will change the sequence automatically when renderring.
   Notice that there are two spaces at the end above to make a new text under item.
3. Sub-lists are made by indenting 4 spaces
   1. Item 3a
   2. Item 3b
4. Any number for item 4

Syntaxes

57. will started with offset 57
1. so it will be 58

Showcases

57. will started with offset 57
58. so it will be 58

7. Elements in Lists

Notes:

• To add another element in a list while preserving the continuity of the list, indent the element four spaces or one tab

Syntaxes

* This is the first list item.
* Here's the second list item.
    I need to add another paragraph below the second list item.
* And here's the third list item.

Showcases

• This is the first list item.
• Here’s the second list item. I need to add another paragraph below the second list item.
• And here’s the third list item.

Showcases

• This is the first list item.

• Here’s the second list item.

  I need to add another paragraph below the second list item.

• And here’s the third list item.

Showcases

• This is the first list item.

• Here’s the second list item.

  A blockquote would look great below the second list item.

• And here’s the third list item.

Syntaxes

1.  Open the file containing the Linux mascot.
2.  Linux mascot called Tux.
    ![Tux, the Linux mascot](https://upload.wikimedia.org/wikipedia/commons/thumb/a/af/Tux.png/220px-Tux.png)
3.  Tux is cool.

Showcases

1. Open the file containing the Linux mascot.
2. Linux mascot called Tux.
3. Tux is cool.

But, for text element in ordered list, add five spaces

1. This is the first list item.

2. Here’s the second list item.

   I need to add another paragraph below the second list item.

3. And here’s the third list item.

But, for quote in ordered list, add five spaces

1. This is the first list item.

2. Here’s the second list item.

   A blockquote would look great below the second list item.

3. And here’s the third list item.

But, for code blocks in the lists, add eight spaces or two tabs.

1. Open the file.

2. Find the following code block on line 21:

   <html>
     <head>
       <title>Test</title>
     </head>
   

3. Update the title to match the name of your website.

8. Code

Notes:

• Inline codes is written inside ` `
• or idented by add four spaces or one tab before

Syntaxes

This is inline `code`.

Showcases

This is inline code.

Syntaxes

    // Some comments
    line 1 of code
    line 2 of code
    line 3 of code

Showcases

// Some comments
line 1 of code
line 2 of code
line 3 of code

Syntaxes

    <html>
      <head>
        <title>Test</title>
      </head>

Showcases

<html>
  <head>
    <title>Test</title>
  </head>

9. Links

Example

This is link
This is link with title

Or, directly put the link

https://example.com/
fake@example.com

Or with <>

https://www.markdownguide.org
fake@example.com

But, to prevent automated linking

https://www.example.com

Or add emphasize

I love supporting the EFF.
This is the Markdown Guide.
See the section on code.

10. Reference-style Links

I know Indonesia
I also know etymology of Indonesia
I knew History of Indonesia

Or, put reference in text

It was a hobbit-hole, and that means comfort.

But, be careful with spaces in the links, put %20 as space

example %20 link
[example without %20](https://www.example.com/my great page)

11. Images

Notes:

• It is not recommended to use image links in reference format. Some apps will not preview those images.
• Specifying size of image is supported only in some extended markdown (such as markdown-it).

Syntaxes

![Image Alt Text](/url/to/image.png "Optional Text")
![Image Alt Text](/url/to/image.png "Image specified with width and height" =800x600)
![Image Alt Text](/url/to/image.png =800x600)
![Image Alt Text](/url/to/image.png "Image specified with width" =800x)
![Image Alt Text](/url/to/image.png "Image specified with height" =x600)

Showcases


Syntaxes

![Image Alt Text][id1]  
![Image Alt Text][id2]

[id1]: /url/to/image.png "Optional Text"
[id2]: /url/to/image.png

Showcases

12. Escaping Characters

Note:

• add a backslash \ in front of the character.

Example

* star
\ backslash itself
` backtick
{ } curly braces
! exclamation mark

13. HTML Code

Example

This word is bold. This word is italic.

14. Horizontal Rules

Example

4 - Markdown Tools and Apps

Markdown Tools and Apps

• Markdown Table Generator

Online Markdown Editor

• Pandoc
• Markdown Live Preview
• Dilinger
• Stackedit
• TMPVar
• Markdown-it demo
• Markdown Here
• Dingus
• JBT Markdown Editor
• Write Box
• Editor MD
• Upmath
• Pioul FR
• Codi MD
• Marxico
• Markdown Site
• Write Me
• SHLHCK

to Markdown Converter

• HTML to Markdown
• Word to Markdown
• Paste to Markdown

Markdown Linter

• Markdown Lint

Markdown References

• Markdown Guide, Github
• Common Mark, Latest Specification
• List Common Mark Implementation
• List Commonmark Application
• Deployed Extensions Not yet in Commonmark but available in other flavors. Some of it still in discussion and this discussion
• Gitlab Markdown
• Github Flavored Markdown
• Markdown Extra
• MD Tutorial
• List Markdown Flavors
• Arctic Studio

Markdown Parsing Comparisons

• Babelmark for Markdown Guide Comparison, FAQ
• Babelmark 3

Markdown Style Guide

• Markdown Style Guide Github
• Google Style Guide

List Markdown Parser

• CSS Tricks
• Markdown Github
• Parser Comparison
• Markup comparison
• Markdown Flavors
• Pandoc
• Original Markdown
• PHP Markdown Extra
• Kramdown
• Github Flavored MD
• Gitlab Flavored MD
• Markdown-it
• Showdown
• Marked
• MultiMarkdown
• Maruku Markdown Maruku

Discussion

• Criticism for markdown
• Why we need other markup lang

Alternative to Markdown (another Markup Languages)

List at wiki

• .markdown, .mdown, .mkdn, .md
• .textile Redcloth
• .rdoc
• .org
• .creole Creole
• .mediawiki, .wiki
• .rst
• .asciidoc, .adoc, .asc asciidoctor guide or this guide
• .pod

Comparison

• Asciidoc vs Markdown

Markdown Editor

• Mindforger
• Ghostwriter
• Stackedit
• Editor.md

Markdown Tools

• Paste as Markdown: clipboard2markdown
• Paste as Markdown: Puppypaste
• Markdown Editor for Web

5 - Pandoc

About Pandoc

Learn:

• About Pandoc
• Pandoc Markdown vs standard Markdown
• Tutorial 17.3 - Markdown and Pandoc
  • Complete Tutorial
• Authorship with Pandoc
• Academic Pandoc Tempalte
• Pandoc Wiki
• Authoring articles with Pandoc
• Scientific Paper Tutorial

Pandoc Wrapper

• Pandoc wrappers and interfaces · jgm/pandoc Wiki
• PanWriter
• Panconvert - a Markup Document Converter
• PanDocElectron - Wikiversity

6 - List of Library for Commonmark

List of Library for Commonmark Extension

2.16. Diagram

Notes:

• Your app should support the specific library or engine to draw the diagram
• You should specify particular language of the fenced code block and write the definition of your diagram within it.

2.16.1 Mermaid

Notes:

• It’s implemented in showdown-mermaid.js
• Rendering diagrams of Flowchart or Sequence or Gantt
• Using mermaid
• Check mermaid doc for more information.
• Code inside { } is optional

Syntaxes

• Flowchart syntax:

    ```mermaid {"align": "left | center | right", "codeblock": true | false}
    graph TD;
    <code content>
    ```
  

• Sequence diagram syntax:

    ```mermaid {"align": "left | center | right", "codeblock": true | false}
    sequenceDiagram
    <code content>
    ```
  

• Gantt diagram syntax:

    ```mermaid {"align": "left | center | right", "codeblock": true | false}
    gantt
    <code content>
    ```
  

Showcases

• Flowchart

graph TD;
           A-->B;
           A-->C;
           B-->D;
           C-->D;

graph TD;
           A-->B;
           A-->C;
           B-->D;
           C-->D;

• Sequence diagram

sequenceDiagram
           participant Alice
           participant Bob
           Alice->>John: Hello John, how are you?
           loop Healthcheck
               John->>John: Fight against hypochondria
           end
           Note right of John: Rational thoughts <br/>prevail!
           John-->>Alice: Great!
           John->>Bob: How about you?
           Bob-->>John: Jolly good!

• Gantt diagram

       gantt
       dateFormat  YYYY-MM-DD
       title Adding GANTT diagram to mermaid
       excludes weekdays 2014-01-10

       section A section
       Completed task            :done,    des1, 2014-01-06,2014-01-08
       Active task               :active,  des2, 2014-01-09, 3d
       Future task               :         des3, after des2, 5d
       Future task2               :         des4, after des3, 5d

2.16.2 Plantuml

Notes:

• It’s implemented in showdown-plantuml.js,
• Render diagrams of uml,
• Using plantuml,
• Check plantuml website fpr more information.
• Code inside { } is optional

Syntaxes

```plantuml {"align": "left | center | right", "codeblock": true | false}
@startuml
<code content>
@enduml
```

Showcases

      @startuml
      participant User

      User -> A: DoWork
      activate A

      A -> B: << createRequest >>
      activate B

      B -> C: DoWork
      activate C
      C --> B: WorkDone
      destroy C

      B --> A: RequestCreated
      deactivate B

      A -> User: Done
      deactivate A

      @enduml

2.16.3 Flowchart

Notes:

• It’s implemented in showdown-flowchart.js
• Render diagrams of flowchart
• Using flowchart.js
• Check flowchart website for more information.
• Code inside { } is optional

Syntaxes

```flow {"align": "left | center | right", "codeblock": true | false}
<code content>
```

Syntaxes

```flowchart {"align": "left | center | right", "codeblock": true | false}
<code content>
```

Showcases

st=>start: Start:>https://www.google.com[blank]
e=>end:>https://www.google.com
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes
or No?:>https://www.google.com
io=>inputoutput: catch something...
para=>parallel: parallel tasks

st->op1->cond
cond(yes)->io->e
cond(no)->para
para(path1, bottom)->sub1(right)->op1
para(path2, top)->op1

Showcases

st=>start: Start
e=>end
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes
or No?:>https://www.google.com
io=>inputoutput: catch something
st->op1->cond
cond(yes)->io->e
cond(no)->sub1(right)->op1

2.16.4 Graphviz’s dot

Notes:

• It’s implemented in showdown-viz.js
• Render diagrams of graphviz’s dot
• Using viz.js.
• Code inside { } is optional

Syntaxes

The <engine name> of json’s “engine” field value is ‘circo’, ‘dot’, ’neato’, ‘osage’, ’twopi’ in syntax language attribute.

```dot {"engine": "<engine name>", "align": "<align>"}
<code content>
```

Showcases

• Dot example with dot engine:

digraph G {
    main -> parse -> execute;
    main -> init;
    main -> cleanup;
    execute -> make_string;
    execute -> printf
    init -> make_string;
    main -> printf;
    execute -> compare;
}

• Dot example with circo engine:

digraph G {
    main -> parse -> execute;
    main -> init;
    main -> cleanup;
    execute -> make_string;
    execute -> printf
    init -> make_string;
    main -> printf;
    execute -> compare;
}

2.16.5 Railroad diagrams

Notes:

• It’s implemented in showdown-viz.js,
• Render diagrams of railroad
• Using railroad-diagrams.
• Code inside { } is optional

Syntaxes

```railroad {"align": "left | center | right", "codeblock": true | false}
<code content>
```

Showcases

Diagram(
  Optional('+', 'skip'),
    Choice(0,
      NonTerminal('name-start char'),
      NonTerminal('escape')),
      ZeroOrMore(
        Choice(0,
          NonTerminal('name char'),
          NonTerminal('escape'))))

2.16.6 WaveDrom

Notes:

• It’s implemented in showdown-viz.js,
• Render diagrams of wavedrom
• Using wavedrom
• Check wavedrom website for more information.
• Code inside { } is optional

Syntaxes

```wavedrom {"align": "left | center | right", "codeblock": true | false}
<code content>
```

Showcases

{signal: [
  {name: 'clk', wave: 'p.....|...'},
  {name: 'dat', wave: 'x.345x|=.x', data: ['head', 'body', 'tail', 'data']},
  {name: 'req', wave: '0.1..0|1.0'},
  {},
  {name: 'ack', wave: '1.....|01.'}
]}

Showcases

{ signal: [
  { name: "pclk", wave: 'p.......' },
  { name: "Pclk", wave: 'P.......' },
  { name: "nclk", wave: 'n.......' },
  { name: "Nclk", wave: 'N.......' },
  {},
  { name: 'clk0', wave: 'phnlPHNL' },
  { name: 'clk1', wave: 'xhlhLHl.' },
  { name: 'clk2', wave: 'hpHplnLn' },
  { name: 'clk3', wave: 'nhNhplPl' },
  { name: 'clk4', wave: 'xlh.L.Hx' },
]}

2.16.7 Vega and Vega-Lite

Notes:

• It’s implemented in showdown-vega.js,
• Render diagrams of Vega and Vega-Lite
• Using vega-embed,
• Check vega website and vega-lite website for more information.
• Code inside { } is optional

Syntaxes

```vega {"align": "left | center | right", "codeblock": true | false}
<code content>
```

Syntaxes

```vega-lite {"align": "left | center | right", "codeblock": true | false}
<code content>
```

Showcases

• Vega example:

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "width": 200,
  "height": 200,
  "autosize": "none",

  "signals": [
    {
      "name": "startAngle", "value": 0,
      "bind": {"input": "range", "min": 0, "max": 6.29, "step": 0.01}
    },
    {
      "name": "endAngle", "value": 6.29,
      "bind": {"input": "range", "min": 0, "max": 6.29, "step": 0.01}
    },
    {
      "name": "padAngle", "value": 0,
      "bind": {"input": "range", "min": 0, "max": 0.1}
    },
    {
      "name": "innerRadius", "value": 0,
      "bind": {"input": "range", "min": 0, "max": 90, "step": 1}
    },
    {
      "name": "cornerRadius", "value": 0,
      "bind": {"input": "range", "min": 0, "max": 10, "step": 0.5}
    },
    {
      "name": "sort", "value": false,
      "bind": {"input": "checkbox"}
    }
  ],

  "data": [
    {
      "name": "table",
      "values": [
        {"id": 1, "field": 4},
        {"id": 2, "field": 6},
        {"id": 3, "field": 10},
        {"id": 4, "field": 3},
        {"id": 5, "field": 7},
        {"id": 6, "field": 8}
      ],
      "transform": [
        {
          "type": "pie",
          "field": "field",
          "startAngle": {"signal": "startAngle"},
          "endAngle": {"signal": "endAngle"},
          "sort": {"signal": "sort"}
        }
      ]
    }
  ],

  "scales": [
    {
      "name": "color",
      "type": "ordinal",
      "domain": {"data": "table", "field": "id"},
      "range": {"scheme": "category20"}
    }
  ],

  "marks": [
    {
      "type": "arc",
      "from": {"data": "table"},
      "encode": {
        "enter": {
          "fill": {"scale": "color", "field": "id"},
          "x": {"signal": "width / 2"},
          "y": {"signal": "height / 2"}
        },
        "update": {
          "startAngle": {"field": "startAngle"},
          "endAngle": {"field": "endAngle"},
          "padAngle": {"signal": "padAngle"},
          "innerRadius": {"signal": "innerRadius"},
          "outerRadius": {"signal": "width / 2"},
          "cornerRadius": {"signal": "cornerRadius"}
        }
      }
    }
  ]
}

• Vega-Lite example:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "Plots two functions using a generated sequence.",
  "width": 300,
  "height": 150,
  "data": {
    "sequence": {
      "start": 0,
      "stop": 12.7,
      "step": 0.1,
      "as": "x"
    }
  },
  "transform": [
    {
      "calculate": "sin(datum.x)",
      "as": "sin(x)"
    },
    {
      "calculate": "cos(datum.x)",
      "as": "cos(x)"
    },
    {
      "fold": ["sin(x)", "cos(x)"]
    }
  ],
  "mark": "line",
  "encoding": {
    "x": {
      "type": "quantitative",
      "field": "x"
    },
    "y": {
      "field": "value",
      "type": "quantitative"
    },
    "color": {
      "field": "key",
      "type": "nominal",
      "title": null
    }
  }
}

2.16.8 Network Sequence

Notes:

• It’s implemented in showdown-sequence.js,
• Render diagrams of sequence
• Using js-sequence-diagrams.
• Code inside { } is optional

Syntaxes

The <theme name> of json’s “theme” field value is “hand” or “simple” in syntax language attribute;

```sequence {"theme": "<theme name>", "align": "<align>"}
<code content>
```

Showcases

• Sequence example with hand theme:

Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!

• Sequence example with simple theme:

Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!

7 - Extended Commonmark

Extended Commonmark

Markdown-it Extension

Newline as hardbreak

Linkify

Direct Link is not common mark

https://example.com/ fake@example.com

2.12. Abbreviations

Support: PHP Markdown Extra 1.9.0, Markdown-it

Markdown Syntax: The "HTML" specification is maintained by the "W3C". *[HTML]: Hyper Text Markup Language *[W3C]: World Wide Web Consortium

HTML Syntax: The <abbr title="Hyper Text Markup Language">HTML</abbr> specification is maintained by the <abbr title="World Wide Web Consortium">W3C</abbr>.

Markdown Display:

The “HTML” specification is maintained by the “W3C”. *[HTML]: Hyper Text Markup Language *[W3C]: World Wide Web Consortium

HTML Display:

The HTML specification is maintained by the W3C.

2.3. Tables

Support: kramdown

Notes:

• we can set alignment in table with a colon (:)
• we can add formatting text, links, code and HTML character code, but not: heading, headings, blockquotes, lists, horizontal rules, images, HTML tags, or fenced code

Support: PHP Markdown Extra, GFM, Maruku, MultiMarkdown, kramdown, Parsedown markdown-it (plugin), showdown, marked

Syntaxes

| Syntax      | Description | Test Text is long    |
| :---        |    :----:   |          ---: |
| [Example](https://www.example.com/)      | **Title**       | `Here's this  is` |
| Paragraph   | Text        | And more   |

HTML:

<table>
<thead>
<tr>
  <th align="left">Syntax</th>
  <th align="center">Description</th>
  <th align="right">Test Text is long</th>
</tr>
</thead>
<tbody>
<tr>
  <td align="left"><a href="https://www.example.com/">Example</a></td>
  <td align="center"><strong>Title</strong></td>
  <td align="right"><code>Here's this  is</code></td>
</tr>
<tr>
  <td align="left">Paragraph</td>
  <td align="center">Text</td>
  <td align="right">And more</td>
</tr>
</tbody>
</table>

Showcases

HTML

2.4. Footnote

2.4.1. Outline Footnote

Support: PHP Markdown Extra, Maruku , MultiMarkdown, Markdown-it

Markdown Syntax:

Here's a simple footnote[^1] and here's a longer one[^bignote], and [^withcode]

[^1]: This is the first footnote.
[^bignote]: Here's one with multiple paragraphs.
For example like this
[^withcode]: `code` or code in paragrahps
`code and codes`

HTML Syntax:

<p>Here’s a simple footnote<sup id="fnref:1"><a href="#fn:1" rel="footnote">1</a></sup> and here’s a longer one<sup id="fnref:2"><a href="#fn:2" rel="footnote">2</a></sup>, and <sup id="fnref:3"><a href="#fn:3" rel="footnote">3</a></sup></p>
<div class="footnotes"><hr /><ol><li id="fn:1">
<p>This is the first footnote. <a href="#fnref:1" rev="footnote">↩</a></p>
</li><li id="fn:2">
<p>Here’s one with multiple paragraphs. For example like this <a href="#fnref:2" rev="footnote">↩</a></p>
</li><li id="fn:3">
<p><code>code</code> or code in paragrahps <code>code and codes</code> <a href="#fnref:3" rev="footnote">↩</a></p>
</li></ol></div>

Markdown Display:

Here’s a simple footnote¹ and here’s a longer one², and ³

HTML Display:

Here’s a simple footnote¹ and here’s a longer one², and ³

2.4.2. Inline Footnote #1

Support: MultiMarkdown,

Markdown Syntax:

Another example of footnote 1 link[^first] and footnote 2 link[^second].

HTML Syntax:

<p>Another example of footnote 1 link<a href="#fn:1" id="fnref:1" title="see footnote" class="footnote"><sup>1</sup></a> and footnote 2 link<a href="#fn:2" id="fnref:2" title="see footnote" class="footnote"><sup>2</sup></a>.</p>

<div class="footnotes">
<hr />
<ol>

<li id="fn:1">
<p>first <a href="#fnref:1" title="return to body" class="reversefootnote">&#160;&#8617;</a></p>
</li>

<li id="fn:2">
<p>second <a href="#fnref:2" title="return to body" class="reversefootnote">&#160;&#8617;</a></p>
</li>

</ol>
</div>

Markdown Display:

Another example of footnote 1 link[^first] and footnote 2 link[^second].

HTML Display:

Another example of footnote 1 link¹ and footnote 2 link².

2.4.2. Inline Footnote #2

Support: Markdown-it

Markdown Syntax:

Or to add inline footnote^[Text of inline footnote] definition.

HTML Syntax:

<p>Or to add inline footnote<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup> definition.</p>
<hr class="footnotes-sep">
<section class="footnotes">
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>Text of inline footnote <a href="#fnref1" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>

Markdown Display:

Or to add inline footnote^[Text of inline footnote] definition.

HTML Display:

Or to add inline footnote^[1] definition.

2.4.4. Duplicate Reference

Support: PHP Markdown Extra, kramdown , MultiMarkdown, Markdown-it

Markdown Syntax:

This is a duplicated footnote[^b].
This duplicated footnote reference[^b].

[^b]: Another footnote text.

HTML Syntax Kramdown Style:

<p>This is a duplicated footnote<sup id="fnref:b"><a href="#fn:b" class="footnote">1</a></sup>.
This duplicated footnote reference<sup id="fnref:b:1"><a href="#fn:b" class="footnote">1</a></sup>.</p>

<div class="footnotes">
  <ol>
    <li id="fn:b">
      <p>Another footnote text. <a href="#fnref:b" class="reversefootnote">&#8617;</a> <a href="#fnref:b:1" class="reversefootnote">&#8617;<sup>2</sup></a></p>
    </li>
  </ol>
</div>

HTML Syntax Markdown-it:

<p>This is a duplicated footnote<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup>.
This duplicated footnote reference<sup class="footnote-ref"><a href="#fn1" id="fnref1:1">[1:1]</a></sup>.</p>
<hr class="footnotes-sep">
<section class="footnotes">
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>Another footnote text. <a href="#fnref1" class="footnote-backref">↩︎</a> <a href="#fnref1:1" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>

Markdown Display:

This is a duplicated footnote⁴. This duplicated footnote reference⁴.

HTML Display Style Kramdown:

This is a duplicated footnote¹. This duplicated footnote reference¹.

HTML Display Style Markdown-it:

This is a duplicated footnote^[1]. This duplicated footnote reference^[1:1].

2.4. Strikethrough, Highlighting, Underline

2.4.1 Strikethrough

Support: marked, RDiscount, Fatdown, Parsedown, GFM, showdown, markdown-it Markdown Syntax

~~strikethrough~~

HTML Syntax:

<p><s>strikethrough</s></p>
<p><del>strikethrough</del></p>

Markdown Display:

strikethrough

HTML Display:

strikethrough

strikethrough

2.4.2 Mark (Highlighting)

Support: markdown-it Markdown Syntax:

==marked text==

HTML Syntax:

<p><mark>marked text</mark></p>

Markdown Display:

==marked text==

HTML Display:

marked text

2.4.3 Underline

Support: - (no markdown)

Markdown Syntax

++underline++

HTML Syntax

<u>underline</u>
<ins>underline</ins>

Markdown Display:

++underline++

HTML Display:

underline underline

2.5. Task Lists

Support: marked, showdown, markdown-it

Markdown Syntax:

- [x] Write the press release
- [ ] Update the website
- [ ] Contact the media

HTML Display Style 1:

<ul>
<li><input checked="" disabled="" type="checkbox"> Write the press release</li>
<li><input disabled="" type="checkbox"> Update the website</li>
<li><input disabled="" type="checkbox"> Contact the media</li>
</ul>

HTML Display Style 1:

<ul>
<li class="task-list-item" style="list-style-type: none;"><input type="checkbox" disabled style="margin: 0px 0.35em 0.25em -1.6em; vertical-align: middle;" checked> Write the press release</li>
<li class="task-list-item" style="list-style-type: none;"><input type="checkbox" disabled style="margin: 0px 0.35em 0.25em -1.6em; vertical-align: middle;"> Update the website</li>
<li class="task-list-item" style="list-style-type: none;"><input type="checkbox" disabled style="margin: 0px 0.35em 0.25em -1.6em; vertical-align: middle;"> Contact the media</li>
</ul>

Markdown Display:

• Write the press release
• Update the website
• Contact the media

HTML Display Style 1

• Write the press release
• Update the website
• Contact the media

HTML Display Style 2

• Write the press release
• Update the website
• Contact the media

2.6. Definition Lists

Support: karmdown, banyak

Markdown Syntax:

First Term
: This is the definition of the first term.

Second Term
: This is one definition of the second term.
: This is another definition of the second term.

HTML Syntax:

<dl>
<dt>First Term</dt>
<dd>This is the definition of the first term.</dd>
<dt>Second Term</dt>
<dd>This is one definition of the second term. </dd>
<dd>This is another definition of the second term.</dd>
</dl>

Markdown Display:

First Term

This is the definition of the first term.

Second Term

This is one definition of the second term.

This is another definition of the second term.

HTML Display:

First Term

This is the definition of the first term.

Second Term

This is one definition of the second term.

This is another definition of the second term.

2.7. Emojies

2.7.1 Copy Paste of Emoji

Markdown Syntax

Gone camping! ⛺ Be back soon.
That is so funny! 😂

HTML Syntax

<p>Gone camping! ⛺ Be back soon.
That is so funny! 😂</p>

Markdown Display

Gone camping! ⛺ Be back soon. That is so funny! 😂

HTML Display

Gone camping! ⛺ Be back soon. That is so funny! 😂

2.7.2 Markdown of Emoji

Support: markdown-it

Markdown Syntax:

Gone camping! :tent: Be back soon.
That is so funny! :joy:
> Classic markup: :wink: :crush: :cry: :tear: :laughing: :yum:
>
> Shortcuts (emoticons): :-) :-( 8-) ;)

HTML Syntax:

<p>Gone camping! ⛺️ Be back soon.
That is so funny! 😂</p>
<blockquote>
<p>Classic markup: 😉 :crush: 😢 :tear: 😆 😋</p>
<p>Shortcuts (emoticons): 😃 😦 😎 😉</p>
</blockquote>

Markdown Display

Gone camping! :tent: Be back soon. That is so funny! :joy:

Classic markup: :wink: :crush: :cry: :tear: :laughing: :yum:

Shortcuts (emoticons): :-) :-( 8-) ;)

HTML Display

Gone camping! ⛺️ Be back soon. That is so funny! 😂

Classic markup: 😉 :crush: 😢 :tear: 😆 😋

Shortcuts (emoticons): 😃 😦 😎 😉

2.9. Typographic replacements

Support: markdown-it, Fatdown

Markdown Syntax

(c) (C) (r) (R) (tm) (TM) (p) (P) +-
test.. test... test..... test?..... test!....
!!!!!! ???? ,,  -- ---
"Smartypants, double quotes" and 'single quotes'

HTML Syntax:

<p>© © ® ® ™ ™ § § ±</p>
<p>test… test… test… test?.. test!..</p>
<p>!!! ??? ,  – —</p>
<p>“Double quotes” and ‘single quotes’</p>

Markdown Display (c) (C) (r) (R) (tm) (TM) (p) (P) +- test.. test… test….. test?….. test!…. !!!!!! ???? ,, – — “Smartypants, double quotes” and ‘single quotes’

HTML Display

© © ® ® ™ ™ § § ±

test… test… test… test?.. test!..

!!! ??? , – —

“Double quotes” and ‘single quotes’

2.10. Superscript and Subscript

2.10.1 Superscript

Support; MultiMarkdown, Fatdown, Markdown-it

Markdown x^2^

HTML:

x²

Example Subscript Markdwon H~2~O

In HTML:

H₂O

2.14. Math (Latex)

Support: Maruku (math)

Inline Einstein Equations $E=mc^2$ and Gamma Function $\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$

Outline equations

$$\sin(\alpha)^{\theta}=\sum_{i=0}^{n}(x^i + \cos(f))$$

2.15 Linkify

Support: Markdown-t, marked,Parsedown , GFM, Fatdown, showdown

**Markdown;

https://example.com/

fake@example.com

HTML:

https://example.com/

fake@example.com

Image with specific size

Support: Markdown-it, Maruku MultiMarkdown


2.2. Code Fencing and Highlighting

Notes:

• We can make block code fences without need to be idented
• lang is optional to specify the language of the code; if not specified, the app won’t highlight the code;
• We need one empty line before

Syntaxes

    ```
    This is a fenced code block.
    ```

Syntaxes

    ~~~
    This is another fenced code block.
    ~~~

Showcases

This is a fenced code block.

No language indicated, so no syntax highlighting.
s = "There is no highlighting for this."
But let's throw in a <b>tag</b>.

Code Highlighting

No language indicated, so no syntax highlighting.
s = "There is no highlighting for this."
But let's throw in a <b>tag</b>.

Showcases (javascript)

var s = "JavaScript syntax highlighting";
alert(s);

Showcases (python)

def function():
    #indenting works just fine in the fenced code block
    s = "Python syntax highlighting"
    print s

Showcases (ruby)

require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html

2.1. Attributes

2.1.1 Heading Attributes

Support: Markdown Extra , Maruku, kramdown Pandoc

Markdown:

### My Great Heading {#heading-ids}

Markdown

My Great Heading

In HTML:

My Great Heading

Link to Heading IDs

2.1.2 Block Attributes

Support: kramdown, Markdown Extra

> A nice blockquote
{: #with-an-id}

<blockquote id="with-an-id">
  <p>A nice blockquote</p>
</blockquote>

Markdown:

A nice blockquote {: #with-an-id}

HTML:

A nice blockquote

2.1.2 Inline Attributes

This is *red*{: style="color: red"}.

<p>This is <em style="color: red">red</em>.</p>

Ignoring Text

This is a paragraph
{::comment}
This is a comment which is
completely ignored.
{:/comment}
... paragraph continues here.

Extensions can also be used
inline {::nomarkdown}**see**{:/}!

<p>This is a paragraph
<!-- 
This is a comment which is
completely ignored.
 -->
… paragraph continues here.</p>

<p>Extensions can also be used
inline **see**!</p>

Implicit Header REferences

Support : Pandoc

So, to link to a heading

# Heading identifiers in HTML

you can simply write

[Heading identifiers in HTML]

or

[Heading identifiers in HTML][]

Line Blocks

Support: pandocs

| The limerick packs laughs anatomical
| In space that is quite economical.
|    But the good ones I've seen
|    So seldom are clean
| And the clean ones so seldom are comical

Image Sizing

• Specifying size of image is supported only in some extended markdown (such as markdown-it).

Syntaxes

![Image Alt Text](/url/to/image.png "Optional Text")
![Image Alt Text](/url/to/image.png "Image specified with width and height" =800x600)
![Image Alt Text](/url/to/image.png =800x600)
![Image Alt Text](/url/to/image.png "Image specified with width" =800x)
![Image Alt Text](/url/to/image.png "Image specified with height" =x600)

Showcases


2.19. Attributes

Support:

Markdown item bold red{style=“color:red”} HTML:

in HTML: item bold red

8 - List of Extension in Markdown

List of Extension in Markdown

Commonmark

Tries to implement all possible elements, while being unambiguous. Notably, CommonMark not yet includes a specification for footnotes.

1. GFM

Github Flavored Markdown

This is a variety of Markdown invented by the hosting platform GitHub and is today one of the most common dialects.

Tables (extension)

Markdown syntax:

HTML code:

<table>
<thead>
<tr>
<th>foo</th>
<th>bar</th>
</tr>
</thead>
<tbody>
<tr>
<td>baz</td>
<td>bim</td>
</tr>
</tbody>
</table>

Task list items (extension)

• foo
  • bar
  • baz
• bim

Markdown syntax:

HTML code:

<ul>
<li><input checked="" disabled="" type="checkbox"> foo
<ul>
<li><input disabled="" type="checkbox"> bar</li>
<li><input checked="" disabled="" type="checkbox"> baz</li>
</ul>
</li>
<li><input disabled="" type="checkbox"> bim</li>
</ul>

Strikethrough (extension)

Hi Hello, world!

Markdown syntax:

HTML code:

<p><del>Hi</del> Hello, world!</p>

Autolinks (extension)

www.commonmark.org foo@bar.baz

Markdown syntax:

HTML code:

<p><a href="https://www.commonmark.org">www.commonmark.org</a></p>
<p><a href="mailto:foo@bar.baz">foo@bar.baz</a></p>

Disallowed some Raw HTML (extension)

• GFM enables the tagfilter extension, where the following HTML tags will be filtered when rendering HTML output: <title> <textarea> <style> <xmp> <iframe> <noembed> <noframes> <script> <plaintext>
• All other HTML tags are left untouched

2. Markdown-it

Markdown-it Github

Typographic replacements

(c) (C) (r) (R) (tm) (TM) (p) (P) +-

test.. test… test….. test?….. test!….

!!!!!! ???? ,, – —

“Smartypants, double quotes” and ‘single quotes’

Strikethrough

Strikethrough

Syntax highlighting

var foo = function (bar) {
  return bar++;
};

console.log(foo(5));

Tables

Emojies (plugin)

Emojies

Classic markup: :wink: :crush: :cry: :tear: :laughing: :yum:

Shortcuts (emoticons): :-) :-( 8-) ;)

see how to change output with twemoji.

Superscript/Subscript (plugin)

Subscript / Superscript

• 19^th^
• H~2~O

Underscore/inserted text (plugin)

<ins>

++Inserted text++

Marked/highlight text (plugin)

<mark>

==Marked text==

Footnotes (plugin)

Footnotes

Footnote 1 link¹.

Footnote 2 link².

Inline footnote^[Text of inline footnote] definition.

Duplicated footnote reference².

Definition Lists (Plugin)

Definition lists

Term 1

Definition 1 with lazy continuation.

Term 2 with inline markup

Definition 2

{ some code, part of Definition 2 }

Third paragraph of definition 2.

Compact style:

Term 1 ~ Definition 1

Term 2 ~ Definition 2a ~ Definition 2b

Abbreviations (plugin)

Abbreviations

This is HTML abbreviation example.

It converts “HTML”, but keep intact partial entries like “xxxHTMLyyy” and so on.

*[HTML]: Hyper Text Markup Language

Custom Container/Warning (plugin)

Custom containers

::: warning here be dragons :::

Autolink/Linkify

www.google.com

mail@google.com

3. MultiMarkdown

MultiMarkdown Github

Abbreviations (or Acronyms)

Markdown syntax:

[>MMD] is an abbreviation.  So is [>(MD) Markdown].

[>MMD]: MultiMarkdown

HTML code:

Citations

Markdown syntax:

This is a statement that should be attributed to
its source[p. 23][#Doe:2006].

And following is the description of the reference to be
used in the bibliography.

[#Doe:2006]: John Doe. *Some Big Fancy Book*.  Vanity Press, 2006.

HTML code:

CriticMarkup

CriticMarkup is a way for authors and editors to track changes to documents in plain text. As with Markdown, small groups of distinctive characters allow you to highlight insertions, deletions, substitutions and comments, all without the overhead of heavy, proprietary office suites. https://criticmarkup.com/

Definition List

Markdown syntax:

Apple
:	Pomaceous fruit of plants of the genus Malus in 
	the family Rosaceae.
:	An american computer company.

Orange
:	The fruit of an evergreen tree of the genus Citrus.

HTML code:

Cross-References

Markdown syntax:

I added the ability to interpret [Some Text][] as a cross-link, if a header named “Some Text” exists.

HTML code:

Escaped newlines

Markdown syntax:

This is a line.\
This is a new line

HTML code:

Fenced Code Blocks

Markdown syntax:

```perl
# Demonstrate Syntax Highlighting if you link to highlight.js #
# https://softwaremaniacs.org/soft/highlight/en/
print "Hello, world!\n";
$a = 0;
while ($a < 10) {
print "$a...\n";
$a++;
}

HTML code:
```html

File Transclusion

File transclusion is the ability to tell MultiMarkdown to insert the contents of another file inside the current file being processed. Markdown syntax:

This is some text.

{{some_other_file.txt}}

Another paragraph

HTML code:

Footnotes

Markdown syntax:

Here is some text containing a footnote.[^somesamplefootnote]

[^somesamplefootnote]: Here is the text of the footnote itself.

[somelink]:https://somelink.com

HTML code:

Glossaries

Markdown syntax:

[?(glossary) The glossary collects information about important
terms used in your document] is a glossary term.

[?glossary] is also a glossary term.

[?glossary]: The glossary collects information about important
terms used in your document

HTML code:

Images Extension

MultiMarkdown also adds a few additional features. If an image is the only thing in a paragraph, it is treated as a block level element

Markdown syntax:

This image (![Alt text](/path/to/img.jpg))
is different than the following image:

![Alt text](/path/to/img.jpg)

HTML code:

<p>This image (<img src="/path/to/img.jpg" alt="Alt text" />)
is different than the following image:</p>

<figure>
<img src="/path/to/img.jpg" alt="Alt text" />
<figcaption>Alt text</figcaption>
</figure>

Link and Image Attributes

Markdown syntax:

This is a formatted ![image][] and a [link][] with attributes.

[image]: https://path.to/image "Image title" width=40px height=400px
[link]:  https://path.to/link.html "Some Link" class=external
         style="border: solid black 1px;"

Colored [link](https://example.net "Title" style="color:red")

HTML code:

Math

Subscript Superscript

Markdown syntax:

y^(a+b)^
x~y,z~

HTML code:

Metadata

It is possible to include special metadata at the top of a MultiMarkdown document, such as title, author, etc. This information can then be used to control how MultiMarkdown processes the document, or can be used in certain output formats in special ways.

Raw Source

Code spans and code blocks can be flagged as representing raw source Markdown syntax:

foo `*bar*`{=html}

```{=latex}
*foo*

HTML code:
```html

Smart Typography

MultiMarkdown converts:

• Straight quotes (" and ‘) into “curly” quotes
• Backticks-style quotes (``this’’) into “curly” quotes
• Dashes (– and —) into en- and em- dashes
• Three dots (…) become an ellipsis

Table of Contents

Markdown syntax:

{{TOC}}
{{TOC:2-3}}

HTML code:

Tables

Markdown syntax:

|             |          Grouping           ||
First Header  | Second Header | Third Header |
 ------------ | :-----------: | -----------: |
Content       |          *Long Cell*        ||
Content       |   **Cell**    |         Cell |

New section   |     More      |         Data |
And more      | With an escaped '\|'         ||  
[Prototype table]

HTML code:

4. PHP Markdown

PHP Markdown Extra

5. Markdig

Markdig Github

6. Pandoc

Pandoc Manual Pandoc Markdown is a superset of GitHub flavoured Markdown and adds support for even more elements.

7. Kramdown

Kramdown

8. Showdown

Showdown

9. Taiga

Taiga

9 - Markdown with Commonmark

Markdown with Commonmark

Source: Commonmark

1.1. Heading

1.1.1. ATX Heading

Notes:

• Always put a space between # and the heading name
• Maximum to </h6> heading
• A leaf block, it cannot contain other block

Markdown syntax:

## h2 Heading
### h3 Heading
#### h4 Heading
##### h5 Heading
###### h6 Heading

HTML code:

<h2>h2 Heading</h2>
<h3>h3 Heading</h3>
<h4>h4 Heading</h4>
<h5>h5 Heading</h5>
<h6>h6 Heading</h6>

Markdown display:

h2 Heading

h3 Heading

h4 Heading

h5 Heading

h6 Heading

HTML display:

h1 Heading

h2 Heading

h3 Heading

h4 Heading

h5 Heading

h6 Heading

1.1.2. Setex Heading

Notes:

• Maximum to </h2> heading
• Underlining --- or == can be any length:
• A blank line is needed between a paragraph and a following setext heading
• A leaf block, it cannot contain other block

Markdown syntax:

h1 Heading
===================
h2 Heading
-------------------

HTML code:

<h1>h1 Heading</h1>
<h2>h2 Heading</h2>

Markdown display:

h1 Heading

h2 Heading

HTML display:

h1 Heading

h2 Heading

1.2. Paragraphs

Notes:

• To create paragraphs, use a blank line to separate one or more lines of text.
• Don’t ident paragraphs with spaces or tabs
• A leaf block, it cannot contain other block

Markdown syntax:

This is the first paragraph.

This is the second paragraph

HTML code:

<p>This is the first paragraph.</p>
<p>This is the second paragraph</p>

Markdown display:

This is the first paragraph.

This is the second paragraph

HTML display:

This is the first paragraph.

This is the second paragraph

1.3 Line Break

1.3.1 Hard Line Break

Notes:

• To create a line break, end a line of text with two or more spaces, and then type return
• Or by ended it with \
• Or by use the <br> HTML tag

Markdown syntax:

This is the first line, ended with two spaces.  
And this is the second line.

This is the first line, ended with `\`.\
And this is the second line.

This is the first line, ended with `<br>`.<br>
And this is the second line.

HTML code:

<p>This is the first line, ended with two spaces.<br />
And this is the second line.</p>
<p>This is the first line, ended with <code>\</code>.<br />
And this is the second line.</p>
<p>This is the first line, ended with <code>&lt;br&gt;</code>.<br>
And this is the second line.</p>

Markdown display:

This is the first line, ended with two spaces.
And this is the second line.

This is the first line, ended with \.
And this is the second line.

This is the first line, ended with <br>.
And this is the second line.

HTML display:

This is the first line, ended with two spaces.
And this is the second line.

This is the first line, ended with \.
And this is the second line.

This is the first line, ended with <br>.
And this is the second line.

1.3.2 Soft Line Break

Note:

• A regular line break (not in a code span or HTML tag) that is not preceded by two or more spaces or a backslash is parsed as a softbreak. (A softbreak may be rendered in HTML either as a line ending or as a space.

Markdown syntax:

This is the first line, without two spaces in the end. 
And this is the second line.

HTML code:

<p>This is the first line, without two spaces in the end.
And this is the second line.</p>

Markdown display:

This is the first line, without two spaces in the end. And this is the second line.

HTML display:

This is the first line, without two spaces in the end. And this is the second line.

1.4. Emphasis

• Between * or _ and text should be not any whitespace.
• *italics* or _italics_will make italics
• **bold** or __bold__will make bold

Markdown syntax:

**This is bold text**  
__This is bold text__  
*This is italic text*  
_This is italic text_  
We have **bold***italic*  
This text is ***really important***  
This text is ___really important___  
This text is __*really important*__  
This text is **_really important_**

HTML code:

<p><strong>This is bold text</strong><br />
<strong>This is bold text</strong><br />
<em>This is italic text</em><br />
<em>This is italic text</em><br />
We have <strong>bold</strong><em>italic</em><br />
This text is <em><strong>really important</strong></em><br />
This text is <em><strong>really important</strong></em><br />
This text is <strong><em>really important</em></strong><br />
This text is <strong><em>really important</em></strong></p>

Markdown display:

This is bold text
This is bold text
This is italic text
This is italic text
We have bolditalic
This text is really important
This text is really important
This text is really important
This text is really important

HTML display:

This is bold text
This is bold text
This is italic text
This is italic text
We have bolditalic
This text is really important
This text is really important
This text is really important
This text is really important

1.5. Blockquotes

Notes:

• A container block, it can contain other block
• You could just add only one > at the first line (lazy-continuation);
• Blockquotes can contain other blockquotes (nested)
• Blockquotes can contain other blocks: multiple paragraphs, heading, code, etc.
• Blockquotes can contain other Markdown formatted elements. But not all elements can be used.

Markdown syntax:

> Blockquotes can also be nested...
>> ...by using `>` right next to each other...
> > > ...or with spaces between arrows.

HTML code:

<blockquote>
<p>Blockquotes can also be nested...</p>
<blockquote>
<p>...by using <code>&gt;</code> right next to each other...</p>
<blockquote>
<p>...or with spaces between arrows.</p>
</blockquote>
</blockquote>
</blockquote>

Markdown display:

Blockquotes can also be nested…

…by using > right next to each other…

…or with spaces between arrows.

HTML display:

Blockquotes can also be nested...

...by using > right next to each other...

...or with spaces between arrows.

Markdown syntax:

> ### A Heading 3
>
> - List
> - of `code`.
>
>>  *Everything* is going according to **plan** in [example][ex].

[ex]: https://example.com/ "an example link"

HTML code:

<blockquote>
<h3>A Heading 3</h3>
<ul>
<li>List</li>
<li>of <code>code</code>.</li>
</ul>
<blockquote>
<p><em>Everything</em> is going according to <strong>plan</strong> in <a href="https://example.com/" title="an example link">example</a>.</p>
</blockquote>
</blockquote>

Markdown display:

A Heading 3

• List
• of code.

Everything is going according to plan in example.

HTML display:

A Heading 3

• List
• of code.

Everything is going according to plan in example.

1.6. List Items

Notes:

• Bullet (unordered) list is a list with -, +, or * character marker.
• Ordered list is a list with maximum length 9 arabic digits marker (from 0 to 9), followed by either a . character or a ) character.

1.6.1 List with Indentation

• add at least one whitespace more for indented paragraph but not listed
• add a space between line

Markdown syntax:

1. a paragraph

   indented paragraph (not listed)
2. next paragraph

* a paragraph

  indented paragraph (not listed)
* next paragraph

HTML code:

<ol>
<li>
<p>a paragraph</p>
<p>indented paragraph (not listed)</p>
</li>
<li>
<p>next paragraph</p>
</li>
</ol>
<ul>
<li>
<p>a paragraph</p>
<p>indented paragraph (not listed)</p>
</li>
<li>
<p>next paragraph</p>
</li>
</ul>

Markdown display:

1. a paragraph

   indented paragraph (not listed)

2. next paragraph

• a paragraph

  indented paragraph (not listed)

• next paragraph

HTML display:

1. a paragraph

   indented paragraph (not listed)

2. next paragraph

• a paragraph

  indented paragraph (not listed)

• next paragraph

1.6.2 List with Other Blocks

Markdown syntax:

1. List block can contain 

code block

paragraph

> quote block
2.     code
3. #### Heading4
4. >> quote

HTML code:

<ol>
<li>
<p>List block can contain</p>
<pre><code>code block
</code></pre>
<p>paragraph</p>
<blockquote>
<p>quote block</p>
</blockquote>
</li>
<li>
<pre><code>code
</code></pre>
</li>
<li>
<h4>Heading4</h4>
</li>
<li>
<blockquote>
<blockquote>
<p>quote</p>
</blockquote>
</blockquote>
</li>
</ol>

Markdown display:

1. List block can contain

   code block
   

   paragraph

   quote block

2. code
   

3. Heading4

4. quote

HTML display:

1. List block can contain

   code block
   

   paragraph

   quote block

2. code
   

3. Heading4

4. quote

1.6.3 Maximum Digit for Ordered List is 9

Notes:

• To prevent buffer overflow in some browser

Markdown syntax:

0. list  
123456789. continue  
1. list  
1234567890. buffer overflow

HTML code:

<ol start="0">
<li>list</li>
<li>continue</li>
<li>list<br />
1234567890. buffer overflow</li>
</ol>

Markdown display:

0. list
1. continue
2. list
   1234567890. buffer overflow

HTML display:

0. list
1. continue
2. list
   1234567890. buffer overflow

1.6.4 Indentitation

Notes:

• A sublist must be indented the same number of spaces a paragraph would need to be in order to be included in the list item.
• Add some space so the next mark of the next item will be positioned under the first character of previous list item.

Markdown syntax:

- foo
  - add two spaces
    - add two spaces
      - add two spaces

HTML code:

<ul>
<li>foo
<ul>
<li>add two spaces
<ul>
<li>add two spaces
<ul>
<li>add two spaces</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>

Markdown display:

• foo
  • add two spaces
    • add two spaces
      • add two spaces

HTML display:

• foo
  • add two spaces
    • add two spaces
      • add two spaces

1.7. Lists

Notes:

• A list is a sequence of one or more list items of the same type.
• The list items may be separated by any number of blank lines.
• Two list items are of the same type if they begin with a list marker of the same type.
• Two list markers are of the same type if (a) they are bullet list markers using the same character (-, +, or *) or (b) they are ordered list numbers with the same delimiter (either . or )).
• A list is an ordered list if its constituent list items begin with ordered list markers, and a bullet list if its constituent list items begin with bullet list markers.
• A list is loose if any of its constituent list items are separated by blank lines (loose list are wrapped in <p> tags), or if any of its constituent list items directly contain two block-level elements with a blank line between them. Otherwise a list is tight.

1.7.1 Paragraph and Starting New List

Notes:

• No blank line is needed to separate a paragraph from a following list
• Changing the bullet or ordered list delimiter starts a new list

Markdown syntax:

I have:
1. foo
10. bar
5) baz
11) buzz
+ ouch
+ what
- where

HTML code:

<p>I have:</p>
<ol>
<li>foo</li>
<li>bar</li>
</ol>
<ol start="5">
<li>baz</li>
<li>buzz</li>
</ol>
<ul>
<li>ouch</li>
<li>what</li>
</ul>
<ul>
<li>where</li>
</ul>

Markdown display:

I have:

1. foo
2. bar

5. baz
6. buzz

• ouch
• what

• where

HTML display:

I have:

1. foo
2. bar

5. baz
6. buzz

• ouch
• what

• where

1.7.2. Blank Lines and Blank HTML Comment

Notes:

• There can be any number of blank lines between items
• To separate consecutive lists of the same type, or to separate a list from an indented code block, insert a blank HTML comment

Markdown syntax:

-   foo

    notcode

-   foo

<!-- -->

    code

HTML code:

<ul>
<li>
<p>foo</p>
<p>notcode</p>
</li>
<li>
<p>foo</p>
</li>
</ul>
<!-- -->
<pre><code>code
</code></pre>

Markdown display:

• foo

  notcode

• foo

code

HTML display:

• foo

  notcode

• foo

code

1.7.3. Bullet (Unordered) Lists

Markdown syntax:

+ To start a list, there should be an empty line above
+ Create a list by starting a line with `+`, `-`, or `*`
- Changing the sign will add a linespace (make new list)
+ Add text under an item  
This is a text under an item. Notice that there are two spaces at the end above.
- Sub-lists are made by indenting 2 spaces (to ensure the next mark is fallen under the first character of previous list item):
  * Item 2a
  * Item 2b
* Item 3

To end a list, there should be one empty line above.

Markdown display:

• To start a list, there should be an empty line above
• Create a list by starting a line with +, -, or *

• Changing the sign will add a linespace (make new list)

• Add text under an item
  This is a text under an item. Notice that there are two spaces at the end above.

• Sub-lists are made by indenting 2 spaces (to ensure the next mark is fallen under the first character of previous list item):
  • Item 2a
  • Item 2b

• Item 3

To end a list, there should be one empty line above.

1.7.4. Ordered Lists

Notes:

• The start number of an ordered list is determined by the list number of its initial list item. The numbers of subsequent list items are disregarded.

Markdown syntax:

1. Notice that the sequence number is irrelevant.
1. Notice that there are two spaces at the end.  
To make a new text under item.
3. Sub-lists are made by indenting 4 spaces (to ensure the next mark is fallen under the first character of previous list item)
   1. Item 3a
   2. Item 3b
8. Any number for item 4

Markdown display:

1. Notice that the sequence number is irrelevant.
2. Notice that there are two spaces at the end.
   To make a new text under item.
3. Sub-lists are made by indenting 4 spaces (to ensure the next mark is fallen under the first character of previous list item)
   1. Item 3a
   2. Item 3b
4. Any number for item 4

1.7.5. Ordered List Continuation

Markdown syntax:

57. will started with offset 57
1. so it will be 58

HTML code:

<ol start="57">
<li>will started with offset 57</li>
<li>so it will be 58</li>
</ol>

Markdown display:

57. will started with offset 57
58. so it will be 58

HTML display:

57. will started with offset 57
58. so it will be 58

1.7.6. Elements in Lists

Notes:

• To add another element in a list while preserving the continuity of the list, indent the element four spaces or one tab

Markdown syntax:

* This is the first list item.
  > A blockquote would look great below the second list item.
* Here's the second list item.
  I need to add another paragraph below the second list item.
* And here's the third list item.
  ![Tux, the Linux mascot](https://upload.wikimedia.org/wikipedia/commons/thumb/a/af/Tux.png/220px-Tux.png)
* and the last list item

Markdown display:

• This is the first list item.

  A blockquote would look great below the second list item.

• Here’s the second list item. I need to add another paragraph below the second list item.
• And here’s the third list item.
• and the last list item

But, for text element in ordered list, add five spaces

1. This is the first list item.

   A blockquote would look great below the second list item.

2. Here’s the second list item. I need to add another paragraph below the second list item.
3. And here’s the third list item.
4. and the last list item

But, for code blocks in the lists, add eight spaces or two tabs.

1. Open the file.

2. Find the following code block on line 21:

   <html>
     <head>
       <title>Test</title>
     </head>
   

3. Update the title to match the name of your website.

1.8. Code and Code Blocks

1.8.1. Inline Code (Code Spans)

Notes:

• It is inline content
• It is written between two backticks \'

Markdown syntax:

This is a `code`.

HTML code:

<p>This is a <code>code</code>.</p>

Markdown display:

This is a code.

HTML display:

This is a code.

1.8.2. Indented Code Blocks

Notes:

• Idented by add at least four spaces or one tab before
• A leaf block, it cannot contain other block

Markdown syntax:

    <html>
      <head>
        <title>Test</title>
      </head>

HTML code:

<pre><code>&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Test&lt;/title&gt;
  &lt;/head&gt;</code></pre>

Markdown display:

<html>
  <head>
    <title>Test</title>
  </head>

HTML display:

<html>
  <head>
    <title>Test</title>
  </head>

1.8.3. Fenced Code Blocks

Notes:

• A code fence is a sequence of at least three consecutive backtick characters (`) or tildes (~)
• An info string can be provided after the opening code fence lang is optional to help to specify the language of the code.
• A leaf block, it cannot contain other block

Markdown syntax:

~~~
This is a fenced code block.
~~~

```
This is also a fenced code block.
```

HTML code:

<pre><code>This is a fenced code block.
</code></pre>

<pre><code>This is also a fenced code block.
</code></pre>

Markdown display:

This is a fenced code block.

This is also a fenced code block.

HTML display:

This is a fenced code block.

This is also a fenced code block.

1.9. Links

1.9.1. Inline Links

Notes:

• A link contains link text (the visible text), a link destination (the URI that is the link destination), and optionally a link title.

Markdown syntax:

This is [link](https://example.com/)

This is [*link with title and `code`*](https://example.com/ "title text!")

This is [https://example.com/]()

HTML code:

<p>This is <a href="https://example.com/">link</a></p>
<p>This is <a href="https://example.com/" title="title text!"><em>link with title and <code>code</code></em></a></p>
<p>This is <a href="">https://example.com/</a></p>

Markdown display:

This is link

This is link with title and code

This is https://example.com/

HTML display:

This is link

This is link with title and code

This is https://example.com/

1.9.2. Full Reference Links

Notes:

• A full reference link consists of a link text immediately followed by a link label that matches a link reference definition elsewhere in the document

Markdown syntax:

This is a [foo][ex]

[ex]: https://example.com/ "an example link"

HTML code:

<p>This is a <a href="https://example.com/" title="an example link">foo</a></p>

Markdown display:

This is a foo

HTML display:

This is a foo

1.9.3. Shortcut Reference Links

Notes:

• A shortcut reference link consists of a link label that matches a link reference definition elsewhere in the document and is not followed by [] or a link label.

Markdown syntax:

This is a [foo]

[foo]: https://example.com/ "an example link"

HTML code:

<p>This is a <a href="https://example.com/" title="an example link">foo</a></p>

Markdown display:

This is a foo

HTML display:

This is a foo

1.9.4. Autolinks

• Autolinks are absolute URIs and email addresses inside < and >. They are parsed as links, with the URL or email address as the link label.
• Spaces are not allowed in autolink change it to %20

Markdown syntax:

<https://example.com/>

HTML code:

<p><a href="https://example.com/">https://example.com/</a></p>

Markdown display:

https://example.com/

HTML display:

https://example.com/

1.10. Images

Notes:

• Syntax for images is like the syntax for links, with one difference. Instead of link text, we have an image description.
• The rules for this are the same as for link text, except that (a) an image description starts with ![ rather than [, and (b) an image description may contain links.
• It is not recommended to use image links in reference format. Some apps will not preview those images.

1.10.1 Inline Links Format

![Wikipedia](https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Wikipedia_Logo_1.0.png/240px-Wikipedia_Logo_1.0.png "Wikipedia Logo")

![](https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Wikipedia_Logo_1.0.png/240px-Wikipedia_Logo_1.0.png)

<p><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Wikipedia_Logo_1.0.png/240px-Wikipedia_Logo_1.0.png" alt="Wikipedia" title="Wikipedia Logo"></p>
<p><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Wikipedia_Logo_1.0.png/240px-Wikipedia_Logo_1.0.png" alt=""></p>

1.10.2 Full References Format

This is a ![Wikipedia][ex]

[ex]: https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Wikipedia_Logo_1.0.png/240px-Wikipedia_Logo_1.0.png "Wikipedia Logo"

<p>This is a <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Wikipedia_Logo_1.0.png/240px-Wikipedia_Logo_1.0.png" alt="Wikipedia" title="Wikipedia Logo" /></p>

1.10.3 Shorcut References Format

This is a ![foo]

[foo]: https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Wikipedia_Logo_1.0.png/240px-Wikipedia_Logo_1.0.png "Wikipedia Logo"

<p>This is a <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Wikipedia_Logo_1.0.png/240px-Wikipedia_Logo_1.0.png" alt="foo" title="Wikipedia Logo" /></p>

1.11. Escaping Characters

Note:

• add a backslash \ in front of the ASCII character.
• Any ASCII punctuation character may be backslash-escaped

Markdown syntax:

\!\"\#\$\%\&\'\(\)\*\+\,  
\-\.\/\:\;\<\=\>\?\@\[\\\]  
\^\_\`\{\|\}\~

\*not emphasized*  
\<br/> not a tag  
\[not a link](/foo)  
\`not code`  
1\. not a list  
\* not a list  
\# not a heading  
\[foo]: /url "not a reference"  
\&ouml; not a character entity  

HTML code:

<p>!&quot;#$%&amp;'()*+,<br />
-./:;&lt;=&gt;?@[\]<br />
^_`{|}~</p>
<p>*not emphasized*<br />
&lt;br/&gt; not a tag<br />
[not a link](/foo)<br />
`not code`<br />
1. not a list<br />
* not a list<br />
# not a heading<br />
[foo]: /url &quot;not a reference&quot;<br />
&amp;ouml; not a character entity</p>

Markdown display:

!"#$%&'()*+,
-./:;<=>?@[\]
^_`{|}~

*not emphasized*
<br/> not a tag
[not a link](/foo)
`not code`
1. not a list
* not a list
# not a heading
[foo]: /url “not a reference”
&ouml; not a character entity

HTML display:

!"#$%&'()*+,
-./:;<=>?@[\]
^_`{|}~

*not emphasized*
<br/> not a tag
[not a link](/foo)
`not code`
1. not a list
* not a list
# not a heading
[foo]: /url "not a reference"
&ouml; not a character entity

1.12. Raw HTML and HTML Blocks

1.12.1. Raw HTML

Notes:

• Text between < and > that looks like an HTML tag is parsed as a raw HTML tag and will be rendered in HTML without escaping.

Markdown syntax:

<strong style="color:red;">bold red</strong>
<!-- This is a comment, will not shown -->

HTML code:

<p><strong style="color:red;">bold red</strong></p>
<!-- This is a comment, will not shown -->

Markdown display:

bold red

HTML display:

bold red

1.12.2. HTML Blocks

Notes:

• An HTML block is a group of lines that is treated as raw HTML
• With start and end conditions are:
  • start with <script, <pre, or <style and end with </script>, </pre>, or </style>
  • start with <!-- and end with -->
  • start with <? and end with ?>
  • start with <! with uppercase ASCII letter inside and end with >
  • start wtih <![CDATA[ and end with ]]>
  • start with string < or </ followed by specific strings and end with >, or the string />
• A leaf block, it cannot contain other block

Markdown syntax:

<table><tr><td>
<pre>

**Hello**,
_world_.

</pre>
</td></tr></table>

HTML code:

<table><tr><td>
<pre>
<p><strong>Hello</strong>,<br />
<em>world</em>.</p>
</pre>
</td></tr></table>

Markdown display:

Hello,
world.

HTML display:

Hello,

world.

1.13. Entities and Character

Note:

• Valid HTML entity references and numeric character references can be used in place of the corresponding Unicode character, except
• Entity references consist of & + any of the valid HTML5 entity names + ;
• Decimal numeric character references consist of &# + a string of 1–7 arabic digits + ;
• Hexadecimal numeric character references consist of &# + either X or x + a string of 1-6 hexadecimal digits + ;

Markdown syntax:

Entity:   & © Æ Ď ¾ ℋ ⅆ ∲ ≧̸

Decimal: # Ӓ Ϡ �

Hexadecimal: " ആ ಫ

HTML code:

<p>Entity:   &amp; © Æ Ď ¾ ℋ ⅆ
∲ ≧̸</p>
<p>Decimal: # Ӓ Ϡ �</p>
<p>Hexadecimal: &quot; ആ ಫ</p>

Markdown display:

Entity:   & © Æ Ď ¾ ℋ ⅆ ∲ ≧̸

Decimal: # Ӓ Ϡ �

Hexadecimal: " ആ ಫ

HTML display:

Entity: & © Æ Ď ¾ ℋ ⅆ ∲ ≧̸

Decimal: # Ӓ Ϡ �

Hexadecimal: " ആ ಫ

1.14. Horizontal Rules (Thematic Break)

Notes:

• Sequence of three or more -, _, or * characters
• A leaf block, it cannot contain other block

Markdown syntax:

---
___
****

HTML code:

<hr />
<hr />
<hr />

Markdown display:

HTML display:

10 - Style Guide for Markdown Writing

Style Guide for Markdown Writing

About

The [source code is available on GitHub]({{ site.cirosantilli-github }}).

Considers original specification, CommonMark and other extensions.

This project is community driven, and tries to reach consensus. Maintainers will only step in if the community cannot reach a decision. Discussion will take place [on the issue tracker]({{ site.cirosantilli-github }}/issues).

A Chinese translation can be found at: https://einverne.github.io/markdown-style-guide/zh.html

Notable users

• GitLab
• Vim Markdown

Are you notable? Send a pull request.

If you are a notable user:

• you can opt to be contacted before any major changes happen to the standard. Please inform this on the pull request that adds you to the notable list.

• your vote on decisions will have much greater weight

You are more likely to be notable if your project:

• uses Markdown heavily. E.g.: Markdown engines, text editors, lots of markdown documentation, etc.

• is popular. Any popularity measure will be taken into account, e.g. GitHub stars, Google Rank, etc. 2K+ GitHub stars makes for a very strong case.

Options system

Disputed points will be given multiple alternative style options.

Each feature and option will receive a lowercase hyphen separated identifier.

Each option will have a header of form:

# Option key:value

The first option header that appears in this text is the default value.

E.g., if line wrapping had 3 alternatives, we could give it the key wrap, and for each alternative create a header:

# Option wrap:space
# Option wrap:no
# Option wrap:sentence

When referring to this guide, specify all non-default options in a comma separated fashion:

Use the Markdown Style Guide wrap:space, code:indented

Design goals

• readable

• portable: produces the same output, or good output, across multiple implementations.

  Portability tests are carried out with the Markdown Test Suite.

• easy to write and modify later

• diff friendly

• easy to remember and implement on editors

• provide rationale behind difficult choices.

Readability vs writability

Many design choices come down to:

• do you want to write fast
• or do you want people to read fast

There may be use cases in which either is preferred:

• for source code, readability becomes more important, as programmers are going to open the files on their editors often.

  Editor features like syntax highlighting and line wrapping can greatly reduce problems, but it is of course better if people don’t need to change their editors at all.

• for forums like Stack Overflow, people will very rarely read the source, only the rendered output. So it might be better to optimize writing speed.

The current style is inconsistent with either of those optimizations. For now, we propose two sets of options (profiles) which optimize either one: readability and writability profiles.

Readability profile

• wrap:space
• list-marker:asterisk
• code:indented

Writability profile

• wrap:no
• list-marker:hyphen
• code:fenced

Typographic conventions

When this style guide needs to represent multiple adjacent spaces, or spaces at the beginning or ending of code blocks, this will be mentioned explicitly in prose, and a dot will be used to make the space visible.

E.g.:

a, space, b:

a b

a, 2 spaces, b:

a..b

space, ab:

.ab

ab, space:

ab.

Alternatives

google/styleguide by Google.

carwin/markdown-styleguide. This guide was originally forked from it. It has been extended considerably, some decisions were modified, and no original lines remain.

https://tirania.org/blog/archive/2014/Sep-30.html by Miguel de Icaza (GNOME, Mono). Short.

https://github.com/slang800/markdown-styleguide

Lint tools

Asked on Stack Exchange: https://softwarerecs.stackexchange.com/questions/7138/markdown-lint-tool/

• https://github.com/wooorm/mdast-lint
• https://github.com/mivok/markdownlint
• https://github.com/slang800/tidy-markdown
• https://github.com/DavidAnson/markdownlint. Documentation has some links back to this style: https://github.com/DavidAnson/markdownlint/blob/v0.14.2/doc/Rules.md

General rules

File

File extension

Use .md.

Rationale: why not .mkd or .markdown?

• shorter
• more popular
• does not have important conflicts

File name

Prefer to base the file name on the top-header level:

• replace upper case letters with lower case
• strip articles the, a, an from the start
• replace punctuation and white space characters by hyphens
• replace consecutive hyphens by a single hyphen
• strip surrounding hyphens

Good:

file-name.md

Bad, multiple consecutive hyphens:

file--name.md

Bad, surrounding hyphens:

-file-name-.md

Rationale: why not underscore or camel case? Hyphens are the most popular URL separator today, and markdown files are most often used in contexts where:

• there are hyphen separated HTML files in the same project, possibly the same directory as the markdown files.
• filenames will be used directly on URLs. E.g.: GitHub blobs.

Whitespaces

Newlines

Don’t use 2 or more consecutive empty lines, that is, more than two consecutive newline characters, except where they must appear literally such as in code blocks.

End files with a newline character, and don’t leave empty lines at the end of the file.

Don’t use trailing whitespace unless it has a function such as indicating a line break.

Good:

- list
- list

# Header

Good, code block:

The markup language X requires you to use triple newlines to separate paragraphs:

    p1


    p2

Bad:

- list
- list


# Header

Rationale: multiple empty lines occupy more vertical screen space, and do not significantly improve readability.

Spaces after sentences

Option space-sentence:1

Use a single space after sentences.

Bad, 2 spaces:

First sentence.  Second sentence.

Good:

First sentence. Second sentence.

Rationale: advantages over space-sentence:2:

• easier to edit

• usually not necessary if you use wrap:inner-sentence or wrap:sentence

• space-sentence:2 gives a false sense of readability as it is ignored on the HTML output

• more popular

Advantages of space-sentence:2:

• easier to see where sentences end

Option space-sentence:2

Bad, single space:

First sentence. Second sentence.

Good:

First sentence.  Second sentence.

Line wrapping

Option wrap:inner-sentence

Try to keep lines under 80 characters by breaking large paragraphs logically at points such as:

• sentences: after a period ., question ? or exclamation mark !

• clauses: after words like and, which, if ... then, commas ,

• large phrases

It is acceptable to have a line longer than 80 characters, but keep in mind that long sentences are less readable and look worse in tools such as git diff.

Set your editor to wrap lines visually for Markdown in case a large line is present.

Good:

This is a very very very very very very very very very very very very very long not wrapped sentence.
Second sentence of of the paragraph,
third sentence of a paragraph
and the fourth one.

Rationale:

• Diffs look better, since a change to a clause shows up as a single diff line.

• Occasional visual wrapping does not significantly reduce the readability of Markdown, since the only language feature that can be indented to indicate hierarchy are nested lists.

• At some point GitHub translated single newlines to line breaks in READMEs, and still does so on comments. Currently there is no major engine which does it, so it is safe to use newlines.

• Some tools are not well adapted for long lines, e.g. Vim and git diff will not wrap lines by default. This can be configured however via git config --global core.pager 'less -r' for Git and set wrap for Vim.

Downsides:

• requires considerable writer effort, specially when modifying code.

• Markdown does not look like the rendered output, in which there are no line breaks.

  Manual line breaking can make the Markdown more readable than the rendered output, which is bad because it gives a false sense of readability encouraging less readable long paragraphs.

• Requires users of programming text editors like Vim, which are usually configured to not wrap, to toggle visual wrapping on. This can be automated, but EditorConfig gave it WONTFIX

• Breaks some email systems, which always break a line on a single newline, and
  make your email
  look
  something like this.

Option wrap:no

Don’t wrap lines.

Rationale: very easy to edit. But diffs on huge lines are hard to read.

Option wrap:space

Always wrap at the end of the first word that exceeds 80 characters.

Rationale: source code becomes is very readable and text editors support it automatically. But diffs will look bad, and changing lines will be hard.

Option wrap:sentence

Rationale: similar advantages as wrap:inner-sentence, but easier for people to follow since the rule is simple: break after the period. But may produce long lines with hard to read diffs.

Notable occurrence: ProGit 2.

Code

Dollar signs in shell code

Don’t prefix shell code with dollar signs $ unless you will be showing the command output on the same code block.

If the goal is to clarify what the language is, do it on the preceding paragraph.

Rationale: harder to copy paste, noisier to read.

Good:

echo a
echo a > file

Bad:

$ echo a
$ echo a > file

Good, shows output:

$ echo a
a
$ echo a > file

Good, language specified on preceding paragraph:

Use the following Bash code:

echo a
echo a > file

What to mark as code

Use code blocks or inline code for:

• executables. E.g.:

  `gcc` is the best compiler available.
  

  Differentiate between tool and the name of related projects. E.g.: gcc vs GCC.

• file paths

• version numbers

• capitalized explanation of abbreviations:

  xinetd stands for `eXtended Internet daemon`
  

• other terms related to computers that you don’t want to add to your dictionary

Don’t mark as code:

• names of projects. E.g.: GCC
• names of libraries. E.g.: libc, glibc

Spelling and grammar

Use correct spelling and grammar.

Prefer writing in English, and in particular American English. Rationale: American English speakers have the largest GDP, specially in the computing industry.

Use markup like URL or code on words which you do not want to add to your dictionary so that spell checkers can ignore them automatically.

Beware of case sensitive spelling errors, in particular for project, brand names or abbreviations:

• Good: URL, LinkedIn, DoS attack
• Bad: url, Linkedin, dos attack

When in doubt, prefer the same abbreviation as used on Wikipedia.

Avoid informal contractions:

• Good: biography, repository, directory
• Bad: bio, repo, dir

Block elements

Line breaks

Avoid line breaks, as they don’t have generally accepted semantic meaning.

In the rare case you absolutely need them, end a lines with exactly two spaces.

Headers

Option header:atx

Bad:

Header 1
========

Header 2
--------

### Header 3

Good:

# Header 1

## Header 2

### Header 3

• Rationale: advantages over Setex:

  • easier to write because in Setex you have to match the number of characters in both lines for it to look good

  • works for all levels, while Setex only goes up to level 2

  • occupy only one screen line, while Setex occupies 2

  Advantages of Setex

  • more visible. Not very important if you have syntax highlighting.

• Include a single space between the # and the text of the header.

  Bad:

  #Header
  
  #..Header
  

  Good:

  # Header
  

• Don’t use the closing # character.

  Bad:

  # Header #
  

  Good:

  # Header
  

  Rationale: easier to maintain.

• Don’t add spaces before the number sign #.

  Bad:

  .# Header
  

  Good:

  # Header
  

Option header:setex

Bad:

# Header 1

## Header 2

### Header 3

Good:

Header 1
========

Header 2
--------

### Header 3

• Don’t skip header levels.

  Bad:

  # Header 1
  
  ### Header 3
  

  Good:

  # Header 1
  
  ## Header 2
  

• Surround headers by a single empty line except at the beginning of the file.

  Bad:

  Before.
  # Header 1
  
  ## Header 2
  After.
  

  Good:

  Before.
  
  # Header 1
  
  ## Header 2
  
  After.
  

  Bad:

  Before.
  Header 1
  ========
  
  ## Header 2
  -----------
  After.
  

  Good:

  Before.
  
  Header 1
  ========
  
  ## Header 2
  -----------
  
  After.
  

• Avoid using two headers with the same content in the same markdown file.

  Rationale: many markdown engines generate IDs for headers based on the header content.

  Bad:

  # Dogs
  
  ## Anatomy
  
  # Cats
  
  ## Anatomy
  

  Good:

  # Dogs
  
  ## Anatomy of the dog
  
  # Cats
  
  ## Anatomy of the cat
  

Top-level header

If you target HTML output, write your documents so that it will have one and only one h1 element as the first thing in it that serves as the title of the document. This is the HTML top-level header.

How this h1 is produced may vary depending on your exact technology stack: some stacks may generate it from metadata, for example Jekyll through the front-matter.

Storing the top-level header as metadata has the advantage that it can be reused elsewhere more easily, e.g. on a global index, but the downside of lower portability.

If your target stack does not generate the top-level header in another way, include it in your markdown file. E.g., GitHub.

Top-level headers on index-like files such as README.md or index.md should serve as a title for their parent directory.

Downsides of top-level headers:

• take up one header level. This means that there are only 5 header levels left, and each new header will have one extra #, which looks worse and is harder to write.

• duplicate filename information, which most often can already be seen on a URL. In most cases, the filename can be trivially converted to a top-level, e.g.: some-filename.md to Some filename.

Advantages of top-level headers:

• more readable than URL’s, especially for non-technically inclined users.

Header case

• Use an upper case letter as the first letter of a header, unless it is a word that always starts with lowercase letters, e.g. computer code.

  Good:

  # Header
  

  Good, computer code that always starts with lower case:

  # int main
  

  Bad:

  # header
  

• The other letters have the same case they would have in the middle of a sentence.

  Good:

  # The header of the example
  

  Bad:

  # The Header of the Example
  

  As an exception, title case may be optionally used for the top-level header. Use this exception sparingly, in cases where typographical perfection is important, e.g.: README of a project.

  Rationale: why not Title case for all headers? It requires too much effort to decide if edge-case words should be upper case or not.

End of a header

Indicate the end of a header’s content that is not followed by a new header by an horizontal rule:

# Header

Content

---

Outside header.

Header length

Keep headers as short as possible.

Instead of using a huge sentence, make the header a summary to the huge sentence, and write the huge sentence as the first paragraph beneath the header.

Rationale: if automatic IDs are generated by the implementation, it is:

• easier to refer to the header later while editing
• less likely that the IDs will break due to rephrasing
• easier to distinguish between different IDs

Good:

# Huge header

Huge header that talks about a complex subject.

Bad:

# Huge header that talks about a complex subject

Punctuation at the end of headers

Don’t add a trailing colon : to headers.

Rationale: every header is an introduction to what is about to come next, which is exactly the function of the colon.

Don’t add a trailing period . to headers.

Rationale: every header consists of a single short sentence, so there is not need to add a sentence separator to it.

Good:

# How to do make omelet

Bad:

# How to do make omelet:

Bad:

# How to do make omelet.

Header synonyms

Headers serve as an index for users searching for keywords.

For this reason, you may want to give multiple keyword possibilities for a given header.

To do so, simply create a synonym header with empty content just before its main header.

E.g.:

# Purchase

# Buy

You give money and get something in return.

Every empty header with the same level as the following one is assumed to be a synonym. This is not the case if levels are different:

# Animals

## Dog

Blockquotes

• Follow the greater than marker > by one space.

  Good:

  > a
  

  Bad:

  >a
  

  Bad, 2 spaces:

  >  a
  

• Use a greater than sign for every line, including wrapped.

  Bad:

  > Long line
  that was wrapped.
  

  Good:

  > Long line
  > that was wrapped.
  

• Don’t use empty lines inside a single block quote.

  Good:

  > a
  >
  > b
  

  Bad:

  > a
  
  > b
  

Lists

Marker

Unordered

Option list-marker:hyphen

Use the hyphen marker.

Good:

- a
- b

Bad:

* a
* b

+ a
+ b

Rationale:

• asterisk * can be confused with bold or italic markers.
• plus sign + is not popular

Downsides:

• * and + are more visible. * is more visible

Option list-marker:asterisk

Use *.

Option list-marker:plus

Use +.

Ordered

Prefer lists only with the marker 1. for ordered lists, unless you intend to refer to items by their number in the same markdown file or externally.

Prefer unordered lists unless you intent to refer to items by their number.

Best, we will never refer to the items of this list by their number:

- a
- c
- b

Better, only 1.:

1. a
1. c
1. b

Worse, we will never refer to the items of this list by their number:

1. a
2. c
3. b

Acceptable, refer to them in the text:

The ouput of the `ls` command is of the form:

    drwx------  2 ciro ciro        4096 Jul  5  2013 dir0
    drwx------  4 ciro ciro        4096 Apr 27 08:00 dir1
    1           2

Where:

1. permissions
2. number of files directory contains

Acceptable, meant to be referred by number from outside of the markdown file:

Terms of use.

1. I will not do anything illegal.
2. I will not do anything that can harm the website.

Rationale:

• If you want to change a list item in the middle of the list, you don’t have to modify all items that follow it.

  Diffs will show only the significant line which was modified.

• Content stays aligned without extra effort if the numbers reach 2 digits. E.g.: the following is not aligned:

  9. a
  10. b
  

• References break when a new list item is added. To reduce this problem:

  • keep references close to the list so authors are less likely to forget to update them
  • when referring from an external document, always refer to an specific version of the markdown file

Spaces before list marker

Do not add any space before list markers, except to obey the current level of indentation.

Bad:

  - a
  - b

Good:

- a
- b

Good, c is just following the indentation of b:

-   a
-   b
    - c

Bad, c modified the indentation of b:

-   a
-   b
      - c

Rationale:

• easier to type
• easier to reason about levels

Spaces after list marker

Option list-space:mixed

• If the content of every item of the list is fits in a single paragraph, use 1 space.

• Otherwise, for every item of the list:

  • use 3 spaces for unordered lists.

  • use 2 spaces for ordered lists. One less than for unordered because the marker is 2 chars long.

Bad, every item is one line long:

-   a
-   b

Good:

- a
- b

Bad, every item is one line long:

1.  a
1.  b

Good:

1. a
1. b

Bad: item is longer than one line:

- item that
  is wrapped

- item 2

Good:

-   item that
    is wrapped

-   item 2

Bad: item is longer than one line:

- a

  par

- b

Good:

-   a

    par

-   b

Option list-space:1

Always add one space to the list marker.

Bad, 3 spaces:

-   a

    b

-   c

Good:

- a

  b

- c

Bad, 2 spaces:

1.  a

    b

1.  c

Good:

1. a

   b

1. c

Rationale: list-space mixed vs 1

The advantages of list-space:1 are that

• it removes the decision of how many spaces you should put after the list marker: it is always one.

  We could choose to always have list content indented as:

  -   a
  -   b
  

  but that is ugly.

• You never need to change the indentation of the entire list because of a new item.

  This may happen in list-space:mixed if you have:

  - a
  - b
  

  and will add a multi-line item:

  -   a
  
  -   b
  
  -   c
  
      d
  

  Note how a and b were changed because of c.

The disadvantages of list-space:1

• creates three indentation levels for the language:

  • 4 for indented code blocks
  • 3 for ordered lists
  • 2 for unordered lists

  That means that you cannot easily configure your editor indent level to deal with all cases when you want to change the indentation level of multiple list item lines.

• Is not implemented consistently across editors.

  In particular what should happen at:

  - a
  
          code
  

  This (2 spaces):

  <pre><code>  code
  

  Or no spaces:

  <pre><code>code
  

  Likely the original markdown said no spaces:

  To put a code block within a list item, the code block needs to be indented twice — 8 spaces or two tabs

  But many implementations did otherwise.

  CommonMark adds the 2 spaces.

Indentation of content inside lists

The indentation level of what comes inside list and of further list items must be the same as the first list item.

Bad:

-   item that
  is wrapped

-   item 2

Good:

-   item that
    is wrapped

-   item 2

Bad:

-   item 1

  Content 1

-   item 2

      Content 2

Good (if it matches your spaces after list marker style):

-   item 1

    Content 1

-   item 2

    Content 2

Bad:

- item 1

    Content 1

- item 2

    Content 2

Good (if it matches your spaces after list marker style):

- item 1

  Content 1

- item 2

  Content 2

Avoid starting a list item directly with indented code blocks because that is not consistently implemented. CommonMark states that a single space is assumed in that case:

-     code

  a

Empty lines inside lists

If every item of a list is a single line long, don’t add empty lines between items. Otherwise, add empty lines between every item.

Bad, single lines:

- item 1

- item 2

- item 3

Good:

- item 1
- item 2
- item 3

Bad, multiple lines:

-   item that
    is wrapped
-   item 2
-   item 3

Good:

-   item that
    is wrapped

-   item 2

-   item 3