diff --git a/public/js/lib/editor/markdown-lint/index.js b/public/js/lib/editor/markdown-lint/index.js
index ea4bd778..7dd020cb 100644
--- a/public/js/lib/editor/markdown-lint/index.js
+++ b/public/js/lib/editor/markdown-lint/index.js
@@ -1,6 +1,6 @@
 import markdownlint from 'markdownlint'
 
-// load lint plugin explicitly
+// load CM lint plugin explicitly
 import 'script-loader!@hackmd/codemirror/addon/lint/lint'
 import './lint.css'
 
@@ -21,7 +21,7 @@ import './lint.css'
       }
 
       return {
-        message: error.ruleDescription,
+        messageHTML: `${error.ruleNames.join('/')}: ${error.ruleDescription}`,
         severity: 'error',
         from: CodeMirror.Pos(lineNumber, start),
         to: CodeMirror.Pos(lineNumber, end)
diff --git a/public/js/lib/editor/markdown-lint/lint.css b/public/js/lib/editor/markdown-lint/lint.css
index a8707173..0244eae2 100644
--- a/public/js/lib/editor/markdown-lint/lint.css
+++ b/public/js/lib/editor/markdown-lint/lint.css
@@ -4,11 +4,11 @@
 }
 
 .CodeMirror-lint-tooltip {
-  background-color: #ffd;
-  border: 1px solid black;
-  border-radius: 4px 4px 4px 4px;
-  color: black;
-  font-family: monospace;
+  background-color: #333333;
+  border: 1px solid #eeeeee;
+  border-radius: 4px;
+  color: white;
+  font-family: "Source Code Pro", Consolas, monaco, monospace;
   font-size: 10pt;
   overflow: hidden;
   padding: 2px 5px;
@@ -32,7 +32,6 @@
 
 .CodeMirror-lint-mark-error {
   background-image: url(/images/lint/mark-error.png);
-  ;
 }
 
 .CodeMirror-lint-mark-warning {
@@ -52,9 +51,10 @@
 }
 
 .CodeMirror-lint-message-error, .CodeMirror-lint-message-warning {
-  padding-left: 18px;
+  padding-left: 20px;
   background-position: top left;
   background-repeat: no-repeat;
+  background-position-y: 2px;
 }
 
 .CodeMirror-lint-marker-error, .CodeMirror-lint-message-error {