diff --git a/.development_images/ceac8fce.png b/.development_images/ceac8fce.png
new file mode 100644
index 0000000..85066dd
Binary files /dev/null and b/.development_images/ceac8fce.png differ
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index e8a03ac..272b069 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -2,9 +2,13 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="13e0dece-006e-462c-b9ea-53763e7fc77a" name="Default Changelist" comment="">
+      <change afterPath="$PROJECT_DIR$/.development_images/ceac8fce.png" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/docs/devSummary.md" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/README.md" beforeDir="false" afterPath="$PROJECT_DIR$/README.md" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/README_EN.md" beforeDir="false" afterPath="$PROJECT_DIR$/README_EN.md" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/development.md" beforeDir="false" afterPath="$PROJECT_DIR$/docs/development.md" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/template.html" beforeDir="false" afterPath="$PROJECT_DIR$/template.html" afterDir="false" />
     </list>
     <ignored path="$PROJECT_DIR$/.tmp/" />
     <ignored path="$PROJECT_DIR$/temp/" />
@@ -16,22 +20,13 @@
     <option name="LAST_RESOLUTION" value="IGNORE" />
   </component>
   <component name="FileEditorManager">
-    <leaf>
+    <leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
       <file pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/package.json">
-          <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="323">
-              <caret line="19" column="13" lean-forward="true" selection-start-line="19" selection-start-column="13" selection-end-line="19" selection-end-column="13" />
-            </state>
-          </provider>
-        </entry>
-      </file>
-      <file pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/README.md">
+        <entry file="file://$PROJECT_DIR$/docs/development.md">
           <provider selected="true" editor-type-id="split-provider[text-editor;markdown-preview-editor]">
             <state split_layout="SPLIT">
-              <first_editor relative-caret-position="51">
-                <caret line="3" selection-start-line="3" selection-end-line="4" />
+              <first_editor relative-caret-position="1292">
+                <caret line="76" selection-start-line="76" selection-end-line="76" />
               </first_editor>
               <second_editor />
             </state>
@@ -39,41 +34,11 @@
         </entry>
       </file>
       <file pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/src/lib/markdown.js">
-          <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="1037">
-              <caret line="61" column="35" selection-start-line="61" selection-start-column="24" selection-end-line="61" selection-end-column="35" />
-            </state>
-          </provider>
-        </entry>
-      </file>
-      <file pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/src/lib/mdReverse.js">
-          <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="289">
-              <caret line="17" column="31" selection-start-line="17" selection-start-column="31" selection-end-line="17" selection-end-column="31" />
-              <folding>
-                <element signature="e#0#61#0" expanded="true" />
-              </folding>
-            </state>
-          </provider>
-        </entry>
-      </file>
-      <file pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/src/lib/nwodkramConfig.js">
-          <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="7327">
-              <caret line="431" column="8" selection-start-line="431" selection-start-column="8" selection-end-line="431" selection-end-column="8" />
-            </state>
-          </provider>
-        </entry>
-      </file>
-      <file pinned="false" current-in-tab="true">
-        <entry file="file://$PROJECT_DIR$/README_EN.md">
+        <entry file="file://$PROJECT_DIR$/docs/devSummary.md">
           <provider selected="true" editor-type-id="split-provider[text-editor;markdown-preview-editor]">
             <state split_layout="SPLIT">
-              <first_editor relative-caret-position="68">
-                <caret line="4" lean-forward="true" selection-start-line="4" selection-end-line="4" />
+              <first_editor relative-caret-position="240">
+                <caret line="131" column="6" lean-forward="true" selection-start-line="131" selection-start-column="6" selection-end-line="131" selection-end-column="6" />
               </first_editor>
               <second_editor />
             </state>
@@ -81,37 +46,31 @@
         </entry>
       </file>
       <file pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/template.html">
-          <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="68">
-              <caret line="4" column="19" selection-start-line="4" selection-start-column="19" selection-end-line="4" selection-end-column="19" />
-            </state>
-          </provider>
-        </entry>
-      </file>
-      <file pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/babel.config.js">
+        <entry file="file://$PROJECT_DIR$/src/lib/parser.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="85">
-              <caret line="5" column="30" selection-start-line="5" selection-start-column="30" selection-end-line="5" selection-end-column="30" />
+            <state relative-caret-position="1156">
+              <caret line="68" column="9" selection-start-line="68" selection-start-column="9" selection-end-line="68" selection-end-column="9" />
             </state>
           </provider>
         </entry>
       </file>
       <file pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/demo.js">
