主题优化

node_modules/note.js

@@ -17,7 +17,7 @@ var Api = null; // require('api')
 var Tag = null;
 
 function log(o) {
-	console.log(o);
+	console.trace(o);
 }
 
 // Web.alertWeb('alert(process.type);');

note.html

@@ -17,14 +17,14 @@
 <link href="public/css/font-awesome-4.2.0/css/font-awesome.css" rel="stylesheet" />
 <link href="public/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
 
+<!-- mdeditor -->
+<link href="public/md/themes/default.css" rel="stylesheet" />
+
 <!-- theme -->
 <link rel="stylesheet" href="public/themes/default.css" type="text/css"/>
 <link rel="stylesheet" href="public/themes/presentation.css" type="text/css" disabled id="themePresentation"/>
 <link rel="stylesheet" href="public/themes/writting.css" type="text/css" disabled id="themeWritting"/>
 
-<!-- mdeditor -->
-<link href="public/md/themes/default.css" rel="stylesheet" />
-
 <!-- for change theme -->
 <link rel="stylesheet" href="" type="text/css" id="theme"/>
 
@@ -414,7 +414,7 @@ function log(o) {
                                   <li class="wmd-button-group3 btn-group"></li>
                               </ul>
                               <ul class="nav left-buttons">
-                                  <li class="wmd-button-group5 btn-group"></li>
+                                  <li class="wmd-button-group4 btn-group"></li>
                               </ul>
                               <!-- 帮助 -->
                                <ul class="nav left-buttons">
@@ -659,7 +659,7 @@ window.debug = false;
 <!-- 导入插件 执行 -->
 <script src="public/js/main.js"></script>
 <!-- markdown editor -->
-<script src="public/md/main.min.js"></script>
+<script src="public/md/main-v2.min.js"></script>
 <!-- extra额外 -->
 <script src="public/js/dec/main.js"></script>
 

public/js/app/page.js

@@ -223,11 +223,17 @@ var Resize = {
 	},
 
 	// mdeditor
+	resizeMDInterval: null,
 	resizeMdColumns: function(event) {
 		var self = this;
 		if (self.mdLineMove) {
 			var mdEditorWidth = event.clientX - self.leftColumn.offset().left; // self.leftNotebook.width() - self.noteList.width();
 			self.setMdColumnWidth(mdEditorWidth);
+
+			clearInterval(self.resizeMDInterval);
+			self.resizeMDInterval = setTimeout(function () {
+				MD.aceEditor && MD.aceEditor.resize();
+			}, 50);
 		}
 	},
 
@@ -2134,3 +2140,8 @@ $(function() {
 	initUploadImage();
 	Writting.init();
 });
+
+// markdown editor v2
+LEA.canSetMDModeFromStorage = function () {
+	return true;
+}

public/md/themes/animation.less

@@ -0,0 +1,221 @@
+@-webkit-keyframes dropdown {
+  0% {
+    margin-top: -25px;
+    opacity: 0;
+  }
+  90% {
+    margin-top: 2px;
+  }
+  100% {
+    margin-top: 0;
+    opacity: 1;
+  }
+}
+@-moz-keyframes dropdown {
+  0% {
+    margin-top: -25px;
+    opacity: 0;
+  }
+  90% {
+    margin-top: 2px;
+  }
+  100% {
+    margin-top: 0;
+    opacity: 1;
+  }
+}
+@-ms-keyframes dropdown {
+  0% {
+    margin-top: -25px;
+    opacity: 0;
+  }
+  90% {
+    margin-top: 2px;
+  }
+  100% {
+    margin-top: 0;
+    opacity: 1;
+  }
+}
+@keyframes dropdown {
+  0% {
+    margin-top: -25px;
+    opacity: 0;
+  }
+  90% {
+    margin-top: 2px;
+  }
+  100% {
+    margin-top: 0;
+    opacity: 1;
+  }
+}
+@-webkit-keyframes pulldown {
+  0% {
+    top: 0;
+    opacity: 0;
+  }
+  90% {
+    top: 90%;
+  }
+  100% {
+    top: 100%;
+    opacity: 1;
+  }
+}
+@-moz-keyframes pulldown {
+  0% {
+    top: 0;
+    opacity: 0;
+  }
+  90% {
+    top: 90%;
+  }
+  100% {
+    top: 100%;
+    opacity: 1;
+  }
+}
+@-ms-keyframes pulldown {
+  0% {
+    top: 0;
+    opacity: 0;
+  }
+  90% {
+    top: 90%;
+  }
+  100% {
+    top: 100%;
+    opacity: 1;
+  }
+}
+@keyframes pulldown {
+  0% {
+    top: 0;
+    opacity: 0;
+  }
+  90% {
+    top: 90%;
+  }
+  100% {
+    top: 100%;
+    opacity: 1;
+  }
+}
+
+
+@-webkit-keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@-moz-keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@-o-keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+
+@-webkit-keyframes fadeInUp {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(20px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+  }
+}
+
+@-moz-keyframes fadeInUp {
+  0% {
+    opacity: 0;
+    -moz-transform: translateY(20px);
+  }
+
+  100% {
+    opacity: 1;
+    -moz-transform: translateY(0);
+  }
+}
+
+@-o-keyframes fadeInUp {
+  0% {
+    opacity: 0;
+    -o-transform: translateY(20px);
+  }
+
+  100% {
+    opacity: 1;
+    -o-transform: translateY(0);
+  }
+}
+
+@keyframes fadeInUp {
+  0% {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animated {
+  -webkit-animation-fill-mode: both;
+  -moz-animation-fill-mode: both;
+  -ms-animation-fill-mode: both;
+  -o-animation-fill-mode: both;
+  animation-fill-mode: both;
+  -webkit-animation-duration: 0.5s;
+  -moz-animation-duration: 0.5s;
+  -ms-animation-duration: 0.5s;
+  -o-animation-duration: 0.5s;
+  animation-duration: 0.5s;
+}
+
+.fadeIn {
+  -webkit-animation-name: fadeIn;
+  -moz-animation-name: fadeIn;
+  -o-animation-name: fadeIn;
+  animation-name: fadeIn;
+}
+
+.fadeInUp {
+  -webkit-animation-name: fadeInUp;
+  -moz-animation-name: fadeInUp;
+  -o-animation-name: fadeInUp;
+  animation-name: fadeInUp;
+}

public/md/themes/default.css

@@ -1407,7 +1407,8 @@ a.input-group-addon {
 .preview-container {
   position: absolute;
   overflow: auto;
-  right: 10px;
+  right: 0;
+  padding-right: 10px;
   left: 30px;
 }
 .wmd-prompt-background {

public/themes/basic.less

@@ -1,4 +1,7 @@
+@import 'includes/animation.less';
+
 @fontFamily: 'Open Sans', 'Helvetica Neue',Arial,'Hiragino Sans GB','Microsoft YaHei','WenQuanYi Micro Hei', "WenQuanYi Micro Hei", "Droid Sans Mono", "Droid Sans Fallback",sans-serif;
+@aceFontFamily: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', "Microsoft YaHei", "微软雅黑";
 
 // font
 @font-face {
@@ -382,36 +385,13 @@ h1, h2, h3 {
 
 // 动画
 .open > .dropdown-menu, .dropdown-submenu:hover > .dropdown-menu {
-  opacity: 1;
+    visibility: visible;
-  transform: scale(1, 1); 
+    -webkit-animation: pulldown .2s;
-  -webkit-transform: scale(1, 1);
+    animation: pulldown .2s;
-  -moz-transform: scale(1, 1);
-  -o-transform: scale(1, 1);
 }
 .dropdown-menu {
-  opacity: 0;
+    visibility: hidden;
-  display: block;
+    display: block;
-  
-  -webkit-transform: scale(0, 0);
-  -webkit-transform-origin: top;
-  -webkit-animation-fill-mode: forwards;  
-  -webkit-transition: all 0.2s cubic-bezier(0.34, 1.21, 0.4, 1);
-  
-  -o-transform: scale(0, 0);
-  -o-transform-origin: top;
-  -o-animation-fill-mode: forwards;  
-  -o-transition: all 0.2s cubic-bezier(0.34, 1.21, 0.4, 1);
-  
-  -moz-transform: scale(0, 0);
-  -moz-transform-origin: top;
-  -moz-animation-fill-mode: forwards;  
-  -moz-transition: all 0.2s cubic-bezier(0.34, 1.21, 0.4, 1);
-  
-  transform: scale(0, 0);
-  transform-origin: top;
-  animation-fill-mode: forwards; 
-  transition: all 0.2s cubic-bezier(0.34, 1.21, 0.4, 1);
-  
 }
 
 .dropdown-list {

public/themes/default.css

@@ -1,3 +1,203 @@
+@-webkit-keyframes dropdown {
+  0% {
+    margin-top: -25px;
+    opacity: 0;
+  }
+  90% {
+    margin-top: 2px;
+  }
+  100% {
+    margin-top: 0;
+    opacity: 1;
+  }
+}
+@-moz-keyframes dropdown {
+  0% {
+    margin-top: -25px;
+    opacity: 0;
+  }
+  90% {
+    margin-top: 2px;
+  }
+  100% {
+    margin-top: 0;
+    opacity: 1;
+  }
+}
+@-ms-keyframes dropdown {
+  0% {
+    margin-top: -25px;
+    opacity: 0;
+  }
+  90% {
+    margin-top: 2px;
+  }
+  100% {
+    margin-top: 0;
+    opacity: 1;
+  }
+}
+@keyframes dropdown {
+  0% {
+    margin-top: -25px;
+    opacity: 0;
+  }
+  90% {
+    margin-top: 2px;
+  }
+  100% {
+    margin-top: 0;
+    opacity: 1;
+  }
+}
+@-webkit-keyframes pulldown {
+  0% {
+    top: 0;
+    opacity: 0;
+  }
+  90% {
+    top: 90%;
+  }
+  100% {
+    top: 100%;
+    opacity: 1;
+  }
+}
+@-moz-keyframes pulldown {
+  0% {
+    top: 0;
+    opacity: 0;
+  }
+  90% {
+    top: 90%;
+  }
+  100% {
+    top: 100%;
+    opacity: 1;
+  }
+}
+@-ms-keyframes pulldown {
+  0% {
+    top: 0;
+    opacity: 0;
+  }
+  90% {
+    top: 90%;
+  }
+  100% {
+    top: 100%;
+    opacity: 1;
+  }
+}
+@keyframes pulldown {
+  0% {
+    top: 0;
+    opacity: 0;
+  }
+  90% {
+    top: 90%;
+  }
+  100% {
+    top: 100%;
+    opacity: 1;
+  }
+}
+@-webkit-keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@-moz-keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@-o-keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@-webkit-keyframes fadeInUp {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(20px);
+  }
+  100% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+  }
+}
+@-moz-keyframes fadeInUp {
+  0% {
+    opacity: 0;
+    -moz-transform: translateY(20px);
+  }
+  100% {
+    opacity: 1;
+    -moz-transform: translateY(0);
+  }
+}
+@-o-keyframes fadeInUp {
+  0% {
+    opacity: 0;
+    -o-transform: translateY(20px);
+  }
+  100% {
+    opacity: 1;
+    -o-transform: translateY(0);
+  }
+}
+@keyframes fadeInUp {
+  0% {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.animated {
+  -webkit-animation-fill-mode: both;
+  -moz-animation-fill-mode: both;
+  -ms-animation-fill-mode: both;
+  -o-animation-fill-mode: both;
+  animation-fill-mode: both;
+  -webkit-animation-duration: 0.5s;
+  -moz-animation-duration: 0.5s;
+  -ms-animation-duration: 0.5s;
+  -o-animation-duration: 0.5s;
+  animation-duration: 0.5s;
+}
+.fadeIn {
+  -webkit-animation-name: fadeIn;
+  -moz-animation-name: fadeIn;
+  -o-animation-name: fadeIn;
+  animation-name: fadeIn;
+}
+.fadeInUp {
+  -webkit-animation-name: fadeInUp;
+  -moz-animation-name: fadeInUp;
+  -o-animation-name: fadeInUp;
+  animation-name: fadeInUp;
+}
 @font-face {
   font-family: 'Open Sans';
   font-style: normal;
@@ -359,31 +559,13 @@ h3 {
 }
 .open > .dropdown-menu,
 .dropdown-submenu:hover > .dropdown-menu {
-  opacity: 1;
+  visibility: visible;
-  transform: scale(1, 1);
+  -webkit-animation: pulldown .2s;
-  -webkit-transform: scale(1, 1);
+  animation: pulldown .2s;
-  -moz-transform: scale(1, 1);
-  -o-transform: scale(1, 1);
 }
 .dropdown-menu {
-  opacity: 0;
+  visibility: hidden;
   display: block;
-  -webkit-transform: scale(0, 0);
-  -webkit-transform-origin: top;
-  -webkit-animation-fill-mode: forwards;
-  -webkit-transition: all 0.2s cubic-bezier(0.34, 1.21, 0.4, 1);
-  -o-transform: scale(0, 0);
-  -o-transform-origin: top;
-  -o-animation-fill-mode: forwards;
-  -o-transition: all 0.2s cubic-bezier(0.34, 1.21, 0.4, 1);
-  -moz-transform: scale(0, 0);
-  -moz-transform-origin: top;
-  -moz-animation-fill-mode: forwards;
-  -moz-transition: all 0.2s cubic-bezier(0.34, 1.21, 0.4, 1);
-  transform: scale(0, 0);
-  transform-origin: top;
-  animation-fill-mode: forwards;
-  transition: all 0.2s cubic-bezier(0.34, 1.21, 0.4, 1);
 }
 .dropdown-list {
   width: 530px;
@@ -2714,3 +2896,131 @@ body,
   padding-left: 10px;
   overflow-y: auto;
 }
+#mdEditor .navbar-default,
+#wmd-button-bar {
+  overflow: visible;
+}
+.wmd-mode {
+  min-width: 120px;
+  left: 50%;
+  margin-left: -60px !important;
+}
+.wmd-mode:before {
+  right: auto;
+  left: 40%;
+}
+#md-keyboard-mode {
+  color: #8E8E8E;
+  font-size: 12px;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', "Microsoft YaHei", "微软雅黑";
+  font-style: normal;
+}
+#wmd-input .ace_searchbtn_close {
+  margin: 0px;
+}
+#wmd-input .ace_content {
+  padding-top: 5px;
+}
+#wmd-input.ace_editor {
+  color: #2c3e50;
+}
+#wmd-input.ace-tm {
+  background-color: #ffffff;
+}
+#wmd-input.ace-tm .ace_text-input {
+  box-sizing: initial;
+}
+#wmd-input.ace-tm .ace_marker-layer .ace_active-line {
+  background-color: rgba(89, 128, 166, 0.05);
+}
+#wmd-input.ace-tm .ace_cursor {
+  color: #243342;
+}
+#wmd-input.ace-tm .ace_print-margin {
+  background: none;
+}
+#wmd-input.ace-tm .ace_markup.ace_heading {
+  color: #000000;
+  font-weight: bold;
+}
+#wmd-input.ace-tm .ace_markup.ace_list {
+  color: #576c82;
+}
+#wmd-input.ace-tm .ace_constant.ace_language {
+  color: rgba(87, 108, 130, 0.6);
+  font-weight: normal;
+}
+#wmd-input.ace-tm .ace_meta.ace_tag {
+  color: #384654;
+  font-style: italic;
+  font-weight: bold;
+  background-color: rgba(0, 0, 0, 0.04);
+}
+#wmd-input.ace-tm .ace_keyword.ace_operator {
+  color: #384654;
+  background-color: transparent;
+}
+#wmd-input.ace-tm .ace_storage,
+#wmd-input.ace-tm .ace_keyword {
+  color: #384654;
+  background-color: rgba(0, 0, 0, 0.04);
+  font-weight: bold;
+}
+#wmd-input.ace-tm .ace_entity.ace_name.ace_function {
+  color: #1a2026;
+  font-weight: bold;
+}
+#wmd-input.ace-tm .ace_string {
+  color: #384654;
+  font-style: italic;
+  background-color: rgba(0, 0, 0, 0.04);
+}
+#wmd-input.ace-tm .ace_invalid {
+  color: inherit;
+  background: inherit;
+}
+#wmd-input.ace-tm .ace_strong {
+  color: #384654;
+  font-weight: bold;
+}
+#wmd-input.ace-tm .ace_emphasis {
+  color: #1a2026;
+  font-style: italic;
+}
+#wmd-input.ace-tm .ace_blockquote {
+  color: #003873;
+}
+#wmd-input.ace-tm .ace_code {
+  color: #1a2026;
+  background-color: rgba(0, 0, 0, 0.04);
+}
+#wmd-input.ace-tm .ace_code_block {
+  color: #1a2026;
+}
+#wmd-input.ace-tm .ace_link {
+  color: #576c82;
+  background-color: rgba(0, 0, 0, 0.04);
+}
+#wmd-input.ace-tm .ace_description {
+  color: #576c82;
+}
+#wmd-input.ace-tm .ace_constant {
+  color: #384654;
+}
+#wmd-input.ace-tm .ace_comment {
+  color: rgba(87, 108, 130, 0.6);
+  font-style: italic;
+}
+#wmd-input.ace-tm .ace_marker-layer .misspelled {
+  position: absolute;
+  z-index: -2;
+  border-bottom: 1px dotted red;
+  margin-bottom: -1px;
+}
+#wmd-input.normal-mode .ace_cursor {
+  background-color: #003A92;
+}
+#wmd-input.emacs-mode .ace_cursor {
+  border: 2px rgba(101, 189, 119, 0.8) solid !important;
+  background-color: #65bd77;
+}

