feat(compiler): new helpers

docs/helpers.md

@@ -7,24 +7,72 @@ docsify extends Markdown syntax to make your documents more readable.
 Important content like:
 
 ```markdown
-!> **Time** is money, my friend!
+> [!] **Time** is money, my friend!
 ```
 
 is rendered as:
 
-!> **Time** is money, my friend!
+> [!] **Time** is money, my friend!
 
 ## General tips
 
 General tips like:
 
 ```markdown
-?> _TODO_ unit test
+> [?] _TODO_ unit test
 ```
 
 are rendered as:
 
-?> _TODO_ unit test
+> [?] _TODO_ unit test
+
+## More tips
+
+```markdown
+> [x] bad
+
+> [v] good
+```
+
+> [x] bad
+
+> [v] good
+
+## Details
+
+````markdown
+> [details] Sample code
+>
+> js code
+>
+> ```javascript
+> console.log("foo");
+> ```
+
+> [details:open] Sample code open
+>
+> js code
+>
+> ```javascript
+> console.log("foo");
+> ```
+````
+
+> [details] Sample code
+>
+> js code
+>
+> ```javascript
+> console.log("foo");
+> ```
+
+> [details:open] Sample code open
+>
+> js code
+>
+> ```javascript
+> console.log("foo");
+> ```
 
 ## Ignore to compile link
 
@@ -39,13 +87,13 @@ It will be compiled to `<a href="/#/demo/">link</a>` and will be loaded `/demo/R
 Now you can do that
 
 ```md
-[link](/demo/ ':ignore')
+[link](/demo/ ":ignore")
 ```
 
 You will get `<a href="/demo/">link</a>`html. Do not worry, you can still set title for link.
 
 ```md
-[link](/demo/ ':ignore title')
+[link](/demo/ ":ignore title")
 
 <a href="/demo/" title="title">link</a>
 ```
@@ -53,14 +101,14 @@ You will get `<a href="/demo/">link</a>`html. Do not worry, you can still set ti
 ## Set target attribute for link
 
 ```md
-[link](/demo ':target=_blank')
+[link](/demo ":target=_blank")
-[link](/demo2 ':target=_self')
+[link](/demo2 ":target=_self")
 ```
 
 ## Disable link
 
 ```md
-[link](/demo ':disabled')
+[link](/demo ":disabled")
 ```
 
 ## Github Task Lists
@@ -84,17 +132,17 @@ You will get `<a href="/demo/">link</a>`html. Do not worry, you can still set ti
 ## Image resizing
 
 ```md