+        <entry file="file://$PROJECT_DIR$/index.html">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="85">
-              <caret line="5" selection-start-line="5" selection-end-line="5" />
+            <state relative-caret-position="289">
+              <caret line="17" column="76" selection-start-line="17" selection-start-column="76" selection-end-line="17" selection-end-column="76" />
             </state>
           </provider>
         </entry>
       </file>
-      <file pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/src/index.js">
+      <file pinned="false" current-in-tab="true">
+        <entry file="file://$PROJECT_DIR$/template.html">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="17">
-              <caret line="1" selection-start-line="1" selection-end-line="1" />
+            <state relative-caret-position="102">
+              <caret line="6" column="6" lean-forward="true" selection-start-line="6" selection-start-column="6" selection-end-line="6" selection-end-column="6" />
+              <folding>
+                <element signature="n#style#0;n#img#0;n#a#0;n#body#0;n#html#0;n#!!top" expanded="true" />
+              </folding>
             </state>
           </provider>
         </entry>
@@ -155,19 +114,22 @@
         <option value="$PROJECT_DIR$/src/lib/nwodkramConfig.js" />
         <option value="$PROJECT_DIR$/src/lib/vdomt.js" />
         <option value="$PROJECT_DIR$/styles.css" />
-        <option value="$PROJECT_DIR$/development.md" />
         <option value="$PROJECT_DIR$/webpack.dev.config.js" />
         <option value="$PROJECT_DIR$/babel.config.js" />
         <option value="$PROJECT_DIR$/README_CN.md" />
-        <option value="$PROJECT_DIR$/index.html" />
-        <option value="$PROJECT_DIR$/template.html" />
         <option value="$PROJECT_DIR$/webpack.prod.config.js" />
         <option value="$PROJECT_DIR$/src/lib/mdRverse.js" />
-        <option value="$PROJECT_DIR$/demo.js" />
         <option value="$PROJECT_DIR$/src/index.js" />
-        <option value="$PROJECT_DIR$/package.json" />
         <option value="$PROJECT_DIR$/README.md" />
+        <option value="$PROJECT_DIR$/index.html" />
+        <option value="$PROJECT_DIR$/demo.js" />
+        <option value="$PROJECT_DIR$/package.json" />
+        <option value="$PROJECT_DIR$/development.md" />
+        <option value="$PROJECT_DIR$/developmentSummary.md" />
+        <option value="$PROJECT_DIR$/devSummary.md" />
         <option value="$PROJECT_DIR$/README_EN.md" />
+        <option value="$PROJECT_DIR$/docs/devSummary.md" />
+        <option value="$PROJECT_DIR$/template.html" />
       </list>
     </option>
   </component>
@@ -179,7 +141,7 @@
   </component>
   <component name="ProjectFrameBounds" extendedState="6">
     <option name="x" value="-8" />
-    <option name="y" value="-8" />
+    <option name="y" value="2" />
     <option name="width" value="1936" />
     <option name="height" value="1056" />
   </component>
@@ -195,11 +157,6 @@
               <item name="mdReverse" type="b2602c69:ProjectViewProjectNode" />
               <item name="nwodkram" type="462c0819:PsiDirectoryNode" />
             </path>
-            <path>
-              <item name="mdReverse" type="b2602c69:ProjectViewProjectNode" />
-              <item name="nwodkram" type="462c0819:PsiDirectoryNode" />
-              <item name="es5" type="462c0819:PsiDirectoryNode" />
-            </path>
             <path>
               <item name="mdReverse" type="b2602c69:ProjectViewProjectNode" />
               <item name="nwodkram" type="462c0819:PsiDirectoryNode" />
@@ -230,16 +187,17 @@
     <property name="project.structure.last.edited" value="Project" />
     <property name="project.structure.proportion" value="0.0" />
     <property name="project.structure.side.proportion" value="0.2" />
