diff --git a/note.html b/note.html
index f3e063a2..8753d311 100755
--- a/note.html
+++ b/note.html
@@ -18,7 +18,9 @@
 <link href="public/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
 
 <!-- mdeditor -->
-<link href="public/md/themes/default.css" rel="stylesheet" />
+<link href="public/md/themes/mdeditor.css" rel="stylesheet" />
+<!-- markdown theme -->
+<link rel="stylesheet" href="public/md/themes/themes/default/theme.css" type="text/css" id="md-theme"/>
 
 <!-- theme -->
 <link rel="stylesheet" href="public/themes/default.css" type="text/css"/>
@@ -69,7 +71,7 @@ function log(o) {
     <div class="pren-content">
     </div>
   </div>
-  
+
   <div id="page" class="clearfix">
     <div id="mainMask">
         <table><tr><td>
@@ -109,24 +111,24 @@ function log(o) {
             <span class="for-split"> - </span>
             <span id="curNotebookForNewSharedNote" notebookId="" userId=""></span>
             <div class="dropdown" style="display: inline-block">
-              <a id="listShareNotebookDropdownMenu" class="ios7-a dropdown-toggle" data-toggle="dropdown"> 
+              <a id="listShareNotebookDropdownMenu" class="ios7-a dropdown-toggle" data-toggle="dropdown">
                 <i class="fa fa-angle-down"></i>
               </a>
               <div class="dropdown-menu dropdown-list" id="searchNotebookForAddShareDropdownList" >
                 <ul id="notebookNavForNewSharedNote"></ul>
               </div>
             </div>
-          </div>        
+          </div>
         </div>
-        
+
         <div class="pull-left" id="leanoteMsg">
           <span id="msg" style="display: inline-block;"></span>
           <span id="loading">
           </span>
         </div>
-          
+
         <div class="pull-right top-nav writting-hide" id="myBlog">
-          <a target="_blank" href="{{$.blogUrl}}/{{.userInfo.Username}}" class="lang"> 
+          <a target="_blank" href="{{$.blogUrl}}/{{.userInfo.Username}}" class="lang">
             Blog
           </a>
         </div>
@@ -146,7 +148,7 @@ function log(o) {
                   Starred
                 </span>
               </div>
-  
+
               <ul class="folderBody" id="starNotes">
                 <li noteId=""><a><span class="delete-star" title="Remove">X</span></a></li>
               </ul>
@@ -154,7 +156,7 @@ function log(o) {
 
             <div class="folderNote opened" id="myNotebooks">
               <div class="folderHeader clearfix">
-                <i class="fa fa-book pull-left fa-left"></i> 
+                <i class="fa fa-book pull-left fa-left"></i>
                 <span class="pull-left lang">
                   Notebook
                 </span>
@@ -162,14 +164,14 @@ function log(o) {
                   <i class="fa  fa-plus" title="Add notebook"></i>
                 </div>
               </div>
-              
+
               <div class="folderBody">
-                <input type="text" class="form-control lang-placeholder" id="searchNotebookForList" placeholder="Search notebook"/>              
+                <input type="text" class="form-control lang-placeholder" id="searchNotebookForList" placeholder="Search notebook"/>
                 <ul class="ztree" id="notebookList"></ul>
                 <ul class="ztree" id="notebookListForSearch"></ul>
               </div>
             </div>
-            
+
             <div class="folderNote closed" id="myTag">
               <div class="folderHeader">
                 <i class="fa fa-bookmark fa-left"></i>
@@ -177,7 +179,7 @@ function log(o) {
                   Tag
                 </span>
               </div>
-  
+
               <ul class="folderBody clearfix" id="tagNav">
                 <li data-tag="red"><a> <span class="label label-red">red</span></a></li>
                 <li data-tag="blue"><a> <span class="label label-blue">blue</span></a></li>
@@ -187,8 +189,8 @@ function log(o) {
             </div>
 
           </div>
-          
-          <!-- 
+
+          <!--
           底下
           用于同步
           -->
@@ -204,18 +206,18 @@ function log(o) {
             </a>
             <div class="pull-right" id="myProfile">
               <div class="dropdown">
-                <a class="dropdown-toggle" data-toggle="dropdown"> 
+                <a class="dropdown-toggle" data-toggle="dropdown">
                   <span class="username" id="username">
                   </span><i class="fa fa-angle-down account-more"></i>
                 </a>
-                
+
               </div>
             </div>
           </div>
         </div>
 
         <div class="noteSplit" id="notebookSplitter"></div>
-        
+
         <div id="noteAndEditor">
           <div id="noteAndEditorMask">
             <img src="public/images/loading-24.gif"/>
@@ -248,7 +250,7 @@ function log(o) {
                 </a>
                 <span id="curNotebookForNewNote" notebookId="" style="display: none"></span>
               </div>
-             
+
           </div>
 
           <!-- 搜索 -->
@@ -263,11 +265,11 @@ function log(o) {
             </ul>
           </div>
         </div>
-        
+
         <div class="noteSplit" id="noteSplitter"></div>
-          
+
         <div id="note" class="read-only-editor">
-          
+
           <!-- 遮罩, 为了resize3Columns用 -->
           <div id="noteMask" class="note-mask"></div>
 
@@ -288,7 +290,7 @@ function log(o) {
             <div id="editorMaskBtnsEmpty" class="lang">canntNewNoteTips</div>
           </div>
 
-          <div id="batchMask" class="note-mask"> <!-- z-index: 99 --> 
+          <div id="batchMask" class="note-mask"> <!-- z-index: 99 -->
             <div class="batch-ctn" id="batchCtn"></div>
             <div class="batch-info">
               <div class="batch-status"></div>
@@ -299,11 +301,11 @@ function log(o) {
           <div id="noteTop">
             <!-- 左侧放tag, 右侧放按钮, 比如save, info, move, delete -->
             <div id="tool" class="clearfix">
-              
+
               <div id="noteTitleDiv">
                 <input name="noteTitle" id="noteTitle" class="lang-placeholder" value="" placeholder="UnTitled" tabindex="1" />
               </div>
-              
+
               <ul class="pull-right" id="editorTool">
 
                 <li><a class="ios7-a lang-title lang-title" id="editBtn"
@@ -328,7 +330,7 @@ function log(o) {
                               <i class="fa fa-upload"></i>
                               <span class="lang">Choose Files</span>
                             </a>
-                            
+
                         </div>
                         <div id="attachUploadMsg">
                         </div>
@@ -355,14 +357,14 @@ function log(o) {
               <div id="mceToolbarContainer">
                 <div id="popularToolbar"
                   style="position: absolute; right: 30px; left: 0"></div>
-                  <a id="moreBtn"> 
+                  <a id="moreBtn">
                     <i class="more-fa fa fa-angle-down"></i>
                   </a>
               </div>
 
               <!-- 查看信息 -->
               <div id="infoToolbar" class="info-toolbar">
-               
+
                 <span class="lang">Created</span>: <span class="created-time">2015-04-03</span>
                 <span class="lang">Updated</span>: <span class="updated-time">2015-05-01</span>
               </div>
@@ -377,7 +379,7 @@ function log(o) {
               <div id="leanoteNavContent" class="leanoteNavContent">
               </div>
             </div>
-            
+
             <!-- leaui image drop image to editor-->
             <form id="upload" method="post" action="/file/uploadImageLeaui" enctype="multipart/form-data" style="margin-top: 5px;">
                 <div id="drop">
@@ -387,7 +389,7 @@ function log(o) {
                 <ul id="uploadMsg">
                 </ul>
             </form>
-              
+
             <!-- 由此可以算高度 -->
             <div id="editorContentWrap">
               <div id="editorContent" name="editorContent" tabindex="2" >
@@ -395,15 +397,15 @@ function log(o) {
               </div>
             </div>
           </div>
-          
+
           <div id="mdEditor">
-          
+
             <div class="layout-wrapper-l1">
                 <div class="layout-wrapper-l2">
                     <div class="navbar navbar-default">
                         <div class="navbar-inner" id="wmd-button-bar">
                             <div id="mdInfoToolbar" class="info-toolbar">
-                              
+
                               <span class="lang">Created</span>: <span class="created-time">2015-04-03</span>
                               <span class="lang">Updated</span>: <span class="updated-time">2015-05-01</span>
                             </div>
@@ -425,7 +427,7 @@ function log(o) {
                                   <li class="wmd-button-group6 btn-group">
                                     <li class="wmd-button btn btn-success" id="wmd-help-button" title="Markdown syntax" style="left: 0px; display: none;"><span style="display: none; background-position: 0px 0px;"></span><i class="fa fa-question-circle"></i></li>
                                   </li>
-                              </ul> 
+                              </ul>
                             </div>
                         </div>
                         <div class="editorBg"></div>
@@ -460,8 +462,8 @@ function log(o) {
                     </div>
                 </div>
                 <div id="wmd-button-bar" class="hide"></div>
-            </div>  
-          
+            </div>
+
           </div>
 
           <div id="editorBottom">
@@ -469,14 +471,14 @@ function log(o) {
               <div id="tags">
               </div>
               <div class="dropdown" style="" id="tagDropdown">
-                <i class="fa fa-bookmark-o"></i> 
+                <i class="fa fa-bookmark-o"></i>
                 <a
                   class="metro-a dropdown-toggle" data-toggle="dropdown"
                   id="addTagTrigger" style="cursor: text; padding-left: 0">
                   <span class="add-tag-text lang">
                     clickAddTag
                   </span>
-                </a> 
+                </a>
                 <input type="text" id="addTagInput" />
                 <ul class="dropdown-menu" role="menu" id="tagColor">
                   <li role="presentation"><span class="label label-red lang">red</span>
@@ -489,20 +491,20 @@ function log(o) {
               </div>
             </div>
           </div>
-        </div>  
+        </div>
       </div>
-      
+
       <!-- v1 -->
       <!-- Hidden Popup Modal -->
       <div class="modal fade bs-modal-sm" id="editorDialog" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
         <div class="modal-dialog modal-sm">
             <div class="modal-content">
-        
+
               <div class="modal-header">
                 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                 <h4 class="modal-title" id="editorDialog-title"></h4>
               </div>
-              
+
               <div class="modal-body">
               <p></p>
               <div class="input-group">
@@ -512,41 +514,41 @@ function log(o) {
                 <input type="text" class="form-control" placeholder="">
               </div>
               </div>
-              
+
               <div class="modal-footer">
                 <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                 <button type="button" class="btn btn-primary" id="editorDialog-confirm">confirm</button>
               </div>
-              
+
             </div><!-- /.modal-content -->
           </div><!-- /.modal-dialog -->
       </div><!-- /.modal -->
       <!-- 弹出框 模板 -->
       <div class="modal fade bs-modal-sm" id="leanoteDialogRemote" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
       </div>
-      
+
       <div class="modal fade bs-modal-sm" id="leanoteDialog" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
         <div class="modal-dialog modal-sm">
           <div class="modal-content">
-      
+
             <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
               <h4 class="modal-title" id="modalTitle">操作</h4>
             </div>
-            
+
             <div class="modal-body">
             内容区
             </div>
-            
+
             <div class="modal-footer">
               <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
               <button type="button" class="btn btn-primary">Save changes</button>
             </div>
-            
+
           </div><!-- /.modal-content -->
         </div><!-- /.modal-dialog -->
       </div><!-- /.modal -->
-     
+
       <!-- 升级框 -->
       <div class="modal fade bs-modal-sm" id="upgradeDialog" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
         <div class="modal-dialog modal-sm">
@@ -573,7 +575,7 @@ function log(o) {
             <button type="button" class="btn btn-default upgrade-cancel-btn lang" data-dismiss="modal">Close</button>
             <button type="button" class="btn btn-primary upgrade-btn lang" data-dismiss="modal" disabled>Upgrade</button>
           </div>
-            
+
           </div><!-- /.modal-content -->
         </div><!-- /.modal-dialog -->
       </div><!-- /.modal -->
@@ -591,7 +593,7 @@ function log(o) {
             <label><input type="checkbox" id="localAccountDialogCheckbox"/> <span class="lang">Don't Show Anymore</span></label>
             <button type="button" class="btn btn-default upgrade-cancel-btn lang" data-dismiss="modal">Close</button>
           </div>
-            
+
           </div><!-- /.modal-content -->
         </div><!-- /.modal-dialog -->
       </div><!-- /.modal -->
@@ -600,7 +602,7 @@ function log(o) {
       <div class="modal fade bs-modal-sm" id="loadingDialog" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
         <div class="modal-dialog modal-sm modal-large">
           <div class="modal-content">
-          
+
           <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
 
           <div class="modal-body" id="loadingDialogBody">
@@ -623,11 +625,11 @@ function log(o) {
       <div id="notify">
         <div class="alert alert-dismissible alert-warning" role="alert">
           <button type="button" class="close" ><span aria-hidden="true">&times;</span></button>
-          <strong class="title">Warning!</strong>: 
+          <strong class="title">Warning!</strong>:
           <span class="body">Better check yourself, you're not looking too good.</span>
       </div>
       </div>
-      
+
       <!-- modal 静态区域, 隐藏区域 -->
       <div class="display: hidden" id="hiddenZone">
         <div class="hide" id="copyDiv"></div>
diff --git a/public/md/themes/default.css b/public/md/themes/mdeditor.css
similarity index 87%
rename from public/md/themes/default.css
rename to public/md/themes/mdeditor.css
index 2350e5ed..90a6fc07 100644
--- a/public/md/themes/default.css
+++ b/public/md/themes/mdeditor.css
@@ -45,138 +45,11 @@
 .navbar-form * {
   float: none;
 }
-/** lifelife */
-/* Pretty printing styles. Used with prettify.js. */
-pre.prettyprint * {
-  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', Hiragino Sans GB, "Microsoft YaHei", "微软雅黑";
-}
-pre.prettyprint {
-  white-space: pre-wrap;
-  white-space: -moz-pre-wrap;
-  white-space: -pre-wrap;
-  white-space: -o-pre-wrap;
-  word-wrap: break-word;
-}
-code.prettyprint,
-pre.prettyprint {
-  padding: 8px;
-  /*background-color: #f7f7f9;*/
-  background-color: #f0f0f0;
-  border: 1px solid #e1e1e8;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  -o-border-radius: 3px;
-  -ms-border-radius: 3px;
-  -khtml-border-radius: 3px;
-  border-radius: 3px;
-  display: block;
-  box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1) inset, 40px 0 0 rgba(102, 128, 153, 0.05) inset, 0 1px 0 rgba(102, 128, 153, 0.05);
-}
-#preview-contents pre ol li {
-  padding-left: 10px;
-}
-/*行号*/
-code.prettyprint .linenums,
-pre.prettyprint .linenums {
-  /*
-    -webkit-box-shadow: inset 0px 0 0 #f7f7f9,inset 0px 0 0 #ececf0;
-    -moz-box-shadow: inset 0px 0 0 #f7f7f9,inset 0px 0 0 #ececf0;
-    box-shadow: inset 0px 0 0 #f7f7f9,inset 0px 0 0 #ececf0
-    */
-}
-code.prettyprint ol.linenums,
-pre.prettyprint ol.linenums {
-  padding: 0 0 0 30px;
-  margin: 0;
-}
-code.prettyprint ol.linenums li,
-pre.prettyprint ol.linenums li {
-  padding-left: 0;
-  color: #bebec5;
-  line-height: 20px;
-}
-code.prettyprint .com,
-pre.prettyprint .com {
-  color: #93a1a1;
-  font-style: italic;
-}
-code.prettyprint .lit,
-pre.prettyprint .lit {
-  color: #195f91;
-}
-code.prettyprint .pun,
-pre.prettyprint .pun {
-  color: #93a1a1;
-}
-code.prettyprint .opn,
-pre.prettyprint .opn {
-  color: #93a1a1;
-}
-code.prettyprint .clo,
-pre.prettyprint .clo {
-  color: #93a1a1;
-}
-code.prettyprint .fun,
-pre.prettyprint .fun {
-  color: #dc322f;
-}
-code.prettyprint .str,
-pre.prettyprint .str {
-  color: #dd1144;
-}
-code.prettyprint .atv,
-pre.prettyprint .atv {
-  color: #dd1144;
-}
-code.prettyprint .kwd,
-pre.prettyprint .kwd {
-  color: #1e347b;
-}
-code.prettyprint .tag,
-pre.prettyprint .tag {
-  color: #1e347b;
-}
-code.prettyprint .typ,
-pre.prettyprint .typ {
-  color: #008080;
-}
-code.prettyprint .atn,
-pre.prettyprint .atn {
-  color: #008080;
-}
-code.prettyprint .dec,
-pre.prettyprint .dec {
-  color: #008080;
-}
-code.prettyprint .var,
-pre.prettyprint .var {
-  color: #008080;
-}
-code.prettyprint .pln,
-pre.prettyprint .pln {
-  color: #48484c;
-}
 
 .container {
   margin-bottom: 180px;
   text-align: justify;
 }
-a code {
-  color: inherit;
-}
-pre {
-  word-break: break-word;
-}
-p,
-blockquote {
-  margin: 0 0 0.3em;
-}
-hr {
-  margin: 2em 0;
-}
-img {
-  max-width: 100%;
-}
 .sequence-diagram,
 .flow-chart {
   text-align: center;
@@ -207,85 +80,7 @@ img {
 .flow-chart [fill="black"] {
   fill: #3f3f3f;
 }
-code,
-pre {
-  font-family: "Source Code Pro", monospace;
-  font-size: 0.9em;
-}
-code {
-  white-space: normal;
-}
-pre {
-  border-radius: 5px;
-}
-pre.prettyprint {
-  text-align: start;
-  border: 0;
-  padding: 10px 20px;
-  font-size: 12px;
-}
-pre.prettyprint code {
-  background-color: transparent !important;
-}
-/* Definition list */
-dt,
-dd {
-  margin-top: 5px;
-  margin-bottom: 5px;
-}
-dd {
-  margin-left: 40px;
-}
 
-/* Table style */
-
-#preview-contents table {
-  margin-bottom: 20px;
-  width: 100%;
-}
-#preview-contents table th,
-#preview-contents table td {
-  padding: 8px;
-  line-height: 20px;
-  vertical-align: top;
-  border: 1px solid #dddddd;
-}
-#preview-contents table th {
-  font-weight: bold;
-  vertical-align: bottom;
-}
-#preview-contents table tbody>tr:nth-child(2n+1)>td,
-#preview-contents table tbody>tr:nth-child(2n+1)>th {
-    background-color: rgba(102,128,153,.05);
-}
-
-blockquote {
-  border-left-width: 10px;
-  border-top-right-radius: 5px;
-  border-bottom-right-radius: 5px;
-  padding: 15px 20px;
-  border-left: 10px solid #D6DBDF;
-  background: none repeat scroll 0 0 rgba(102,128,153,.05);
-}
-blockquote p {
-  margin-bottom: 0.3em;
-  font-size: 1em;
-  line-height: 1.45;
-}
-blockquote ul:last-child,
-blockquote ol:last-child {
-  margin-bottom: 0;
-}
-ul,
-ol {
-  margin-bottom: 0.3em;
-}
-ul ul,
-ol ul,
-ul ol,
-ol ol {
-  margin-bottom: 0.3em;
-}
 kbd {
   padding: 0.1em 0.6em;
   border: 1px solid rgba(63, 63, 63, 0.25);
@@ -1321,7 +1116,6 @@ a.input-group-addon {
   overflow: hidden;
   -webkit-box-shadow: inset 1px 0 rgba(128, 128, 128, 0.06);
   box-shadow: inset 1px 0 rgba(128, 128, 128, 0.06);
-  background-color: #f8f8f8;
   z-index: 10;
   font-size: 16px;
 }
@@ -1465,4 +1259,4 @@ a.input-group-addon {
   word-wrap: break-word;
   height: 1px;
   visibility: hidden;
-}
\ No newline at end of file
+}
diff --git a/public/md/themes/themes/default/theme.css b/public/md/themes/themes/default/theme.css
new file mode 100644
index 00000000..2afc9b31
--- /dev/null
+++ b/public/md/themes/themes/default/theme.css
@@ -0,0 +1,212 @@
+/* default markdown style */
+/** lifelife */
+/* Pretty printing styles. Used with prettify.js. */
+pre.prettyprint * {
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', Hiragino Sans GB, "Microsoft YaHei", "微软雅黑";
+}
+pre.prettyprint {
+  white-space: pre-wrap;
+  white-space: -moz-pre-wrap;
+  white-space: -pre-wrap;
+  white-space: -o-pre-wrap;
+  word-wrap: break-word;
+}
+code.prettyprint,
+pre.prettyprint {
+  padding: 8px;
+  /*background-color: #f7f7f9;*/
+  background-color: #f0f0f0;
+  border: 1px solid #e1e1e8;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  -o-border-radius: 3px;
+  -ms-border-radius: 3px;
+  -khtml-border-radius: 3px;
+  border-radius: 3px;
+  display: block;
+  box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1) inset, 40px 0 0 rgba(102, 128, 153, 0.05) inset, 0 1px 0 rgba(102, 128, 153, 0.05);
+}
+#preview-contents pre ol li {
+  padding-left: 10px;
+}
+/*行号*/
+code.prettyprint .linenums,
+pre.prettyprint .linenums {
+  /*
+    -webkit-box-shadow: inset 0px 0 0 #f7f7f9,inset 0px 0 0 #ececf0;
+    -moz-box-shadow: inset 0px 0 0 #f7f7f9,inset 0px 0 0 #ececf0;
+    box-shadow: inset 0px 0 0 #f7f7f9,inset 0px 0 0 #ececf0
+    */
+}
+code.prettyprint ol.linenums,
+pre.prettyprint ol.linenums {
+  padding: 0 0 0 30px;
+  margin: 0;
+}
+code.prettyprint ol.linenums li,
+pre.prettyprint ol.linenums li {
+  padding-left: 0;
+  color: #bebec5;
+  line-height: 20px;
+}
+code.prettyprint .com,
+pre.prettyprint .com {
+  color: #93a1a1;
+  font-style: italic;
+}
+code.prettyprint .lit,
+pre.prettyprint .lit {
+  color: #195f91;
+}
+code.prettyprint .pun,
+pre.prettyprint .pun {
+  color: #93a1a1;
+}
+code.prettyprint .opn,
+pre.prettyprint .opn {
+  color: #93a1a1;
+}
+code.prettyprint .clo,
+pre.prettyprint .clo {
+  color: #93a1a1;
+}
+code.prettyprint .fun,
+pre.prettyprint .fun {
+  color: #dc322f;
+}
+code.prettyprint .str,
+pre.prettyprint .str {
+  color: #dd1144;
+}
+code.prettyprint .atv,
+pre.prettyprint .atv {
+  color: #dd1144;
+}
+code.prettyprint .kwd,
+pre.prettyprint .kwd {
+  color: #1e347b;
+}
+code.prettyprint .tag,
+pre.prettyprint .tag {
+  color: #1e347b;
+}
+code.prettyprint .typ,
+pre.prettyprint .typ {
+  color: #008080;
+}
+code.prettyprint .atn,
+pre.prettyprint .atn {
+  color: #008080;
+}
+code.prettyprint .dec,
+pre.prettyprint .dec {
+  color: #008080;
+}
+code.prettyprint .var,
+pre.prettyprint .var {
+  color: #008080;
+}
+code.prettyprint .pln,
+pre.prettyprint .pln {
+  color: #48484c;
+}
+a code {
+  color: inherit;
+}
+pre {
+  word-break: break-word;
+}
+p,
+blockquote {
+  margin: 0 0 0.3em;
+}
+hr {
+  margin: 2em 0;
+}
+img {
+  max-width: 100%;
+}
+code,
+pre {
+  font-family: "Source Code Pro", monospace;
+  font-size: 0.9em;
+}
+code {
+  white-space: normal;
+}
+pre {
+  border-radius: 5px;
+}
+pre.prettyprint {
+  text-align: start;
+  border: 0;
+  padding: 10px 20px;
+  font-size: 12px;
+}
+pre.prettyprint code {
+  background-color: transparent !important;
+}
+/* Definition list */
+dt,
+dd {
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+dd {
+  margin-left: 40px;
+}
+
+/* Table style */
+
+#preview-contents table {
+  margin-bottom: 20px;
+  width: 100%;
+}
+#preview-contents table th,
+#preview-contents table td {
+  padding: 8px;
+  line-height: 20px;
+  vertical-align: top;
+  border: 1px solid #dddddd;
+}
+#preview-contents table th {
+  font-weight: bold;
+  vertical-align: bottom;
+}
+#preview-contents table tbody>tr:nth-child(2n+1)>td,
+#preview-contents table tbody>tr:nth-child(2n+1)>th {
+    background-color: rgba(102,128,153,.05);
+}
+
+blockquote {
+  border-left-width: 10px;
+  border-top-right-radius: 5px;
+  border-bottom-right-radius: 5px;
+  padding: 15px 20px;
+  border-left: 10px solid #D6DBDF;
+  background: none repeat scroll 0 0 rgba(102,128,153,.05);
+}
+blockquote p {
+  margin-bottom: 0.3em;
+  font-size: 1em;
+  line-height: 1.45;
+}
+blockquote ul:last-child,
+blockquote ol:last-child {
+  margin-bottom: 0;
+}
+ul,
+ol {
+  margin-bottom: 0.3em;
+}
+ul ul,
+ol ul,
+ul ol,
+ol ol {
+  margin-bottom: 0.3em;
+}
+
+/* Preview */
+.preview-panel {
+  background-color: #f8f8f8;
+}
diff --git a/public/md/themes/themes/github2/theme.css b/public/md/themes/themes/github2/theme.css
new file mode 100644
index 00000000..abb5819b
--- /dev/null
+++ b/public/md/themes/themes/github2/theme.css
@@ -0,0 +1,423 @@
+/*github mardown style*/
+#preview-contents {
+  font-family: Helvetica, arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.6;
+  background-color: white;
+}
+
+#preview-contents > *:first-child {
+  margin-top: 0 !important;
+}
+#preview-contents > *:last-child {
+  margin-bottom: 0 !important;
+}
+
+#preview-contents a {
+  color: #4183C4;
+}
+#preview-contents a.absent {
+  color: #cc0000;
+}
+#preview-contents a.anchor {
+  display: block;
+  padding-left: 30px;
+  margin-left: -30px;
+  cursor: pointer;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+}
+
+#preview-contents h1,
+#preview-contents h2,
+#preview-contents h3,
+#preview-contents h4,
+#preview-contents h5,
+#preview-contents h6 {
+  margin: 20px 0 10px;
+  padding: 0;
+  font-weight: bold;
+  -webkit-font-smoothing: antialiased;
+  cursor: text;
+  position: relative;
+}
+
+#preview-contents h1:hover a.anchor,
+#preview-contents h2:hover a.anchor,
+#preview-contents h3:hover a.anchor,
+#preview-contents h4:hover a.anchor,
+#preview-contents h5:hover a.anchor,
+#preview-contents h6:hover a.anchor {
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA09pVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoMTMuMCAyMDEyMDMwNS5tLjQxNSAyMDEyLzAzLzA1OjIxOjAwOjAwKSAgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OUM2NjlDQjI4ODBGMTFFMTg1ODlEODNERDJBRjUwQTQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OUM2NjlDQjM4ODBGMTFFMTg1ODlEODNERDJBRjUwQTQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5QzY2OUNCMDg4MEYxMUUxODU4OUQ4M0REMkFGNTBBNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5QzY2OUNCMTg4MEYxMUUxODU4OUQ4M0REMkFGNTBBNCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PsQhXeAAAABfSURBVHjaYvz//z8DJYCRUgMYQAbAMBQIAvEqkBQWXI6sHqwHiwG70TTBxGaiWwjCTGgOUgJiF1J8wMRAIUA34B4Q76HUBelAfJYSA0CuMIEaRP8wGIkGMA54bgQIMACAmkXJi0hKJQAAAABJRU5ErkJggg==) no-repeat 10px center;
+  text-decoration: none;
+}
+
+#preview-contents h1 tt,
+#preview-contents h1 code {
+  font-size: inherit;
+}
+
+#preview-contents h2 tt,
+#preview-contents h2 code {
+  font-size: inherit;
+}
+
+#preview-contents h3 tt,
+#preview-contents h3 code {
+  font-size: inherit;
+}
+
+#preview-contents h4 tt,
+#preview-contents h4 code {
+  font-size: inherit;
+}
+
+#preview-contents h5 tt,
+#preview-contents h5 code {
+  font-size: inherit;
+}
+
+#preview-contents h6 tt,
+#preview-contents h6 code {
+  font-size: inherit;
+}
+
+#preview-contents h1 {
+  font-size: 28px;
+  color: black;
+}
+
+#preview-contents h2 {
+  font-size: 24px;
+  border-bottom: 1px solid #cccccc;
+  color: black;
+}
+
+#preview-contents h3 {
+  font-size: 18px;
+}
+
+#preview-contents h4 {
+  font-size: 16px;
+}
+
+#preview-contents h5 {
+  font-size: 14px;
+}
+
+#preview-contents h6 {
+  color: #777777;
+  font-size: 14px;
+}
+
+#preview-contents p,
+#preview-contents blockquote,
+#preview-contents ul,
+#preview-contents ol,
+#preview-contents dl,
+#preview-contents li,
+#preview-contents table,
+#preview-contents pre {
+  margin: 15px 0;
+}
+
+#preview-contents hr {
+  background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAYAAACtBE5DAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OENDRjNBN0E2NTZBMTFFMEI3QjRBODM4NzJDMjlGNDgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OENDRjNBN0I2NTZBMTFFMEI3QjRBODM4NzJDMjlGNDgiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4Q0NGM0E3ODY1NkExMUUwQjdCNEE4Mzg3MkMyOUY0OCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4Q0NGM0E3OTY1NkExMUUwQjdCNEE4Mzg3MkMyOUY0OCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PqqezsUAAAAfSURBVHjaYmRABcYwBiM2QSA4y4hNEKYDQxAEAAIMAHNGAzhkPOlYAAAAAElFTkSuQmCC) repeat-x 0 0;
+  border: 0 none;
+  color: #cccccc;
+  height: 4px;
+  padding: 0;
+}
+
+#preview-contents > h2:first-child {
+  margin-top: 0;
+  padding-top: 0;
+}
+#preview-contents > h1:first-child {
+  margin-top: 0;
+  padding-top: 0;
+}
+#preview-contents > h1:first-child + h2 {
+  margin-top: 0;
+  padding-top: 0;
+}
+#preview-contents > h3:first-child,
+#preview-contents > h4:first-child,
+#preview-contents > h5:first-child,
+#preview-contents > h6:first-child {
+  margin-top: 0;
+  padding-top: 0;
+}
+
+#preview-contents a:first-child h1,
+#preview-contents a:first-child h2,
+#preview-contents a:first-child h3,
+#preview-contents a:first-child h4,
+#preview-contents a:first-child h5,
+#preview-contents a:first-child h6 {
+  margin-top: 0;
+  padding-top: 0;
+}
+
+#preview-contents h1 p,
+#preview-contents h2 p,
+#preview-contents h3 p,
+#preview-contents h4 p,
+#preview-contents h5 p,
+#preview-contents h6 p {
+  margin-top: 0;
+}
+
+#preview-contents li p.first {
+  display: inline-block;
+}
+#preview-contents li {
+  margin: 0;
+}
+#preview-contents ul,
+#preview-contents ol {
+  padding-left: 30px;
+}
+
+#preview-contents ul :first-child,
+#preview-contents ol :first-child {
+  margin-top: 0;
+}
+
+#preview-contents dl {
+  padding: 0;
+}
+#preview-contents dl dt {
+  font-size: 14px;
+  font-weight: bold;
+  font-style: italic;
+  padding: 0;
+  margin: 15px 0 5px;
+}
+
+#preview-contents dl dt:first-child {
+  padding: 0;
+}
+#preview-contents dl dt > :first-child {
+  margin-top: 0;
+}
+#preview-contents dl dt > :last-child {
+  margin-bottom: 0;
+}
+ #preview-contents dl dd {
+  margin: 0 0 15px;
+  padding: 0 15px;
+}
+#preview-contents dl dd > :first-child {
+  margin-top: 0;
+}
+#preview-contents dl dd > :last-child {
+  margin-bottom: 0;
+}
+
+#preview-contents blockquote {
+  border-left: 4px solid #dddddd;
+  padding: 0 15px;
+  color: #777777;
+}
+#preview-contents blockquote > :first-child {
+  margin-top: 0;
+}
+#preview-contents blockquote > :last-child {
+  margin-bottom: 0;
+}
+
+#preview-contents table {
+  padding: 0;border-collapse: collapse;
+}
+#preview-contents table tr {
+  border-top: 1px solid #cccccc;
+  background-color: white;
+  margin: 0;
+  padding: 0;
+}
+#preview-contents table tr:nth-child(2n) {
+  background-color: #f8f8f8;
+}
+#preview-contents table tr th {
+  font-weight: bold;
+  border: 1px solid #cccccc;
+  margin: 0;
+  padding: 6px 13px;
+}
+#preview-contents table tr td {
+  border: 1px solid #cccccc;
+  margin: 0;
+  padding: 6px 13px;
+}
+#preview-contents table tr th :first-child,
+#preview-contents table tr td :first-child {
+  margin-top: 0;
+}
+#preview-contents table tr th :last-child,
+#preview-contents table tr td :last-child {
+  margin-bottom: 0;
+}
+
+#preview-contents img {
+  max-width: 100%;
+}
+
+#preview-contents span.frame {
+  display: block;
+  overflow: hidden;
+}
+#preview-contents span.frame > span {
+  border: 1px solid #dddddd;
+  display: block;
+  float: left;
+  overflow: hidden;
+  margin: 13px 0 0;
+  padding: 7px;
+  width: auto;
+}
+#preview-contents span.frame span img {
+  display: block;
+  float: left;
+}
+#preview-contents span.frame span span {
+  clear: both;
+  color: #333333;
+  display: block;
+  padding: 5px 0 0;
+}
+#preview-contents span.align-center {
+  display: block;
+  overflow: hidden;
+  clear: both;
+}
+#preview-contents span.align-center > span {
+  display: block;
+  overflow: hidden;
+  margin: 13px auto 0;
+  text-align: center;
+}
+#preview-contents span.align-center span img {
+  margin: 0 auto;
+  text-align: center;
+}
+#preview-contents span.align-right {
+  display: block;
+  overflow: hidden;
+  clear: both;
+}
+#preview-contents span.align-right > span {
+  display: block;
+  overflow: hidden;
+  margin: 13px 0 0;
+  text-align: right;
+}
+#preview-contents span.align-right span img {
+  margin: 0;
+  text-align: right;
+}
+#preview-contents span.float-left {
+  display: block;
+  margin-right: 13px;
+  overflow: hidden;
+  float: left;
+}
+#preview-contents span.float-left span {
+  margin: 13px 0 0;
+}
+#preview-contents span.float-right {
+  display: block;
+  margin-left: 13px;
+  overflow: hidden;
+  float: right;
+}
+#preview-contents span.float-right > span {
+  display: block;
+  overflow: hidden;
+  margin: 13px auto 0;
+  text-align: right;
+}
+
+#preview-contents code,
+#preview-contents tt {
+  margin: 0 2px;
+  padding: 0 5px;
+  white-space: nowrap;
+  border: 1px solid #eaeaea;
+  background-color: #f8f8f8;
+  border-radius: 3px;
+}
+
+#preview-contents pre code {
+  margin: 0;
+  padding: 0;
+  white-space: pre;
+  border: none;
+  background: transparent;
+}
+
+#preview-contents .highlight pre {
+  background-color: #f8f8f8;
+  border: 1px solid #cccccc;
+  font-size: 13px;
+  line-height: 19px;
+  overflow: auto;
+  padding: 6px 10px;
+  border-radius: 3px;
+}
+
+#preview-contents pre {
+  background-color: #f8f8f8;
+  border: 1px solid #cccccc;
+  font-size: 13px;
+  line-height: 19px;
+  overflow: auto;
+  padding: 6px 10px;
+  border-radius: 3px;
+}
+
+#preview-contents pre code, pre tt {
+  background-color: transparent;
+  border: none;
+}
+
+/*correction for bootstrap*/
+#preview-contents pre,
+#preview-contents code {
+  border: 0;
+}
+
+#preview-contents ol {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+#preview-contents code {
+  font-weight: normal;
+}
+
+#preview-contents pre code {
+  font-size: 100%;
+}
+
+#preview-contents pre ol li code {
+  padding: 0;
+  margin: 0;
+  font-size: 100%;
+  word-break: normal;
+  white-space: pre;
+  background: transparent;
+  border: 0;
+}
+
+#preview-contents h1,
+#preview-contents h2,
+#preview-contents h3,
+#preview-contents h4,
+#preview-contents h5,
+#preview-contents h6 {
+  font-weight: 600 !important;
+}