From ffd7345fd200e16f1e77095b67c983af15dad7ef Mon Sep 17 00:00:00 2001 From: "cinwell.li" Date: Sun, 31 Mar 2019 16:01:22 +0800 Subject: [PATCH] feat(compiler): new helpers --- docs/helpers.md | 78 ++++++++++++++++++++++++++++------- docs/static.md | 2 +- src/core/render/compiler.js | 50 +++++++++++++++++++++- src/core/render/tpl.js | 11 +++++ src/themes/basic/_layout.styl | 18 ++++++++ src/themes/dark.styl | 1 + 6 files changed, 142 insertions(+), 18 deletions(-) diff --git a/docs/helpers.md b/docs/helpers.md index b047d36..9075448 100644 --- a/docs/helpers.md +++ b/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 `link` and will be loaded `/demo/R Now you can do that ```md -[link](/demo/ ':ignore') +[link](/demo/ ":ignore") ``` You will get `link`html. Do not worry, you can still set title for link. ```md -[link](/demo/ ':ignore title') +[link](/demo/ ":ignore title") link ``` @@ -53,14 +101,14 @@ You will get `link`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 `link`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=100') +![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=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=100') -![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=100") +![logo](https://docsify.js.org/_media/icon.svg ":size=10%") ## Customise ID for headings diff --git a/docs/static.md b/docs/static.md index 1d4c7db..98bcb75 100644 --- a/docs/static.md +++ b/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. diff --git a/src/core/render/compiler.js b/src/core/render/compiler.js index e1b406b..502d938 100644 --- a/src/core/render/compiler.js +++ b/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(/^\(\[\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>([\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 diff --git a/src/core/render/tpl.js b/src/core/render/tpl.js index 7cac6d2..a29f155 100644 --- a/src/core/render/tpl.js +++ b/src/core/render/tpl.js @@ -101,6 +101,17 @@ export function helper(className, content) { return `

${content.slice(5).trim()}

` } +export function newHelper(className, content) { + return `
${content}
` +} + export function theme(color) { return `` } + +export function details({open, summary, html}) { + return `
${ + summary ? `${summary}` : '' + } + ${html}
` +} diff --git a/src/themes/basic/_layout.styl b/src/themes/basic/_layout.styl index 387fd79..a3556d9 100644 --- a/src/themes/basic/_layout.styl +++ b/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 diff --git a/src/themes/dark.styl b/src/themes/dark.styl index 02ca630..7c5eb50 100644 --- a/src/themes/dark.styl +++ b/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