-    <property name="settings.editor.selected.configurable" value="Settings.JavaScript" />
+    <property name="settings.editor.selected.configurable" value="preferences.pluginManager" />
   </component>
   <component name="RecentsManager">
+    <key name="CopyFile.RECENT_KEYS">
+      <recent name="C:\Users\lenovo\WebStormProjects\nwodkram\src\lib" />
+    </key>
     <key name="MoveFile.RECENT_KEYS">
+      <recent name="C:\Users\lenovo\WebStormProjects\nwodkram\docs" />
       <recent name="C:\Users\lenovo\WebStormProjects\nwodkram\src" />
       <recent name="C:\Users\lenovo\WebStormProjects\nwodkram" />
     </key>
-    <key name="CopyFile.RECENT_KEYS">
-      <recent name="C:\Users\lenovo\WebStormProjects\nwodkram\src\lib" />
-    </key>
   </component>
   <component name="RunDashboard">
     <option name="ruleStates">
@@ -253,7 +211,17 @@
       </list>
     </option>
   </component>
-  <component name="RunManager" selected="npm.prepare">
+  <component name="RunManager" selected="npm.bulid">
+    <configuration name="bulid" type="js.build_tools.npm" temporary="true" nameIsGenerated="true">
+      <package-json value="$PROJECT_DIR$/package.json" />
+      <command value="run" />
+      <scripts>
+        <script value="bulid" />
+      </scripts>
+      <node-interpreter value="project" />
+      <envs />
+      <method v="2" />
+    </configuration>
     <configuration name="prepare" type="js.build_tools.npm" temporary="true" nameIsGenerated="true">
       <package-json value="$PROJECT_DIR$/package.json" />
       <command value="run" />
@@ -277,9 +245,11 @@
     <list>
       <item itemvalue="npm.start" />
       <item itemvalue="npm.prepare" />
+      <item itemvalue="npm.bulid" />
     </list>
     <recent_temporary>
       <list>
+        <item itemvalue="npm.bulid" />
         <item itemvalue="npm.prepare" />
       </list>
     </recent_temporary>
@@ -294,24 +264,28 @@
       <option name="number" value="Default" />
       <option name="presentableId" value="Default" />
       <updated>1558861661149</updated>
-      <workItem from="1558861662438" duration="37301000" />
+      <workItem from="1558861662438" duration="40502000" />
+      <workItem from="1559133640113" duration="3699000" />
+      <workItem from="1559185279068" duration="1477000" />
+      <workItem from="1559189385207" duration="2921000" />
+      <workItem from="1559198035630" duration="311000" />
+      <workItem from="1559198394244" duration="4465000" />
+      <workItem from="1559223993576" duration="6118000" />
+      <workItem from="1559306094130" duration="5468000" />
+      <workItem from="1559353246937" duration="1541000" />
     </task>
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="37301000" />
+    <option name="totallyTimeSpent" value="66502000" />
   </component>
   <component name="ToolWindowManager">
     <frame x="-8" y="-8" width="1936" height="1056" extended-state="6" />
     <editor active="true" />
     <layout>
-      <window_info id="Favorites" side_tool="true" />
       <window_info active="true" content_ui="combo" id="Project" order="0" visible="true" weight="0.13645943" />
       <window_info id="Structure" order="1" side_tool="true" weight="0.25" />
-      <window_info anchor="bottom" id="Docker" show_stripe_button="false" />
-      <window_info anchor="bottom" id="Version Control" />
-      <window_info anchor="bottom" id="Terminal" visible="true" weight="0.21986607" />
-      <window_info anchor="bottom" id="Event Log" side_tool="true" />
+      <window_info id="Favorites" order="2" side_tool="true" />
       <window_info anchor="bottom" id="Message" order="0" />
       <window_info anchor="bottom" id="Find" order="1" weight="0.32924107" />
       <window_info anchor="bottom" id="Run" order="2" weight="0.32924107" />
@@ -319,6 +293,10 @@
       <window_info anchor="bottom" id="Cvs" order="4" weight="0.25" />
       <window_info anchor="bottom" id="Inspection" order="5" weight="0.4" />
       <window_info anchor="bottom" id="TODO" order="6" />
