Support multi-line tips and warns

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",

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>`
       }

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) {

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)

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