-![logo](https://docsify.js.org/_media/icon.svg ':size=50x100')
+![logo](https://docsify.js.org/_media/icon.svg ":size=50x100")
-![logo](https://docsify.js.org/_media/icon.svg ':size=100')
+![logo](https://docsify.js.org/_media/icon.svg ":size=100")
 
 <!-- Support percentage -->
 
-![logo](https://docsify.js.org/_media/icon.svg ':size=10%')
+![logo](https://docsify.js.org/_media/icon.svg ":size=10%")
 ```
 
-![logo](https://docsify.js.org/_media/icon.svg ':size=50x100')
+![logo](https://docsify.js.org/_media/icon.svg ":size=50x100")
-![logo](https://docsify.js.org/_media/icon.svg ':size=100')
+![logo](https://docsify.js.org/_media/icon.svg ":size=100")
-![logo](https://docsify.js.org/_media/icon.svg ':size=10%')
+![logo](https://docsify.js.org/_media/icon.svg ":size=10%")
 
 ## Customise ID for headings
 

docs/static.md

@@ -1,6 +1,6 @@
 # Generate static html
 
-_Experimental feature_
+> _Experimental feature_
 
 Generating static html files is good for SEO and speeds up the first rendering.
 

src/core/render/compiler.js

@@ -1,6 +1,12 @@
 import marked from 'marked'
 import Prism from 'prismjs'
-import {helper as helperTpl, tree as treeTpl, cover as coverTpl} from './tpl'
+import {
+  helper as helperTpl,
+  newHelper as newHelperTpl,
+  tree as treeTpl,
+  cover as coverTpl,
+  details as detailsTpl
+} from './tpl'
 import {genTree} from './gen-tree'
 import {slugify} from './slugify'
 import {emojify} from './emojify'
@@ -191,7 +197,7 @@ export class Compiler {
 
     /**
      * Render anchor tag
-     * @link https://github.com/markedjs/marked#overriding-renderer-methods
+     * @link https://marked.js.org/#/USING_PRO.md#renderer
      */
     origin.heading = renderer.heading = function (text, level) {
       let {str, config} = getAndRemoveConfig(text)
@@ -325,6 +331,46 @@ export class Compiler {
 
       return html
     }
+    origin.blockquote = renderer.blockquote = function (quote) {
+      const m = quote.match(/^\<p\>(\[\S+\])/)
+
+      if (m) {
+        const text = quote.replace(m[1], '')
+        switch (m[1]) {
+          case '[!]':
+            result = newHelperTpl('docsify-tip', text)
+            break
+          case '[?]':
+            result = newHelperTpl('docsify-warn', text)
+            break
+          case '[x]':
+            result = newHelperTpl('docsify-error', text)
+            break
+          case '[v]':
+            result = newHelperTpl('docsify-success', text)
+            break
+          case '[details]':
+          case '[details:open]':
+            let summary = false
+            const html = text.replace(
+              /^\<p\>([^<]+)<\/p>([\s\S]+)/,
+              (m, m1, m2) => {
+                summary = m1
+                return m2
+              }
+            )
+            const open = Boolean(/:open/.test(m[1]))
+
+            result = detailsTpl({open, summary, html})
+            break
+          default:
+            return quote
+        }
+        return result
+      }
+
+      return quote
+    }
 
     renderer.origin = origin
 

src/core/render/tpl.js

@@ -101,6 +101,17 @@ export function helper(className, content) {
   return `<p class="${className}">${content.slice(5).trim()}</p>`
 }
 
+export function newHelper(className, content) {
+  return `<div class="${className}">${content}</div>`
+}
+
 export function theme(color) {
   return `<style>:root{--theme-color: ${color};}</style>`
 }
+
+export function details({open, summary, html}) {
+  return `<details ${open ? 'open=open' : ''}>${
+    summary ? `<summary>${summary}</summary>` : ''
+  }
+  ${html}</details>`
+}

src/themes/basic/_layout.styl

@@ -321,6 +321,9 @@ body.sticky
   border-bottom 1px solid #eee
   margin 2em 0
 
+.markdown-section summary
+  cursor pointer
+
 .markdown-section iframe
   border 1px solid #eee
   /* fix horizontal overflow on iOS Safari */
@@ -351,6 +354,7 @@ body.sticky
     background-color #f8f8f8
 
 .markdown-section p.tip
+.markdown-section .docsify-tip
   background-color #f8f8f8
   border-bottom-right-radius 2px
   border-left 4px solid #f66
@@ -382,9 +386,23 @@ body.sticky
     color $color-text
 
 .markdown-section p.warn
+.markdown-section .docsify-warn
   background rgba($color-primary, 0.1)
   border-radius 2px
   padding 1rem
+  margin: 2em 0
+
+.markdown-section .docsify-success
+  background rgba(#42b983, 0.1)
+  border-radius 2px
+  padding 1rem
+  margin: 2em 0
+
+.markdown-section .docsify-error
+  background rgba(#f66, 0.1)
+  border-radius 2px
+  margin: 2em 0
+  padding 1rem
 
 .markdown-section ul.task-list > li
   list-style-type none

src/themes/dark.styl

@@ -216,6 +216,7 @@ pre::after
   top 0
 
 .markdown-section p.tip
+.markdown-section .docsify-tip
   background-color #282828
   color #657b83