+      <window_info anchor="bottom" id="Docker" order="7" show_stripe_button="false" />
+      <window_info anchor="bottom" id="Version Control" order="8" />
+      <window_info anchor="bottom" id="Terminal" order="9" visible="true" weight="0.21986607" />
+      <window_info anchor="bottom" id="Event Log" order="10" side_tool="true" />
       <window_info anchor="right" id="Commander" internal_type="SLIDING" order="0" type="SLIDING" weight="0.4" />
       <window_info anchor="right" id="Ant Build" order="1" weight="0.25" />
       <window_info anchor="right" content_ui="combo" id="Hierarchy" order="2" weight="0.25" />
@@ -331,9 +309,7 @@
     <entry file="file://$PROJECT_DIR$/src/lib/plugins/table.js">
       <provider selected="true" editor-type-id="text-editor" />
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/lib/message.js">
-      <provider selected="true" editor-type-id="text-editor" />
-    </entry>
+    <entry file="file://$PROJECT_DIR$/src/lib/message.js" />
     <entry file="file://$PROJECT_DIR$/package-lock.json">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="-612">
@@ -365,173 +341,176 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/development.md">
-      <provider selected="true" editor-type-id="split-provider[text-editor;markdown-preview-editor]">
-        <state split_layout="SPLIT">
-          <first_editor />
-          <second_editor />
-        </state>
-      </provider>
+    <entry file="file://$PROJECT_DIR$/dist/md-reserve.js">
+      <provider selected="true" editor-type-id="text-editor" />
     </entry>
