fix heighlight and code issues

vue.css

@@ -3,6 +3,69 @@
     --control-text-color: #777;
 }
 
+/* cyrillic-ext */
+@font-face {
+    font-family: 'Roboto Mono';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Roboto Mono'), local('RobotoMono-Regular'), url('vue/L0x5DF4xlVMF-BfR8bXMIjhGq3-cXbKDO1w.woff2') format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* cyrillic */
+@font-face {
+    font-family: 'Roboto Mono';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Roboto Mono'), local('RobotoMono-Regular'), url('vue/L0x5DF4xlVMF-BfR8bXMIjhPq3-cXbKDO1w.woff2') format('woff2');
+    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* greek-ext */
+@font-face {
+    font-family: 'Roboto Mono';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Roboto Mono'), local('RobotoMono-Regular'), url('vue/L0x5DF4xlVMF-BfR8bXMIjhHq3-cXbKDO1w.woff2') format('woff2');
+    unicode-range: U+1F00-1FFF;
+}
+
+/* greek */
+@font-face {
+    font-family: 'Roboto Mono';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Roboto Mono'), local('RobotoMono-Regular'), url('vue/L0x5DF4xlVMF-BfR8bXMIjhIq3-cXbKDO1w.woff2') format('woff2');
+    unicode-range: U+0370-03FF;
+}
+
+/* vietnamese */
+@font-face {
+    font-family: 'Roboto Mono';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Roboto Mono'), local('RobotoMono-Regular'), url('vue/L0x5DF4xlVMF-BfR8bXMIjhEq3-cXbKDO1w.woff2') format('woff2');
+    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
+}
+
+/* latin-ext */
+@font-face {
+    font-family: 'Roboto Mono';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Roboto Mono'), local('RobotoMono-Regular'), url('vue/L0x5DF4xlVMF-BfR8bXMIjhFq3-cXbKDO1w.woff2') format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+    font-family: 'Roboto Mono';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Roboto Mono'), local('RobotoMono-Regular'), url('vue/L0x5DF4xlVMF-BfR8bXMIjhLq3-cXbKD.woff2') format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
 /* cyrillic-ext */
 @font-face {
     font-family: 'Source Sans Pro';
@@ -463,12 +526,10 @@ table tr td:last-child {
 
 #write strong {
     padding: 0px 1px 0 1px;
-    font-size: 1.01rem;
 }
 
 #write em {
     padding: 0px 5px 0 2px;
-    font-size: 1.01rem;
 }
 
 #write table thead th {
@@ -484,9 +545,10 @@ table tr td:last-child {
     -webkit-font-smoothing: initial;
     margin: 0.8rem 0 !important;
     padding: 0.3rem 0rem !important;
+    line-height: 1.43rem;
     background-color: #F8F8F8 !important;
     border-radius: 2px;
-    font-family: Consolas, Source Sans Pro, Monaco, courier, monospace !important;
+    font-family: Roboto Mono, Source Sans Pro, Monaco, courier, monospace !important;
     font-size: 0.85rem;
     word-wrap: normal;
 }
@@ -499,8 +561,8 @@ table tr td:last-child {
     margin: 0 2px;
     padding: 2px 4px;
     border-radius: 2px;
-    font-family: Consolas, Source Sans Pro, Monaco, courier, monospace !important;
+    font-family: Source Sans Pro, Roboto Mono, Monaco, courier, monospace !important;
-    font-size: 0.85rem;
+    font-size: 0.92rem;
     color: #e96900;
     background-color: #f8f8f8;
 }
@@ -510,14 +572,14 @@ table tr td:last-child {
     color: #e96900;
 }
 
+/* heighlight. */
 #write mark {
-    background-color: rgba(66, 185, 131, .1);
+    background-color:#EBFFEB;
     border-radius: 2px;
     padding: 2px 4px;
     margin: 0 2px;
-    color: #000;
+    color: #222;
     font-weight: 500;
-    white-space: nowrap;
 }
 
 #write del {