diff --git a/package-lock.json b/package-lock.json
index e65185abd..edbe89546 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3329,6 +3329,11 @@
         }
       }
     },
+    "he": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
+      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
+    },
     "hosted-git-info": {
       "version": "2.7.1",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.7.1.tgz",
diff --git a/package.json b/package.json
index 2b9c3d321..a42efbff5 100644
--- a/package.json
+++ b/package.json
@@ -42,6 +42,7 @@
     "postinstall": "opencollective postinstall"
   },
   "dependencies": {
+    "he": "^1.2.0",
     "marked": "^0.5.1",
     "medium-zoom": "^0.4.0",
     "opencollective": "^1.0.3",
diff --git a/src/core/render/compiler.js b/src/core/render/compiler.js
index 34c64ae72..a7180aa32 100644
--- a/src/core/render/compiler.js
+++ b/src/core/render/compiler.js
@@ -262,9 +262,9 @@ export class Compiler {
     origin.paragraph = renderer.paragraph = function (text) {
       let result
       if (/^!>/.test(text)) {
-        result = helperTpl('tip', text)
+        result = helperTpl('tip', text, /!>/)
       } else if (/^\?>/.test(text)) {
-        result = helperTpl('warn', text)
+        result = helperTpl('warn', text, /\?>/)
       } else {
         result = `<p>${text}</p>`
       }
diff --git a/src/core/render/tpl.js b/src/core/render/tpl.js
index 71f565238..1edc21bd9 100644
--- a/src/core/render/tpl.js
+++ b/src/core/render/tpl.js
@@ -1,4 +1,7 @@
 import {isMobile} from '../util/env'
+import marked from 'marked'
+import he from 'he'
+
 /**
  * Render github corner
  * @param  {Object} data
@@ -92,8 +95,11 @@ export function tree(toc, tpl = '<ul class="app-sub-sidebar">{inner}</ul>') {
   return tpl.replace('{inner}', innerHTML)
 }
 
-export function helper(className, content) {
-  return `<p class="${className}">${content.slice(5).trim()}</p>`
+export function helper(className, content, headingRegexp) {
+  const regexp = new RegExp('(^|\n)' + headingRegexp.source + ' ?', 'g')
+  const raw = he.decode(content).replace(regexp, '$1')
+  const html = marked(raw);
+  return `<div class="${className}">${html}</div>`
 }
 
 export function theme(color) {
diff --git a/src/themes/basic/_layout.styl b/src/themes/basic/_layout.styl
index f74d1ede8..2d2f7dfb7 100644
--- a/src/themes/basic/_layout.styl
+++ b/src/themes/basic/_layout.styl
@@ -347,7 +347,7 @@ body.sticky
   &:nth-child(2n)
     background-color #f8f8f8
 
-.markdown-section p.tip
+.markdown-section div.tip
   background-color #f8f8f8
   border-bottom-right-radius 2px
   border-left 4px solid #f66
@@ -372,17 +372,29 @@ body.sticky
     text-align center
     top 14px
 
+  &>:first-child
+    margin-top: 0;
+
+  &>:last-child
+    margin-bottom: 0;
+
   code
     background-color #efefef
 
   em
     color $color-text
 
-.markdown-section p.warn
+.markdown-section div.warn
   background rgba($color-primary, 0.1)
   border-radius 2px
   padding 1rem
 
+  &>:first-child
+    margin-top: 0;
+
+  &>:last-child
+    margin-bottom: 0;
+
 body.close
   .sidebar
     transform translateX(- $sidebar-width)
diff --git a/src/themes/dark.styl b/src/themes/dark.styl
index 02ca63017..bb3d88434 100644
--- a/src/themes/dark.styl
+++ b/src/themes/dark.styl
@@ -215,7 +215,7 @@ pre::after
   text-align right
   top 0
 
-.markdown-section p.tip
+.markdown-section div.tip
   background-color #282828
   color #657b83