-    <entry file="file://$PROJECT_DIR$/dist/index.html">
+    <entry file="file://$PROJECT_DIR$/lib/lib/lexer.js" />
+    <entry file="file://$PROJECT_DIR$/lib/index.js" />
+    <entry file="file://$PROJECT_DIR$/babelout/index.js" />
+    <entry file="file://$PROJECT_DIR$/es5/lib/mdReserve.js" />
+    <entry file="file://$PROJECT_DIR$/styles.css">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="170">
-          <caret line="10" lean-forward="true" selection-start-line="10" selection-end-line="10" />
+        <state relative-caret-position="232">
+          <caret line="15" column="16" selection-start-line="15" selection-start-column="16" selection-end-line="15" selection-end-column="16" />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/dist/md-reserve.js">
-      <provider selected="true" editor-type-id="text-editor" />
-    </entry>
-    <entry file="file://$PROJECT_DIR$/lib/lib/lexer.js">
-      <provider selected="true" editor-type-id="text-editor" />
-    </entry>
-    <entry file="file://$PROJECT_DIR$/lib/index.js">
+    <entry file="file://$PROJECT_DIR$/babel.config.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="102">
-          <caret line="6" selection-start-line="6" selection-end-line="7" />
+        <state relative-caret-position="85">
+          <caret line="5" column="30" selection-start-line="5" selection-start-column="30" selection-end-line="5" selection-end-column="30" />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/babelout/index.js">
+    <entry file="file://$PROJECT_DIR$/src/lib/mdReverse.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="102">
-          <caret line="6" column="39" selection-start-line="6" selection-start-column="35" selection-end-line="6" selection-end-column="39" />
+        <state relative-caret-position="289">
+          <caret line="17" column="31" selection-start-line="17" selection-start-column="31" selection-end-line="17" selection-end-column="31" />
+          <folding>
+            <element signature="e#0#61#0" expanded="true" />
+          </folding>
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/es5/lib/mdReserve.js">
+    <entry file="file://$PROJECT_DIR$/webpack.prod.config.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="187">
-          <caret line="11" column="29" selection-start-line="11" selection-start-column="20" selection-end-line="11" selection-end-column="29" />
+        <state relative-caret-position="119">
+          <caret line="7" column="29" selection-start-line="7" selection-start-column="29" selection-end-line="7" selection-end-column="29" />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/index.html">
+    <entry file="file://$PROJECT_DIR$/es5/index.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="68">
-          <caret line="4" column="12" selection-start-line="4" selection-start-column="12" selection-end-line="4" selection-end-column="12" />
+        <state relative-caret-position="238">
+          <caret line="14" column="8" selection-start-line="14" selection-start-column="8" selection-end-line="14" selection-end-column="8" />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/styles.css">
+    <entry file="file://$PROJECT_DIR$/src/index.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="232">
-          <caret line="15" column="16" selection-start-line="15" selection-start-column="16" selection-end-line="15" selection-end-column="16" />
+        <state relative-caret-position="17">
+          <caret line="1" selection-start-line="1" selection-end-line="1" />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/webpack.prod.config.js">
+    <entry file="file://$PROJECT_DIR$/dist/index.html">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="62">
-          <caret line="7" column="29" selection-start-line="7" selection-start-column="29" selection-end-line="7" selection-end-column="29" />
+        <state relative-caret-position="391">
+          <caret line="23" column="14" selection-start-line="23" selection-start-column="14" selection-end-line="23" selection-end-column="14" />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/lib/lexer.js">
+    <entry file="file://$PROJECT_DIR$/package.json">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="595">
-          <caret line="35" column="19" selection-start-line="35" selection-start-column="19" selection-end-line="35" selection-end-column="19" />
+        <state relative-caret-position="17">
+          <caret line="1" column="23" selection-start-line="1" selection-start-column="23" selection-end-line="8" selection-end-column="9" />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/webpack.dev.config.js">
+    <entry file="file://$USER_HOME$/Boostnote/notes/ecaf878e-cb4e-4d98-af5a-f245b52ffedf.cson">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="272">
-          <caret line="16" column="16" selection-start-line="16" selection-start-column="16" selection-end-line="16" selection-end-column="16" />
+        <state relative-caret-position="85">
+          <caret line="5" column="12" lean-forward="true" selection-start-line="5" selection-start-column="12" selection-end-line="5" selection-end-column="12" />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/template.html">
+    <entry file="file://$PROJECT_DIR$/developmentSummary.md" />
+    <entry file="file://$PROJECT_DIR$/src/lib/lexer.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="68">
-          <caret line="4" column="19" selection-start-line="4" selection-start-column="19" selection-end-line="4" selection-end-column="19" />
+        <state relative-caret-position="799">
+          <caret line="52" selection-start-line="52" selection-end-line="52" />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/babel.config.js">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="85">
-          <caret line="5" column="30" selection-start-line="5" selection-start-column="30" selection-end-line="5" selection-end-column="30" />
+    <entry file="file://$PROJECT_DIR$/README.md">
+      <provider selected="true" editor-type-id="split-provider[text-editor;markdown-preview-editor]">
+        <state split_layout="SPLIT">
+          <first_editor relative-caret-position="51">
+            <caret line="3" selection-start-line="3" selection-end-line="4" />
+          </first_editor>
+          <second_editor />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/lib/parser.js">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="510">
-          <caret line="30" column="23" lean-forward="true" selection-start-line="30" selection-start-column="23" selection-end-line="30" selection-end-column="23" />
+    <entry file="file://$PROJECT_DIR$/README_EN.md">
+      <provider selected="true" editor-type-id="split-provider[text-editor;markdown-preview-editor]">
+        <state split_layout="SPLIT">
+          <first_editor relative-caret-position="425">
+            <caret line="25" column="3" selection-start-line="25" selection-start-column="3" selection-end-line="25" selection-end-column="3" />
+          </first_editor>
+          <second_editor />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/demo.js">
+    <entry file="file://$PROJECT_DIR$/src/lib/markdown.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="85">
-          <caret line="5" selection-start-line="5" selection-end-line="5" />
+        <state relative-caret-position="799">
+          <caret line="61" column="35" selection-start-line="61" selection-start-column="24" selection-end-line="61" selection-end-column="35" />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/index.js">
+    <entry file="file://$PROJECT_DIR$/webpack.dev.config.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="17">
-          <caret line="1" selection-start-line="1" selection-end-line="1" />
+        <state relative-caret-position="85">
+          <caret line="5" column="14" selection-start-line="5" selection-start-column="14" selection-end-line="5" selection-end-column="14" />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/es5/index.js">
+    <entry file="file://$PROJECT_DIR$/demo.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="238">
-          <caret line="14" column="8" selection-start-line="14" selection-start-column="8" selection-end-line="14" selection-end-column="8" />
+        <state>
+          <caret column="27" selection-start-column="27" selection-end-column="27" />
         </state>
       </provider>
     </entry>
     <entry file="file://$PROJECT_DIR$/src/lib/nwodkramConfig.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="7327">
