自分用メモ

```html:本体
<!doctype html><style>#main_body .head{height:4rem;font-family:メイリオ;-ms-user-select:none;cursor:default}#main_body #html_body *{font-family:メイリオ}#main_body #mark_body *{font-family:ＭＳ\ ゴシック;font-size:.8rem}body,html{height:100%;overflow-y:hidden;overflow-x:hidden}body,html,ul#main_body{width:100%;padding:0;margin:0}ul#main_body{list-style:none}span.button{display:inline-block;border:solid 2px;border-radius:.5rem;cursor:pointer;-ms-user-select:none}span.button:hover{position:relative;top:-1px;left:-1px;box-shadow:1.5px 2px 3px 0 #666}span.button.type_blue{background-color:#f4f9ff;border-color:blue;color:blue}span.button.type_red{background-color:#fff4f4;border-color:red;color:red}span.button.type_yellow{background-color:#fffff4;border-color:#c1ab05;color:#d9a62e}span#html_editable,span#md_reload{height:1.4rem;width:3rem}span#markdown_editable{color:red}#main_body .head.col1{text-align:center;background-color:#faebd7}#main_body .head.col2{text-align:center;color:#fff;background-color:#494949}ul#main_body li.col1{float:left}ul#main_body li.child_body{display:inline-block;width:50%;padding:0;margin:0}ul#main_body li.child_body.data{height:100%}ul#main_body li.child_body.data.col1{background-color:#fffaf0;overflow:scroll}ul#main_body li.child_body.data.col2{background-color:#000}textarea#markdown{height:100%;width:100%;padding:0 0 0 5px;margin:0;color:#d3d3d3;background-color:transparent;border:0;overflow:scroll}li#html_body h1{padding:0;margin:0;background-color:#9acd32;border-bottom:dashed 3px}li#html_body ol,li#html_body ul{padding:0;margin:0 0 0 2rem}li#html_body ul{list-style:inside}li#html_body ol li,li#html_body ul li{white-space:nowrap;padding:0;margin:0}li#html_body ul li.li_head{list-style:square}li#html_body{border-collapse:collapse}li#html_body td,li#html_body th{padding:0;margin:0;white-space:nowrap;border-bottom:solid 1px;border-right:dotted 2px}li#html_body td{background-color:#fff}li#html_body th{background-color:#87ceeb}li#html_body pre{background-color:snow}li#html_body .under_bar{text-decoration:underline;font-size:1.2rem}a#getLocal{display:inline;visibility:hidden}iframe#selfile{display:none;visibility:hidden}div#md_select_area p span.button{text-align:center;width:1rem;height:1rem;padding:0;margin:0 .2rem 0 0}div#md_select_area p{padding:0 0 0 .5rem;margin:.5rem 0}div#md_select_area{width:50%;position:absolute;top:25%;left:25%;color:#fff;background-color:#4169e1}div.md_select_area_unvisible{display:inline;visibility:hidden}select#md_select{width:100%}</style><script>function make(a,c){var b=document.createElement(a);if(!!c){c.appendChild(b)}return b}function id(a,b){if(!!b||b===""){document.getElementById(a).value=b}else{return document.getElementById(a)}}function addEvent(c,b,a){c.addEventListener(b,a)}function addClass(b,a){b.classList.add(a)}function rmClass(b,a){b.classList.remove(a)}function forEach(b,c){for(var a=0;a<b.length;a++){c(b[a])}}function contain(a,b){return a.indexOf(b)>-1}function rmChildren(a){while(a.firstChild){a.removeChild(a.firstChild)}}function rmMe(a){a.parentNode.removeChild(a)}function iframeDoc(a){return a.contentWindow.document}function attr(c,a,b){if(!!b||""+b==="false"){c.setAttribute(a,b)}else{return c.getAttribute(a)}}function rmAttr(b,a){b.removeAttribute(a)}function innerHTML(a){return a.innerHTML.replace(/<br>/g,"\n")}function createSpanB(e,d){var c=make("span",d);if(e.length>0){var a=make("b",c);a.innerHTML=e;addClass(a,"under_bar")}return c}var header_mark=["h1."];var list_mark=["ul.","li.","li+","br.","ol."];var table_mark=["tb.","tr.","th.","td."];function tarnMarkdownToHtml(){var c=make("div",id("html_body"));var d=id("markdown").innerHTML.split("\n");var a=0;var e=!0;var l,p,f,m;for(var g=0,h=1;g<d.length;g++,h++){var j=d[g];var n=j.substring(0,3);switch(n){case header_mark[0]:make("h1",c).innerHTML=j.substring(3);break;case list_mark[0]:case list_mark[4]:if(!l||l===""){var o=createSpanB(j.substring(3),c);l=make(n.substring(0,2),o)}else{l="";p=""}break;case list_mark[1]:if(!!l&&l!==""){p=make("li",l);addClass(p,"li_head");make("b",p).innerHTML=j.substring(3)}break;case list_mark[2]:if(!!l&&l!==""){p=make("li",l);p.innerHTML=j.substring(3)}break;case list_mark[3]:if(!!p&&p!==""){p.innerHTML+="<br>"+j.substring(3)}break;case table_mark[0]:if(!f||f===""){var o=createSpanB(j.substring(3),c);f=make("table",o)}else{f="";m=""}break;case table_mark[1]:if(!!f&&f!==""){m=make("tr",f);j=j.substring(3)}case table_mark[2]:case table_mark[3]:if(!!m&&m!==""){forEach(j.split(";"),function(r){var i=r.substring(0,3);if(i===table_mark[2]){make("th",m).innerHTML=r.substring(3)}else{if(i===table_mark[3]){make("td",m).innerHTML=r.substring(3)}}})}break}var q=contain(header_mark,n)||contain(list_mark,n)||contain(table_mark,n);if(q){a=g+1}var k=(h==d.length)?"":d[h].substring(0,3);var b=contain(header_mark,k)||contain(list_mark,k)||contain(table_mark,k);if((h==d.length)||(!q&&b)){make("pre",c).innerHTML=d.slice(a,h).join("\n")}}return c}function reloadHtml(){rmChildren(id("html_body"));tarnMarkdownToHtml()}function tranHtmlToMarkdown(){var l=id("html_body").childNodes[0].childNodes;var w="";for(var r=0;r<l.length;r++){var n=l[r];switch(n.nodeName){case"H1":w+=header_mark[0]+n.innerHTML+"\n";break;case"SPAN":var d=n.childNodes;var f=d[d.length-1];var u="";if(d.length==2){u=innerHTML(d[0])}var e,h="",t;switch(f.nodeName){case"UL":case"OL":e=f.nodeName.toLowerCase()+"."+u+"\n";t=f.nodeName.toLowerCase()+".";var s=f.childNodes;for(var q=0;q<s.length;q++){var m=s[q];if(!!m.classList.contains("li_head")){h+=list_mark[1]}else{h+=list_mark[2]}var o=m.childNodes;for(var p=0;p<o.length;p++){var v=o[p];if(v.nodeName==="BR"){h+="\n"+list_mark[3]}else{h+=v.textContent}}h+="\n"}break;case"TABLE":e=table_mark[0]+u+"\n";t=table_mark[0];var x=f.childNodes;for(var q=0;q<x.length;q++){h+=table_mark[1]+";";var a=x[q];var c=a.childNodes;for(var p=0;p<c.length;p++){var g=c[p];switch(g.nodeName){case"TH":h+=table_mark[2]+innerHTML(g)+";";break;case"TD":h+=table_mark[3]+innerHTML(g)+";";break}}h+="\n"}break}w+=e+h+t+"\n";break;case"PRE":w+=innerHTML(n)+"\n";break}}return w}function reloadMarkDown(){id("markdown").innerHTML=tranHtmlToMarkdown()}function toggleEdit(){var e=id("html_body");var d=attr(e,"contentEditable")==="true";var b=id("markdown");var a=id("markdown_editable");var c=id("html_editable");if(d){rmAttr(b,"readonly");rmAttr(b,"disabled");c.innerHTML="編集";a.innerHTML="";rmClass(c,"type_red");addClass(c,"type_blue")}else{attr(b,"readonly",!0);attr(b,"disabled",!0);c.innerHTML="完了";a.innerHTML="(ロック中)";addClass(c,"type_red");rmClass(c,"type_blue")}attr(e,"contentEditable",!d)}function saveMark(){var a=id("compare");var b=id("selfile");a.onload=function(){};a.src=b.src;a.onload=function(l){var d=iframeDoc(id("selfile"));var f=iframeDoc(id("compare"));if(!d.body.childNodes[0]||d.body.childNodes[0].innerHTML===f.body.childNodes[0].innerHTML||window.confirm("書類が更新されています。\n保存しますか")){var o=id("md_select").value?id("md_select").value:"書類.txt";var k=["href","download"];var g=new Blob([id("markdown").innerHTML],{type:j});var n=window.URL.createObjectURL(g);var m=window.navigator.userAgent.toLowerCase();if(m.indexOf("msie")!=-1||m.indexOf("trident")!=-1){var j="text/plain";var h=window.navigator;window.navigator.msSaveOrOpenBlob(g,o)}else{var i=id("getLocal");attr(i,k[0],n);attr(i,k[1],o);i.click()}}};var c=iframeDoc(a);c.location.reload(true)}function loadMark(){var a=id("md_select");var b=a[a.selectedIndex].value;if(!!b){id("selfile").src="md/"+b}else{id("markdown").innerHTML="";reloadHtml()}}function resizeBody(){var a=window.innerHeight-id("html_head").clientHeight;id("html_body").style.height=a+"px";id("mark_body").style.height=a+"px"}function toggleSelectArea(){var a=id("md_select_area");var b=a.classList.contains("md_select_area_unvisible");if(b){rmClass(a,"md_select_area_unvisible");id("md_select").focus()}else{addClass(a,"md_select_area_unvisible");id("markdown").focus()}}function reloadSelectArea(){var b=id("md_select");var a=b.selectedIndex;rmChildren(b);for(var d in md_list){var c=make("option",b);c.innerHTML=d;c.value=md_list[d]}b.selectedIndex=a;b.focus()}function load_js(c){rmMe(id("md_resource"));var b=new Date();var a=make("script",document.getElementsByTagName("head")[0]);a.id="md_resource";a.type="text/javascript";a.src="md/_md.js?t="+b.getMinutes()+b.getSeconds();addEvent(a,"load",reloadSelectArea)}function init(){id("markdown").innerHTML="";resizeBody();reloadSelectArea();id("md_select").focus();id("md_select").selectedIndex=0}var press_shift=!1;window.onload=function(){addEvent(window,"resize",resizeBody);addEvent(window,"keydown",function(a){if(event.ctrlKey&&a.keyCode==83){saveMark();event.preventDefault()}else{if(event.ctrlKey&&a.keyCode==76){toggleSelectArea();event.preventDefault()}else{if(event.ctrlKey&&a.keyCode==32){}}}});addEvent(id("markdown"),"keyup",reloadHtml);addEvent(id("html_body"),"keyup",reloadMarkDown);addEvent(id("html_body"),"keydown",function(a){switch(a.keyCode){case 16:press_shift=!0}});addEvent(id("html_body"),"keyup",function(a){switch(a.keyCode){case 16:press_shift=!1}});addEvent(id("html_body"),"keydown",function(b){var a=document.querySelectorAll("#html_body div");if(!press_shift&&b.keyCode===13&&a.length===1&&a.textContent===undefined){b.preventDefault()}});addEvent(id("html_editable"),"click",toggleEdit);addEvent(id("md_reload"),"click",function(){var b=iframeDoc(id("selfile"));var a=id("markdown");if(b.body.childNodes[0].innerHTML===a.innerHTML||window.confirm("編集中の内容は失われます\nよろしいですか？")){b.location.reload(true);a.innerHTML=b.body.childNodes[0].innerHTML}});addEvent(id("md_select"),"change",loadMark);addEvent(id("md_select_area_close"),"click",toggleSelectArea);addEvent(id("md_select_area_reload"),"click",load_js);addEvent(id("selfile"),"load",function(){try{id("markdown").innerHTML=iframeDoc(id("selfile")).body.childNodes[0].innerHTML;reloadHtml()}catch(a){alert(id("selfile").src+"は存在しません。")}});init()};</script><script id="md_resource" src="md/_md.js" charset="UTF-8"></script><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>案件管理</title><ul id="main_body"><li class="child_body head col1" id="html_head"><b>HTML VIEW<br><span id="html_editable" class="button type_blue">編集</span><span id="md_reload" class="button type_yellow">更新</span></b><li class="child_body head col2" id="mark_head"><b>EDITOR<br><span id="markdown_editable"></span></b><li id="html_body" class="child_body data col1" contentEditable="false"><li id="mark_body" class="child_body data col2"><textarea id="markdown" list="mark_list"></textarea></ul><a id="getLocal" href="#"></a><iframe id="selfile"></iframe><iframe id="compare"></iframe><div id="md_select_area"><p><span id="md_select_area_close" class="button type_red"></span><span id="md_select_area_reload" class="button type_blue"></span></p><p>ロードする書類を選択して下さい。</p><select id="md_select" size="20" style="width: 100%"></select></div>
```
```javascript:md/_md.js
var md_list = {
 '':'',
 'マークダウン２':'markdown2.md',
 'マークダウン１':'markdown1.md',
};
```
```text:md/markdown1.md
h1.大見出し
テキストエリアは
こんな感じです。

tb.テーブル1
tr.;th.カラム１;th.カラム２;th.カラム３;
tr.;td.値１;td.値２;td.値３;
tr.;td.値１;td.値２;td.値３;
tb.
テキストエリアは
こんな感じです。

tb.テーブル2
tr.;td.;th.値１;th.値２;
tr.;th.カラム１;td.値１;td.値２;
tr.;th.カラム２;td.値１;td.値２;
tr.;th.カラム３;td.値１;td.値２;
tb.
テキストエリアは
こんな感じです。

ul.順序なしリスト
li.リストＡ
li+内容Ａ－１
br.内容Ａ－２
br.内容Ａ－２
li.リストＢ
br.リストＢ－２
ul.

ol.順序ありリスト
li.リスト１
li.リスト２
br.内容２－２
br.内容２－２
li.リスト３
br.リスト３－２
ol.
テキストエリアは
こんな感じです。
```