public/themes/default.less

@@ -907,4 +907,6 @@ html, body, #page, #pageInner, #noteList, #notebook, #leftNotebook {
             }
         }
     }
-}
+}
+
+@import 'includes/markdown.less';

public/themes/includes/animation.less

@@ -0,0 +1,221 @@
+@-webkit-keyframes dropdown {
+  0% {
+    margin-top: -25px;
+    opacity: 0;
+  }
+  90% {
+    margin-top: 2px;
+  }
+  100% {
+    margin-top: 0;
+    opacity: 1;
+  }
+}
+@-moz-keyframes dropdown {
+  0% {
+    margin-top: -25px;
+    opacity: 0;
+  }
+  90% {
+    margin-top: 2px;
+  }
+  100% {
+    margin-top: 0;
+    opacity: 1;
+  }
+}
+@-ms-keyframes dropdown {
+  0% {
+    margin-top: -25px;
+    opacity: 0;
+  }
+  90% {
+    margin-top: 2px;
+  }
+  100% {
+    margin-top: 0;
+    opacity: 1;
+  }
+}
+@keyframes dropdown {
+  0% {
+    margin-top: -25px;
+    opacity: 0;
+  }
+  90% {
+    margin-top: 2px;
+  }
+  100% {
+    margin-top: 0;
+    opacity: 1;
+  }
+}
+@-webkit-keyframes pulldown {
+  0% {
+    top: 0;
+    opacity: 0;
+  }
+  90% {
+    top: 90%;
+  }
+  100% {
+    top: 100%;
+    opacity: 1;
+  }
+}
+@-moz-keyframes pulldown {
+  0% {
+    top: 0;
+    opacity: 0;
+  }
+  90% {
+    top: 90%;
+  }
+  100% {
+    top: 100%;
+    opacity: 1;
+  }
+}
+@-ms-keyframes pulldown {
+  0% {
+    top: 0;
+    opacity: 0;
+  }
+  90% {
+    top: 90%;
+  }
+  100% {
+    top: 100%;
+    opacity: 1;
+  }
+}
+@keyframes pulldown {
+  0% {
+    top: 0;
+    opacity: 0;
+  }
+  90% {
+    top: 90%;
+  }
+  100% {
+    top: 100%;
+    opacity: 1;
+  }
+}
+
+
+@-webkit-keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@-moz-keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@-o-keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+
+@-webkit-keyframes fadeInUp {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(20px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+  }
+}
+
+@-moz-keyframes fadeInUp {
+  0% {
+    opacity: 0;
+    -moz-transform: translateY(20px);
+  }
+
+  100% {
+    opacity: 1;
+    -moz-transform: translateY(0);
+  }
+}
+
+@-o-keyframes fadeInUp {
+  0% {
+    opacity: 0;
+    -o-transform: translateY(20px);
+  }
+
+  100% {
+    opacity: 1;
+    -o-transform: translateY(0);
+  }
+}
+
+@keyframes fadeInUp {
+  0% {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animated {
+  -webkit-animation-fill-mode: both;
+  -moz-animation-fill-mode: both;
+  -ms-animation-fill-mode: both;
+  -o-animation-fill-mode: both;
+  animation-fill-mode: both;
+  -webkit-animation-duration: 0.5s;
+  -moz-animation-duration: 0.5s;
+  -ms-animation-duration: 0.5s;
+  -o-animation-duration: 0.5s;
+  animation-duration: 0.5s;
+}
+
+.fadeIn {
+  -webkit-animation-name: fadeIn;
+  -moz-animation-name: fadeIn;
+  -o-animation-name: fadeIn;
+  animation-name: fadeIn;
+}
+
+.fadeInUp {
+  -webkit-animation-name: fadeInUp;
+  -moz-animation-name: fadeInUp;
+  -o-animation-name: fadeInUp;
+  animation-name: fadeInUp;
+}

public/themes/includes/markdown.less

@@ -0,0 +1,146 @@
+
+// 为了让编辑模式下拉显示
+#mdEditor .navbar-default,
+#wmd-button-bar {
+  overflow: visible;
+}
+// 编辑模式下拉
+.wmd-mode {
+  min-width: 120px;
+  left: 50%;
+  margin-left: -60px !important; // 为什么要!important, 因为writting模式下要用
+  // 小箭头
+  &:before {
+    right: auto;
+    left: 40%;
+  }
+}
+#md-keyboard-mode {
+    color: #8E8E8E;
+    font-size: 12px;
+    font-family: @aceFontFamily;
+    font-style: normal;
+}
+
+// markdown editor ace
+@mdAceTextColor: #2C3E50; // #04294E; // #384654;
+@mdAceHeadingColor: #000; // 1a2026
+@mdAceBlockquoteColor: #003873;
+@mdAceCursorColor: #243342;
+
+#wmd-input {
+  .ace_searchbtn_close {
+      margin: 0px;
+  }
+  .ace_content {
+    padding-top: 5px;
+  }
+  &.ace_editor {
+    color: @mdAceTextColor;
+  }
+  &.ace-tm {
+    background-color: #ffffff;
+  }
+  &.ace-tm .ace_text-input {
+    box-sizing: initial;
+  }
+  &.ace-tm .ace_marker-layer .ace_active-line {
+    background-color: rgba(89, 128, 166, 0.05);
+  }
+  &.ace-tm .ace_cursor {
+    color: @mdAceCursorColor;
+  }
+  // 左侧的线
+  &.ace-tm .ace_print-margin {
+    background: none;
+    // background-color: rgba(89, 128, 166, 0.05);
+  }
+  &.ace-tm .ace_markup.ace_heading {
+    color: @mdAceHeadingColor;
+    font-weight: bold;
+  }
+  &.ace-tm .ace_markup.ace_list {
+    color: #576c82;
+  }
+  &.ace-tm .ace_constant.ace_language {
+    color: rgba(87, 108, 130, 0.6);
+    font-weight: normal;
+  }
+  &.ace-tm .ace_meta.ace_tag {
+    color: #384654;
+    font-style: italic;
+    font-weight: bold;
+    background-color: rgba(0, 0, 0, 0.04);
+  }
+  &.ace-tm .ace_keyword.ace_operator {
+    color: #384654;
+    background-color: transparent;
+  }
+  &.ace-tm .ace_storage,
+  &.ace-tm .ace_keyword {
+    color: #384654;
+    background-color: rgba(0, 0, 0, 0.04);
+    font-weight: bold;
+  }
+  &.ace-tm .ace_entity.ace_name.ace_function {
+    color: #1a2026;
+    font-weight: bold;
+  }
+  &.ace-tm .ace_string {
+    color: #384654;
+    font-style: italic;
+    background-color: rgba(0, 0, 0, 0.04);
+  }
+  &.ace-tm .ace_invalid {
+    color: inherit;
+    background: inherit;
+  }
+  &.ace-tm .ace_strong {
+    color: #384654;
+    font-weight: bold;
+  }
+  &.ace-tm .ace_emphasis {
+    color: #1a2026;
+    font-style: italic;
+  }
+  &.ace-tm .ace_blockquote {
+    color: @mdAceBlockquoteColor;
+  }
+  &.ace-tm .ace_code {
+    color: #1a2026;
+    background-color: rgba(0, 0, 0, 0.04);
+  }
+  &.ace-tm .ace_code_block {
+    color: #1a2026;
+  }
+  &.ace-tm .ace_link {
+    color: #576c82;
+    background-color: rgba(0, 0, 0, 0.04);
+  }
+  &.ace-tm .ace_description {
+    color: #576c82;
+  }
+  &.ace-tm .ace_constant {
+    color: #384654;
+  }
+  &.ace-tm .ace_comment {
+    color: rgba(87, 108, 130, 0.6);
+    font-style: italic;
+  }
+  &.ace-tm .ace_marker-layer .misspelled {
+    position: absolute;
+    z-index: -2;
+    border-bottom: 1px dotted red;
+    margin-bottom: -1px;
+  }
+
+  // vim cursor
+  &.normal-mode .ace_cursor {
+      background-color: #003A92;
+  }
+  // emacs cursor
+  &.emacs-mode .ace_cursor {
+    border: 2px rgba(101, 189, 119, 0.8) solid !important;
+    background-color: rgb(101, 189, 119, 0.9);
+  }
+}

