feat(compiler): new helpers
This commit is contained in:
cinwell.li
parent
b87c3c77ae
commit
ffd7345fd2
6 changed files with 142 additions and 18 deletions
|
|
@ -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](/demo2 ':target=_self')
|
||||
[link](/demo ":target=_blank")
|
||||
[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
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Support percentage -->
|
||||
|
||||
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Customise ID for headings
|
||||
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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>`
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -216,6 +216,7 @@ pre::after
|
|||
top 0
|
||||
|
||||
.markdown-section p.tip
|
||||
.markdown-section .docsify-tip
|
||||
background-color #282828
|
||||
color #657b83
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue