mirror of
https://github.com/docsifyjs/docsify.git
synced 2025-12-08 19:55:52 +00:00
feat: added capability to add css class and id to images + links + refactoring (#820)
* method extraction * support for CSS class and id * Update package.json * Added tests for refactored render-methods * minor refactoring
This commit is contained in:
Carsten Daurehøj
GitHub
parent
6184e50262
commit
724ac024dd
@ -239,7 +239,6 @@ context('sidebar.configurations', () => {
|
||||
'set-target-attribute-for-link',
|
||||
'disable-link',
|
||||
'github-task-lists',
|
||||
'image-resizing',
|
||||
'customise-id-for-headings',
|
||||
'markdown-in-html-tag'
|
||||
]
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 88 KiB |
@ -81,9 +81,12 @@ You will get `<a href="/demo/">link</a>`html. Do not worry, you can still set ti
|
||||
- [ ] bim
|
||||
- [ ] lim
|
||||
|
||||
## Image resizing
|
||||
## Image
|
||||
|
||||
### Resizing
|
||||
|
||||
```md
|
||||
|
||||
|
||||
|
||||
|
||||
@ -96,6 +99,18 @@ You will get `<a href="/demo/">link</a>`html. Do not worry, you can still set ti
|
||||
|
||||
|
||||
|
||||
### Customise class
|
||||
|
||||
```md
|
||||
|
||||
```
|
||||
|
||||
### Customise ID
|
||||
|
||||
```md
|
||||
|
||||
```
|
||||
|
||||
## Customise ID for headings
|
||||
|
||||
```md
|
||||
|
||||
41
package-lock.json
generated
41
package-lock.json
generated
@ -7520,7 +7520,8 @@
|
||||
"ansi-regex": {
|
||||
"version": "2.1.1",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"aproba": {
|
||||
"version": "1.2.0",
|
||||
@ -7541,12 +7542,14 @@
|
||||
"balanced-match": {
|
||||
"version": "1.0.0",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"brace-expansion": {
|
||||
"version": "1.1.11",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"balanced-match": "^1.0.0",
|
||||
"concat-map": "0.0.1"
|
||||
@ -7561,17 +7564,20 @@
|
||||
"code-point-at": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"concat-map": {
|
||||
"version": "0.0.1",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"console-control-strings": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"core-util-is": {
|
||||
"version": "1.0.2",
|
||||
@ -7688,7 +7694,8 @@
|
||||
"inherits": {
|
||||
"version": "2.0.3",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"ini": {
|
||||
"version": "1.3.5",
|
||||
@ -7700,6 +7707,7 @@
|
||||
"version": "1.0.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"number-is-nan": "^1.0.0"
|
||||
}
|
||||
@ -7714,6 +7722,7 @@
|
||||
"version": "3.0.4",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"brace-expansion": "^1.1.7"
|
||||
}
|
||||
@ -7721,12 +7730,14 @@
|
||||
"minimist": {
|
||||
"version": "0.0.8",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"minipass": {
|
||||
"version": "2.3.5",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"safe-buffer": "^5.1.2",
|
||||
"yallist": "^3.0.0"
|
||||
@ -7745,6 +7756,7 @@
|
||||
"version": "0.5.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"minimist": "0.0.8"
|
||||
}
|
||||
@ -7825,7 +7837,8 @@
|
||||
"number-is-nan": {
|
||||
"version": "1.0.1",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"object-assign": {
|
||||
"version": "4.1.1",
|
||||
@ -7837,6 +7850,7 @@
|
||||
"version": "1.4.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"wrappy": "1"
|
||||
}
|
||||
@ -7922,7 +7936,8 @@
|
||||
"safe-buffer": {
|
||||
"version": "5.1.2",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"safer-buffer": {
|
||||
"version": "2.1.2",
|
||||
@ -7958,6 +7973,7 @@
|
||||
"version": "1.0.2",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"code-point-at": "^1.0.0",
|
||||
"is-fullwidth-code-point": "^1.0.0",
|
||||
@ -7977,6 +7993,7 @@
|
||||
"version": "3.0.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"ansi-regex": "^2.0.0"
|
||||
}
|
||||
@ -8020,12 +8037,14 @@
|
||||
"wrappy": {
|
||||
"version": "1.0.2",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"yallist": {
|
||||
"version": "3.0.3",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@ -436,4 +436,4 @@
|
||||
"integrity": "sha512-aSiJz7rGWNAQq7hjMK9ZYDuEawXupcCWgl3woQQSoDP2Oh8O4srWb/uO1PzzHIsrPEOqrjJ2sUb9FERfzuBabQ=="
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,14 +1,16 @@
|
||||
import marked from 'marked'
|
||||
import Prism from 'prismjs'
|
||||
import { helper as helperTpl, tree as treeTpl } from './tpl'
|
||||
import { tree as treeTpl } from './tpl'
|
||||
import { genTree } from './gen-tree'
|
||||
import { slugify } from './slugify'
|
||||
import { emojify } from './emojify'
|
||||
import { isAbsolutePath, getPath, getParentPath } from '../router/util'
|
||||
import { isFn, merge, cached, isPrimitive } from '../util/core'
|
||||
|
||||
// See https://github.com/PrismJS/prism/pull/1367
|
||||
import 'prismjs/components/prism-markup-templating'
|
||||
import { imageCompiler } from './compiler/image'
|
||||
import { highlightCodeCompiler } from './compiler/code'
|
||||
import { paragraphCompiler } from './compiler/paragraph'
|
||||
import { taskListCompiler } from './compiler/taskList'
|
||||
import { taskListItemCompiler } from './compiler/taskListItem'
|
||||
import { linkCompiler } from './compiler/link'
|
||||
import marked from 'marked'
|
||||
|
||||
const cachedLinks = {}
|
||||
|
||||
@ -189,7 +191,7 @@ export class Compiler {
|
||||
|
||||
_initRenderer() {
|
||||
const renderer = new marked.Renderer()
|
||||
const { linkTarget, linkRel, router, contentBase } = this
|
||||
const { linkTarget, router, contentBase } = this
|
||||
const _self = this
|
||||
const origin = {}
|
||||
|
||||
@ -224,117 +226,12 @@ export class Compiler {
|
||||
return `<h${level} id="${slug}"><a href="${url}" data-id="${slug}" class="anchor"><span>${str}</span></a></h${level}>`
|
||||
}
|
||||
|
||||
// Highlight code
|
||||
origin.code = renderer.code = function (code, lang = '') {
|
||||
code = code.replace(/@DOCSIFY_QM@/g, '`')
|
||||
const hl = Prism.highlight(
|
||||
code,
|
||||
Prism.languages[lang] || Prism.languages.markup
|
||||
)
|
||||
|
||||
return `<pre v-pre data-lang="${lang}"><code class="lang-${lang}">${hl}</code></pre>`
|
||||
}
|
||||
|
||||
origin.link = renderer.link = function (href, title = '', text) {
|
||||
let attrs = ''
|
||||
|
||||
const { str, config } = getAndRemoveConfig(title)
|
||||
title = str
|
||||
|
||||
if (
|
||||
!isAbsolutePath(href) &&
|
||||
!_self._matchNotCompileLink(href) &&
|
||||
!config.ignore
|
||||
) {
|
||||
if (href === _self.config.homepage) {
|
||||
href = 'README'
|
||||
}
|
||||
|
||||
href = router.toURL(href, null, router.getCurrentPath())
|
||||
} else {
|
||||
attrs += href.indexOf('mailto:') === 0 ? '' : ` target="${linkTarget}"`
|
||||
attrs += href.indexOf('mailto:') === 0 ? '' : (linkRel !== '' ? ` rel="${linkRel}"` : '')
|
||||
}
|
||||
|
||||
if (config.target) {
|
||||
attrs += ' target=' + config.target
|
||||
}
|
||||
|
||||
if (config.disabled) {
|
||||
attrs += ' disabled'
|
||||
href = 'javascript:void(0)'
|
||||
}
|
||||
|
||||
if (title) {
|
||||
attrs += ` title="${title}"`
|
||||
}
|
||||
|
||||
return `<a href="${href}"${attrs}>${text}</a>`
|
||||
}
|
||||
|
||||
origin.paragraph = renderer.paragraph = function (text) {
|
||||
let result
|
||||
if (/^!>/.test(text)) {
|
||||
result = helperTpl('tip', text)
|
||||
} else if (/^\?>/.test(text)) {
|
||||
result = helperTpl('warn', text)
|
||||
} else {
|
||||
result = `<p>${text}</p>`
|
||||
}
|
||||
|
||||
return result
|
||||
}
|
||||
|
||||
origin.image = renderer.image = function (href, title, text) {
|
||||
let url = href
|
||||
let attrs = ''
|
||||
|
||||
const { str, config } = getAndRemoveConfig(title)
|
||||
title = str
|
||||
|
||||
if (config['no-zoom']) {
|
||||
attrs += ' data-no-zoom'
|
||||
}
|
||||
|
||||
if (title) {
|
||||
attrs += ` title="${title}"`
|
||||
}
|
||||
|
||||
const size = config.size
|
||||
if (size) {
|
||||
const sizes = size.split('x')
|
||||
if (sizes[1]) {
|
||||
attrs += 'width=' + sizes[0] + ' height=' + sizes[1]
|
||||
} else {
|
||||
attrs += 'width=' + sizes[0]
|
||||
}
|
||||
}
|
||||
|
||||
if (!isAbsolutePath(href)) {
|
||||
url = getPath(contentBase, getParentPath(router.getCurrentPath()), href)
|
||||
}
|
||||
|
||||
return `<img src="${url}"data-origin="${href}" alt="${text}"${attrs}>`
|
||||
}
|
||||
|
||||
origin.list = renderer.list = function (body, ordered, start) {
|
||||
const isTaskList = /<li class="task-list-item">/.test(body.split('class="task-list"')[0])
|
||||
const isStartReq = start && start > 1
|
||||
const tag = ordered ? 'ol' : 'ul'
|
||||
const tagAttrs = [
|
||||
(isTaskList ? 'class="task-list"' : ''),
|
||||
(isStartReq ? `start="${start}"` : '')
|
||||
].join(' ').trim()
|
||||
|
||||
return `<${tag} ${tagAttrs}>${body}</${tag}>`
|
||||
}
|
||||
|
||||
origin.listitem = renderer.listitem = function (text) {
|
||||
const isTaskItem = /^(<input.*type="checkbox"[^>]*>)/.test(text)
|
||||
const html = isTaskItem ? `<li class="task-list-item"><label>${text}</label></li>` : `<li>${text}</li>`
|
||||
|
||||
return html
|
||||
}
|
||||
origin.code = highlightCodeCompiler({ renderer })
|
||||
origin.link = linkCompiler({ renderer, router, linkTarget, compilerClass: _self })
|
||||
origin.paragraph = paragraphCompiler({ renderer })
|
||||
origin.image = imageCompiler({ renderer, contentBase, router })
|
||||
origin.list = taskListCompiler({ renderer })
|
||||
origin.listitem = taskListItemCompiler({ renderer })
|
||||
|
||||
renderer.origin = origin
|
||||
|
||||
|
||||
10
src/core/render/compiler/code.js
Normal file
10
src/core/render/compiler/code.js
Normal file
@ -0,0 +1,10 @@
|
||||
import Prism from 'prismjs'
|
||||
// See https://github.com/PrismJS/prism/pull/1367
|
||||
import 'prismjs/components/prism-markup-templating'
|
||||
|
||||
export const highlightCodeCompiler = ({ renderer }) => renderer.code = function (code, lang = '') {
|
||||
const langOrMarkup = Prism.languages[lang] || Prism.languages.markup
|
||||
const text = Prism.highlight(code.replace(/@DOCSIFY_QM@/g, '`'), langOrMarkup)
|
||||
|
||||
return `<pre v-pre data-lang="${lang}"><code class="lang-${lang}">${text}</code></pre>`
|
||||
}
|
||||
27
src/core/render/compiler/headline.js
Normal file
27
src/core/render/compiler/headline.js
Normal file
@ -0,0 +1,27 @@
|
||||
|
||||
import { getAndRemoveConfig } from '../compiler'
|
||||
import { slugify } from './slugify'
|
||||
|
||||
export const headingCompiler = ({ renderer, router, _self }) => renderer.code = (text, level) => {
|
||||
let { str, config } = getAndRemoveConfig(text)
|
||||
const nextToc = { level, title: str }
|
||||
|
||||
if (/{docsify-ignore}/g.test(str)) {
|
||||
str = str.replace('{docsify-ignore}', '')
|
||||
nextToc.title = str
|
||||
nextToc.ignoreSubHeading = true
|
||||
}
|
||||
|
||||
if (/{docsify-ignore-all}/g.test(str)) {
|
||||
str = str.replace('{docsify-ignore-all}', '')
|
||||
nextToc.title = str
|
||||
nextToc.ignoreAllSubs = true
|
||||
}
|
||||
|
||||
const slug = slugify(config.id || str)
|
||||
const url = router.toURL(router.getCurrentPath(), { id: slug })
|
||||
nextToc.slug = url
|
||||
_self.toc.push(nextToc)
|
||||
|
||||
return `<h${level} id="${slug}"><a href="${url}" data-id="${slug}" class="anchor"><span>${str}</span></a></h${level}>`
|
||||
}
|
||||
42
src/core/render/compiler/image.js
Normal file
42
src/core/render/compiler/image.js
Normal file
@ -0,0 +1,42 @@
|
||||
import { getAndRemoveConfig } from '../compiler'
|
||||
import { isAbsolutePath, getPath, getParentPath } from '../../router/util'
|
||||
|
||||
export const imageCompiler = ({ renderer, contentBase, router }) => renderer.image = (href, title, text) => {
|
||||
let url = href
|
||||
let attrs = []
|
||||
|
||||
const { str, config } = getAndRemoveConfig(title)
|
||||
title = str
|
||||
|
||||
if (config['no-zoom']) {
|
||||
attrs.push('data-no-zoom')
|
||||
}
|
||||
|
||||
if (title) {
|
||||
attrs.push(`title="${title}"`)
|
||||
}
|
||||
|
||||
if (config.size) {
|
||||
const [width, height] = config.size.split('x')
|
||||
if (height) {
|
||||
attrs.push(`width="${width}" height="${height}"`)
|
||||
} else {
|
||||
attrs.push(`width="${width}" height="${width}"`)
|
||||
}
|
||||
}
|
||||
|
||||
if (config.class) {
|
||||
attrs.push(`class="${config.class}"`)
|
||||
}
|
||||
|
||||
if (config.id) {
|
||||
attrs.push(`id="${config.id}"`)
|
||||
}
|
||||
|
||||
if (!isAbsolutePath(href)) {
|
||||
url = getPath(contentBase, getParentPath(router.getCurrentPath()), href)
|
||||
}
|
||||
|
||||
return `<img src="${url}" data-origin="${href}" alt="${text}" ${attrs.join(' ')} />`
|
||||
}
|
||||
|
||||
42
src/core/render/compiler/link.js
Normal file
42
src/core/render/compiler/link.js
Normal file
@ -0,0 +1,42 @@
|
||||
import { getAndRemoveConfig } from '../compiler'
|
||||
import { isAbsolutePath } from '../../router/util'
|
||||
|
||||
export const linkCompiler = ({ renderer, router, linkTarget, compilerClass }) => renderer.link = (href, title = '', text) => {
|
||||
let attrs = []
|
||||
const { str, config } = getAndRemoveConfig(title)
|
||||
|
||||
title = str
|
||||
|
||||
if (!isAbsolutePath(href) && !compilerClass._matchNotCompileLink(href) && !config.ignore) {
|
||||
if (href === compilerClass.config.homepage) {
|
||||
href = 'README'
|
||||
}
|
||||
|
||||
href = router.toURL(href, null, router.getCurrentPath())
|
||||
} else {
|
||||
attrs.push(href.indexOf('mailto:') === 0 ? '' : `target="${linkTarget}"`)
|
||||
}
|
||||
|
||||
if (config.target) {
|
||||
attrs.push(`target="${config.target}"`)
|
||||
}
|
||||
|
||||
if (config.disabled) {
|
||||
attrs.push('disabled')
|
||||
href = 'javascript:void(0)'
|
||||
}
|
||||
|
||||
if (config.class) {
|
||||
attrs.push(`class="${config.class}"`)
|
||||
}
|
||||
|
||||
if (config.id) {
|
||||
attrs.push(`id="${config.id}"`)
|
||||
}
|
||||
|
||||
if (title) {
|
||||
attrs.push(`title="${title}"`)
|
||||
}
|
||||
|
||||
return `<a href="${href}" ${attrs.join(' ')}>${text}</a>`
|
||||
}
|
||||
15
src/core/render/compiler/paragraph.js
Normal file
15
src/core/render/compiler/paragraph.js
Normal file
@ -0,0 +1,15 @@
|
||||
import { helper as helperTpl } from '../tpl'
|
||||
|
||||
export const paragraphCompiler = ({ renderer }) => renderer.paragraph = text => {
|
||||
let result
|
||||
if (/^!>/.test(text)) {
|
||||
result = helperTpl('tip', text)
|
||||
} else if (/^\?>/.test(text)) {
|
||||
result = helperTpl('warn', text)
|
||||
} else {
|
||||
result = `<p>${text}</p>`
|
||||
}
|
||||
|
||||
return result
|
||||
}
|
||||
|
||||
13
src/core/render/compiler/taskList.js
Normal file
13
src/core/render/compiler/taskList.js
Normal file
@ -0,0 +1,13 @@
|
||||
export const taskListCompiler = ({renderer}) => renderer.list = (body, ordered, start) => {
|
||||
const isTaskList = /<li class="task-list-item">/.test(body.split('class="task-list"')[0])
|
||||
const isStartReq = start && start > 1
|
||||
const tag = ordered ? 'ol' : 'ul'
|
||||
const tagAttrs = [
|
||||
(isTaskList ? 'class="task-list"' : ''),
|
||||
(isStartReq ? `start="${start}"` : '')
|
||||
]
|
||||
.join(' ')
|
||||
.trim()
|
||||
|
||||
return `<${tag} ${tagAttrs}>${body}</${tag}>`
|
||||
}
|
||||
6
src/core/render/compiler/taskListItem.js
Normal file
6
src/core/render/compiler/taskListItem.js
Normal file
@ -0,0 +1,6 @@
|
||||
export const taskListItemCompiler = ({ renderer }) => renderer.listitem = text => {
|
||||
const isTaskItem = /^(<input.*type="checkbox"[^>]*>)/.test(text)
|
||||
const html = isTaskItem ? `<li class="task-list-item"><label>${text}</label></li>` : `<li>${text}</li>`
|
||||
|
||||
return html
|
||||
}
|
||||
@ -40,7 +40,7 @@ describe('render', function () {
|
||||
- [linktext](link)
|
||||
- just text`)
|
||||
expectSameDom(output, `<ul >
|
||||
<li><a href="#/link">linktext</a></li>
|
||||
<li><a href="#/link" >linktext</a></li>
|
||||
<li>just text</li>
|
||||
</ul>`)
|
||||
})
|
||||
@ -83,4 +83,155 @@ text
|
||||
</ul>`)
|
||||
})
|
||||
})
|
||||
|
||||
describe('image', function () {
|
||||
it('regular', async function () {
|
||||
const { docsify } = await init()
|
||||
const output = docsify.compiler.compile('')
|
||||
|
||||
expectSameDom(output, '<p><img src="http://imageUrl" data-origin="http://imageUrl" alt="alt text" /></p>')
|
||||
})
|
||||
|
||||
it('class', async function () {
|
||||
const { docsify } = await init()
|
||||
const output = docsify.compiler.compile('')
|
||||
|
||||
expectSameDom(output, '<p><img src="http://imageUrl" data-origin="http://imageUrl" alt="alt text" class="someCssClass" /></p>')
|
||||
})
|
||||
|
||||
it('id', async function () {
|
||||
const { docsify } = await init()
|
||||
const output = docsify.compiler.compile('')
|
||||
|
||||
expectSameDom(output, '<p><img src="http://imageUrl" data-origin="http://imageUrl" alt="alt text" id="someCssID" /></p>')
|
||||
})
|
||||
|
||||
it('no-zoom', async function () {
|
||||
const { docsify } = await init()
|
||||
const output = docsify.compiler.compile('')
|
||||
|
||||
expectSameDom(output, '<p><img src="http://imageUrl" data-origin="http://imageUrl" alt="alt text" data-no-zoom /></p>')
|
||||
})
|
||||
|
||||
describe('size', function () {
|
||||
it('width and height', async function () {
|
||||
const { docsify } = await init()
|
||||
const output = docsify.compiler.compile('')
|
||||
|
||||
expectSameDom(output, '<p><img src="http://imageUrl" data-origin="http://imageUrl" alt="alt text" width="WIDTH" height="HEIGHT" /></p>')
|
||||
})
|
||||
|
||||
it('width', async function () {
|
||||
const { docsify } = await init()
|
||||
const output = docsify.compiler.compile('')
|
||||
|
||||
expectSameDom(output, '<p><img src="http://imageUrl" data-origin="http://imageUrl" alt="alt text" width="50" height="50" /></p>')
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
describe('heading', function () {
|
||||
it('h1', async function () {
|
||||
const { docsify } = await init()
|
||||
const output = docsify.compiler.compile('# h1 tag')
|
||||
expectSameDom(output, `
|
||||
<h1 id="h1-tag">
|
||||
<a href="#/?id=h1-tag" data-id="h1-tag" class="anchor">
|
||||
<span>h1 tag</span>
|
||||
</a>
|
||||
</h1>`)
|
||||
})
|
||||
|
||||
it('h2', async function () {
|
||||
const { docsify } = await init()
|
||||
const output = docsify.compiler.compile('## h2 tag')
|
||||
expectSameDom(output, `
|
||||
<h2 id="h2-tag">
|
||||
<a href="#/?id=h2-tag" data-id="h2-tag" class="anchor">
|
||||
<span>h2 tag</span>
|
||||
</a>
|
||||
</h2>`)
|
||||
})
|
||||
|
||||
it('h3', async function () {
|
||||
const { docsify } = await init()
|
||||
const output = docsify.compiler.compile('### h3 tag')
|
||||
expectSameDom(output, `
|
||||
<h3 id="h3-tag">
|
||||
<a href="#/?id=h3-tag" data-id="h3-tag" class="anchor">
|
||||
<span>h3 tag</span>
|
||||
</a>
|
||||
</h3>`)
|
||||
})
|
||||
|
||||
it('h4', async function () {
|
||||
const { docsify } = await init()
|
||||
const output = docsify.compiler.compile('#### h4 tag')
|
||||
expectSameDom(output, `
|
||||
<h4 id="h4-tag">
|
||||
<a href="#/?id=h4-tag" data-id="h4-tag" class="anchor">
|
||||
<span>h4 tag</span>
|
||||
</a>
|
||||
</h4>`)
|
||||
})
|
||||
|
||||
it('h5', async function () {
|
||||
const { docsify } = await init()
|
||||
const output = docsify.compiler.compile('##### h5 tag')
|
||||
expectSameDom(output, `
|
||||
<h5 id="h5-tag">
|
||||
<a href="#/?id=h5-tag" data-id="h5-tag" class="anchor">
|
||||
<span>h5 tag</span>
|
||||
</a>
|
||||
</h5>`)
|
||||
})
|
||||
|
||||
it('h6', async function () {
|
||||
const { docsify } = await init()
|
||||
const output = docsify.compiler.compile('###### h6 tag')
|
||||
expectSameDom(output, `
|
||||
<h6 id="h6-tag">
|
||||
<a href="#/?id=h6-tag" data-id="h6-tag" class="anchor">
|
||||
<span>h6 tag</span>
|
||||
</a>
|
||||
</h6>`)
|
||||
})
|
||||
})
|
||||
|
||||
describe('link', function () {
|
||||
it('regular', async function () {
|
||||
const { docsify } = await init()
|
||||
const output = docsify.compiler.compile('[alt text](http://url)')
|
||||
|
||||
expectSameDom(output, '<p><a href="http://url" target="_blank">alt text</a></p>')
|
||||
})
|
||||
|
||||
it('disabled', async function () {
|
||||
const { docsify } = await init()
|
||||
const output = docsify.compiler.compile('[alt text](http://url \':disabled\')')
|
||||
|
||||
expectSameDom(output, '<p><a href="javascript:void(0)" target="_blank" disabled>alt text</a></p>')
|
||||
})
|
||||
|
||||
it('target', async function () {
|
||||
const { docsify } = await init()
|
||||
const output = docsify.compiler.compile('[alt text](http://url \':target=_self\')')
|
||||
|
||||
expectSameDom(output, '<p><a href="http://url" target="_blank" target="_self">alt text</a></p>')
|
||||
})
|
||||
|
||||
it('class', async function () {
|
||||
const { docsify } = await init()
|
||||
const output = docsify.compiler.compile('[alt text](http://url \':class=someCssClass\')')
|
||||
|
||||
expectSameDom(output, '<p><a href="http://url" target="_blank" class="someCssClass">alt text</a></p>')
|
||||
})
|
||||
|
||||
it('id', async function () {
|
||||
const { docsify } = await init()
|
||||
const output = docsify.compiler.compile('[alt text](http://url \':id=someCssID\')')
|
||||
|
||||
expectSameDom(output, '<p><a href="http://url" target="_blank" id="someCssID">alt text</a></p>')
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user