public/themes/writting.css

@@ -91,11 +91,15 @@ body.writting #editor.all-tool #editorContentWrap {
 }
 #mdEditor .navbar-default,
 #wmd-button-bar {
-  height: 40px !important;
+  height: 44px !important;
+}
+#mdEditor .navbar-default,
+#wmd-button-bar {
+  overflow: visible;
 }
 #mdEditor .extension-preview-buttons,
 #mdEditor .layout-wrapper-l3 {
-  top: 40px !important;
+  top: 50px !important;
 }
 #left-column,
 #right-column,
@@ -146,7 +150,7 @@ body.writting #editor.all-tool #editorContentWrap {
   width: 80px;
 }
 .mce-menubtn.mce-btn-small span {
-  font-size: 16px;
+  font-size: 12px;
 }
 #wmd-input > .editor-content,
 .preview-container {

public/themes/writting.less

@@ -117,11 +117,15 @@ body.writting {
 }
 #mdEditor .navbar-default, 
 #wmd-button-bar {
-  height: 40px !important;
+  height: 44px !important;
+}
+#mdEditor .navbar-default,
+#wmd-button-bar {
+  overflow: visible;
 }
 #mdEditor {
   .extension-preview-buttons, .layout-wrapper-l3 {
-    top: 40px !important;
+    top: 50px !important;
   }
 }
 #left-column, #right-column, #mdSplitter {
@@ -174,7 +178,7 @@ body.writting {
   width: 80px;
 }
 .mce-menubtn.mce-btn-small span {
-  font-size: 16px;
+  font-size: 12px;
 }
 
 #wmd-input > .editor-content, .preview-container {