-          <caret line="431" column="8" selection-start-line="431" selection-start-column="8" selection-end-line="431" selection-end-column="8" />
+        <state relative-caret-position="124">
+          <caret line="23" selection-start-line="23" selection-end-line="23" />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/lib/mdReverse.js">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="289">
-          <caret line="17" column="31" selection-start-line="17" selection-start-column="31" selection-end-line="17" selection-end-column="31" />
-          <folding>
-            <element signature="e#0#61#0" expanded="true" />
-          </folding>
+    <entry file="file://$PROJECT_DIR$/docs/development.md">
+      <provider selected="true" editor-type-id="split-provider[text-editor;markdown-preview-editor]">
+        <state split_layout="SPLIT">
+          <first_editor relative-caret-position="1292">
+            <caret line="76" selection-start-line="76" selection-end-line="76" />
+          </first_editor>
+          <second_editor />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/lib/markdown.js">
+    <entry file="file://$PROJECT_DIR$/src/lib/parser.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="1037">
-          <caret line="61" column="35" selection-start-line="61" selection-start-column="24" selection-end-line="61" selection-end-column="35" />
+        <state relative-caret-position="1156">
+          <caret line="68" column="9" selection-start-line="68" selection-start-column="9" selection-end-line="68" selection-end-column="9" />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/package.json">
+    <entry file="file://$PROJECT_DIR$/index.html">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="323">
-          <caret line="19" column="13" lean-forward="true" selection-start-line="19" selection-start-column="13" selection-end-line="19" selection-end-column="13" />
+        <state relative-caret-position="289">
+          <caret line="17" column="76" selection-start-line="17" selection-start-column="76" selection-end-line="17" selection-end-column="76" />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/README.md">
+    <entry file="file://$PROJECT_DIR$/docs/devSummary.md">
       <provider selected="true" editor-type-id="split-provider[text-editor;markdown-preview-editor]">
         <state split_layout="SPLIT">
-          <first_editor relative-caret-position="51">
-            <caret line="3" selection-start-line="3" selection-end-line="4" />
+          <first_editor relative-caret-position="240">
+            <caret line="131" column="6" lean-forward="true" selection-start-line="131" selection-start-column="6" selection-end-line="131" selection-end-column="6" />
           </first_editor>
           <second_editor />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/README_EN.md">
-      <provider selected="true" editor-type-id="split-provider[text-editor;markdown-preview-editor]">
-        <state split_layout="SPLIT">
-          <first_editor relative-caret-position="68">
-            <caret line="4" lean-forward="true" selection-start-line="4" selection-end-line="4" />
-          </first_editor>
-          <second_editor />
+    <entry file="file://$PROJECT_DIR$/template.html">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="102">
+          <caret line="6" column="6" lean-forward="true" selection-start-line="6" selection-start-column="6" selection-end-line="6" selection-end-column="6" />
+          <folding>
+            <element signature="n#style#0;n#img#0;n#a#0;n#body#0;n#html#0;n#!!top" expanded="true" />
+          </folding>
         </state>
       </provider>
     </entry>
diff --git a/README.md b/README.md
index 41bf913..49758b0 100644
--- a/README.md
+++ b/README.md
@@ -3,7 +3,7 @@
 
 [Demo](https://abc1310054026.github.io/mdReverse/)
 
-* [开发进度](./development.md)
+* [开发进度](docs/development.md)
 * [English Version](./README_EN.md)
 ## 安装
 npm:
diff --git a/README_EN.md b/README_EN.md
index c5badb1..5d0a0ac 100644
--- a/README_EN.md
+++ b/README_EN.md
@@ -3,7 +3,7 @@ Convert HTML to Markdown. Written by JavaScript.
 
 [Demo](https://abc1310054026.github.io/mdReverse/)
 
-* [development schedule](./development.md)
+* [development schedule](docs/development.md)
 * [For more information see Chinese](./README_EN.md)
 ## Installation
 npm:
diff --git a/docs/devSummary.md b/docs/devSummary.md
new file mode 100644
index 0000000..20d5341
--- /dev/null
+++ b/docs/devSummary.md
@@ -0,0 +1,161 @@
+# HTML逆向解析生成Markdown
+解析过程分为四个阶段。以下是各个阶段的简要说明。
+1.  分词：将HTML原始文本分割为HTML标签
+2.  生成虚拟DOM节点：将分割后的HTML标签转换成对应的节点
+3.  构建虚拟DOM树：将节点根据其顺序生成相应的DOM树
+4.  生成Markdown文本：根据预先定义HTML To Markdown的转换规则，对DOM树进行转换
+
+```flowchart
+st=>start: 源HTML文本
+lexer=>operation: 分词
+parser=>operation: 生成虚拟DOM节点
+filter=>inputoutput: 过滤无效节点
+vdomt=>operation: 构建虚拟DOM树
+filterAgain=>inputoutput: 根据转换规则再次过滤节点
+md=>operation: 生成Markdown文本
+ed=>end: 输出Markdown文本
+
+st(right)->lexer->parser->filter->vdomt->filterAgain->md(right)->ed
+```
+ 
+**下面这段HTML文本将作为解析的样例文本：**
+```html
+<h2 id="逆向解析HTMl">逆向解析HTMl</h2>
+<p><a href="https://www.baidu.com" rel="nofollow" target="_blank">Markdown</a>解析过程分为四个阶段</p>
+<ul>
+<li>分词</li>
+<li>生成虚拟DOM节点</li>
+<li>构建虚拟DOM树</li>
+<li><p>生成Markdown文本</p></li>
+</ul>
+```
+
+## 分词
+我们将源HTML文本按照[HTML元素的语法](https://developer.mozilla.org/zh-CN/docs/Glossary/HTML)，分解为`Opening tag` `Closing tag` `Enclosed text content`。
+![](https://mdn.mozillademos.org/files/7659/anatomy-of-an-html-element.png)
+
+因为HTML元素内部很可能还有嵌套的元素，所以还要继续分割`Enclosed text content`直到只剩下`文字文本`。
+
+从上图来看很明显，`Opening tag`和`Closing tag`都是由`<` `>`这两个符号包裹的，那我们只需要对愿HTML文本进行一次搜索，将被`<` `>`包裹起来的字符串提取出来，放入一个数组中。搜索结束后数组就是我们分词的结果。
+原始文本经过分割后，如下所示：
+```javascript
+const result = [
+  '<h2 id="逆向解析HTMl">',
+  '逆向解析HTMl',
+  '</h2>',
+  '<p>',
+  '<a href="https://www.baidu.com" rel="nofollow" target="_blank">',
+  'Markdown',
+  '</a>',
+  '解析过程分为四个阶段',
+  '</p>',
+  '<ul>',
+  '<li>',
+  '分词',
+  '</li>',
+  '<li>',
+  '生成虚拟DOM节点',
+  '</li>',
+  '<li>',
+  '构建虚拟DOM树',
+  '</li>',
+  '<li>',
+  '<p>',
+  '生成Markdown文本',
+  '</p>',
+  '</li>',
+  '</ul>'
+]
+```
+
+**需要注意的是，html标签中的属性值是允许出现`<`和`>`这两个符号的**，也就是说会出现类似`<div data-demo="<demo>asd</demo>">`这样的文本。
+这里要注意的是不能直接从头到尾搜索`<` `>`然后提取里面的字符串，不然会出现提取到`<div data-demo="<demo>`这样的结果。
+
+##### 我实现的方法比较简单，是利用栈来判断HTML标签的开始和结束。
+1. 首先从下标0开始，遍历字符串
+2. 
+    1.  如果当前的字符是`<`，则将其压入栈中。
+    2.  如果当前的字符是`>`，且栈顶是`<`，则表示一个HTML标签的结束。
+        然后将开始符号`<`和结束符号`>`之间的字符串提取出来保存到结果数组就好了。
+    3.  如果当前的字符是`"`，且栈顶不是`"`，则将其压入栈中。
+    4.  如果当前的字符是`"`，且栈顶是`"`，则将栈顶元素弹出。
+
+具体实现见[lexer.js](../src/lib/lexer.js)
+
+## 生成虚拟DOM节点
+
+在这一阶段，主要要对节点的属性的过滤，HTML标签内部的大部分属性都是不需要的。除了`a` `img`等几个HTML元素。
+得到分词后的结果之后，就可以解析HTML标签字符串生成一个个包含HTML标签信息的对象。
+对象类型如下：
+```javascript
+const obj = {
+    // 固定属性
+    tag,            // HTML标签名。如`div`, `span`
+    type,           // 自定义的HTML标签名所对应的数字。
+    position,       // 标签所在的位置。开始标签（Opening tag）：1，结束标签（Closing tag）：2，空元素（empty tag）和文本节点（text node）：3
+    // 可选属性
+    attr,           // 标签内属性的键值对，这是一个对象。一些需要保留属性的元素如`a`元素需要保留`href` `title`用来生成Markdown文本。
+    content         // 文本节点特有，用来保存文本
+}
+```
+这一过程得到的结果如下（有点多，这里只截取前6个比较有代表性的）：
+```javascript
+const result = [
+    {
+        tag: 'h2',
+        type: 42,           // 不要在意`type`属性，这是自定义的，42代表`h2`元素对应数字
+        position: 1
+    },
+    {
+        tag: 'textNode',
+        type: 1,
+        position: 3,
+        content: '逆向解析HTMl'
+    },
+    {
+        tag: 'h2',
+        type: 42,
+        position: 2
+    },
+    {
+        tag: 'p',
+        type: 6,
+        position: 1
+    },
+    {
+        tag: 'a',
+        type: 2,
+        position: 1,
+        attr: {
+            href: 'https://www.baidu.com'
+        }
+    },
+    {
+        tag: 'textNode',
+        type: 1,
+        position: 3,
+        content: 'Markdown'
+    },
+]
+```
+##### 这部分的实现思路也比较简单，大部分是字符串处理。
+1.  `tag`：HTML标签的结构很简单，大致就以下几种：（最后一种不需要处理，可以忽略）
+    1. `<tagName attrKey="attrValue" attrKey>` `<tagName attrKey="attrValue" attrKey >`
+    2. `<tagName/>` `<tagName />`
+    3. `</tagName>`
+    
+    很容易发现要想得到tagName只需要找到在`<`和（`空格`或`/`）之间的字符串就可以了。
+2.  `type`：这个属性是为了方便之后的类型处理添加的，毕竟数字相对字符串来说更好处理。
+    
+    我在配置文件里写了一个映射表（[配置文件](../src/lib/nwodkramConfig.js)），以`tag`作为key对应数字作为value。这样就能很方便的对应起来。
+3.  `position`：这个属性虽然叫`position`，其实`type`才更适合它，因为它标识了开始标签（Opening tag）：1，结束标签（Closing tag）：2，空元素（empty tag）和文本节点（text node）：3
+    
+    `position`的判断写的我写的有些简陋，只考虑到了上文`tag`所列的几种情况（但也已经能包括大部分情况了）。从上面那几种情况来说。
+    只要判断`tag`开始位置的下标索引是/不是`1`，就能知道是/不是Opening tag了。
+    
+    关于文本节点的判断：文本节点是没有`tag`的，如果无法搜索到`tag`，就可以将节点标识为文本节点。
+4.  `attr`
+    
+具体实现见[parser.js](../src/lib/parser.js)
+
+## 构建虚拟DOM树
diff --git a/development.md b/docs/development.md
similarity index 100%
rename from development.md
rename to docs/development.md
diff --git a/template.html b/template.html
index 7f04faa..d361657 100644
--- a/template.html
+++ b/template.html
@@ -5,6 +5,9 @@
     <title>MdReverse</title>
 </head>
 <body>
+<a href="https://github.com/abc1310054026/mdReverse">
+    <img width="149" height="149" style="position: absolute;top: 0;right: 0;z-index: 1;" src="https://github.blog/wp-content/uploads/2008/12/forkme_right_darkblue_121621.png?resize=149%2C149" alt="Fork me on GitHub" data-recalc-dims="1">
+</a>
     <!--<div id="toolbar-container" class="columns col-gapless">-->
         <!--<div class="column col-2"></div>-->
         <!--<div class="column col-10"></div>-->