Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 724ac02

Browse filesBrowse files
arelstonearelstone
authored
feat: added capability to add css class and id to images + links + refactoring (docsifyjs#820)
* method extraction * support for CSS class and id * Update package.json * Added tests for refactored render-methods * minor refactoring
1 parent 6184e50 commit 724ac02
Copy full SHA for 724ac02

14 files changed

+369-133Lines changed: 369 additions & 133 deletions

File tree

Expand file treeCollapse file tree
Open diff view settings
Filter options
Expand file treeCollapse file tree
Open diff view settings
Collapse file

‎cypress/integration/sidebar/config.spec.js‎

Copy file name to clipboardExpand all lines: cypress/integration/sidebar/config.spec.js
-1Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -239,7 +239,6 @@ context('sidebar.configurations', () => {
239239
'set-target-attribute-for-link',
240240
'disable-link',
241241
'github-task-lists',
242-
'image-resizing',
243242
'customise-id-for-headings',
244243
'markdown-in-html-tag'
245244
]
Collapse file

‎cypress/snapshots/sidebar/config.spec.js/sidebar.configurations -- go to #helpersid=image-resizing.snap.png‎

Copy file name to clipboard
-88.4 KB
Binary file not shown.
Collapse file

‎docs/helpers.md‎

Copy file name to clipboardExpand all lines: docs/helpers.md
+16-1Lines changed: 16 additions & 1 deletion
  • Display the source diff
  • Display the rich diff
Original file line numberDiff line numberDiff line change
@@ -81,9 +81,12 @@ You will get `<a href="/demo/">link</a>`html. Do not worry, you can still set ti
8181
- [ ] bim
8282
- [ ] lim
8383

84-
## Image resizing
84+
## Image
85+
86+
### Resizing
8587

8688
```md
89+
![logo](https://docsify.js.org/_media/icon.svg ':size=WIDTHxHEIGHT')
8790
![logo](https://docsify.js.org/_media/icon.svg ':size=50x100')
8891
![logo](https://docsify.js.org/_media/icon.svg ':size=100')
8992

@@ -96,6 +99,18 @@ You will get `<a href="/demo/">link</a>`html. Do not worry, you can still set ti
9699
![logo](https://docsify.js.org/_media/icon.svg ':size=100')
97100
![logo](https://docsify.js.org/_media/icon.svg ':size=10%')
98101

102+
### Customise class
103+
104+
```md
105+
![logo](https://docsify.js.org/_media/icon.svg ':class=someCssClass')
106+
```
107+
108+
### Customise ID
109+
110+
```md
111+
![logo](https://docsify.js.org/_media/icon.svg ':id=someCssId')
112+
```
113+
99114
## Customise ID for headings
100115

101116
```md
Collapse file

‎package-lock.json‎

Copy file name to clipboardExpand all lines: package-lock.json
+30-11Lines changed: 30 additions & 11 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.
Collapse file

‎packages/docsify-server-renderer/package-lock.json‎

Copy file name to clipboardExpand all lines: packages/docsify-server-renderer/package-lock.json
+1-1Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.
Collapse file

‎src/core/render/compiler.js‎

Copy file name to clipboardExpand all lines: src/core/render/compiler.js
+15-118Lines changed: 15 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
1-
import marked from 'marked'
2-
import Prism from 'prismjs'
3-
import { helper as helperTpl, tree as treeTpl } from './tpl'
1+
import { tree as treeTpl } from './tpl'
42
import { genTree } from './gen-tree'
53
import { slugify } from './slugify'
64
import { emojify } from './emojify'
75
import { isAbsolutePath, getPath, getParentPath } from '../router/util'
86
import { isFn, merge, cached, isPrimitive } from '../util/core'
9-
10-
// See https://github.com/PrismJS/prism/pull/1367
11-
import 'prismjs/components/prism-markup-templating'
7+
import { imageCompiler } from './compiler/image'
8+
import { highlightCodeCompiler } from './compiler/code'
9+
import { paragraphCompiler } from './compiler/paragraph'
10+
import { taskListCompiler } from './compiler/taskList'
11+
import { taskListItemCompiler } from './compiler/taskListItem'
12+
import { linkCompiler } from './compiler/link'
13+
import marked from 'marked'
1214

1315
const cachedLinks = {}
1416

@@ -189,7 +191,7 @@ export class Compiler {
189191

190192
_initRenderer() {
191193
const renderer = new marked.Renderer()
192-
const { linkTarget, linkRel, router, contentBase } = this
194+
const { linkTarget, router, contentBase } = this
193195
const _self = this
194196
const origin = {}
195197

@@ -224,117 +226,12 @@ export class Compiler {
224226
return `<h${level} id="${slug}"><a href="${url}" data-id="${slug}" class="anchor"><span>${str}</span></a></h${level}>`
225227
}
226228

227-
// Highlight code
228-
origin.code = renderer.code = function (code, lang = '') {
229-
code = code.replace(/@DOCSIFY_QM@/g, '`')
230-
const hl = Prism.highlight(
231-
code,
232-
Prism.languages[lang] || Prism.languages.markup
233-
)
234-
235-
return `<pre v-pre data-lang="${lang}"><code class="lang-${lang}">${hl}</code></pre>`
236-
}
237-
238-
origin.link = renderer.link = function (href, title = '', text) {
239-
let attrs = ''
240-
241-
const { str, config } = getAndRemoveConfig(title)
242-
title = str
243-
244-
if (
245-
!isAbsolutePath(href) &&
246-
!_self._matchNotCompileLink(href) &&
247-
!config.ignore
248-
) {
249-
if (href === _self.config.homepage) {
250-
href = 'README'
251-
}
252-
253-
href = router.toURL(href, null, router.getCurrentPath())
254-
} else {
255-
attrs += href.indexOf('mailto:') === 0 ? '' : ` target="${linkTarget}"`
256-
attrs += href.indexOf('mailto:') === 0 ? '' : (linkRel !== '' ? ` rel="${linkRel}"` : '')
257-
}
258-
259-
if (config.target) {
260-
attrs += ' target=' + config.target
261-
}
262-
263-
if (config.disabled) {
264-
attrs += ' disabled'
265-
href = 'javascript:void(0)'
266-
}
267-
268-
if (title) {
269-
attrs += ` title="${title}"`
270-
}
271-
272-
return `<a href="${href}"${attrs}>${text}</a>`
273-
}
274-
275-
origin.paragraph = renderer.paragraph = function (text) {
276-
let result
277-
if (/^!&gt;/.test(text)) {
278-
result = helperTpl('tip', text)
279-
} else if (/^\?&gt;/.test(text)) {
280-
result = helperTpl('warn', text)
281-
} else {
282-
result = `<p>${text}</p>`
283-
}
284-
285-
return result
286-
}
287-
288-
origin.image = renderer.image = function (href, title, text) {
289-
let url = href
290-
let attrs = ''
291-
292-
const { str, config } = getAndRemoveConfig(title)
293-
title = str
294-
295-
if (config['no-zoom']) {
296-
attrs += ' data-no-zoom'
297-
}
298-
299-
if (title) {
300-
attrs += ` title="${title}"`
301-
}
302-
303-
const size = config.size
304-
if (size) {
305-
const sizes = size.split('x')
306-
if (sizes[1]) {
307-
attrs += 'width=' + sizes[0] + ' height=' + sizes[1]
308-
} else {
309-
attrs += 'width=' + sizes[0]
310-
}
311-
}
312-
313-
if (!isAbsolutePath(href)) {
314-
url = getPath(contentBase, getParentPath(router.getCurrentPath()), href)
315-
}
316-
317-
return `<img src="${url}"data-origin="${href}" alt="${text}"${attrs}>`
318-
}
319-
320-
origin.list = renderer.list = function (body, ordered, start) {
321-
const isTaskList = /<li class="task-list-item">/.test(body.split('class="task-list"')[0])
322-
const isStartReq = start && start > 1
323-
const tag = ordered ? 'ol' : 'ul'
324-
const tagAttrs = [
325-
(isTaskList ? 'class="task-list"' : ''),
326-
(isStartReq ? `start="${start}"` : '')
327-
].join(' ').trim()
328-
329-
return `<${tag} ${tagAttrs}>${body}</${tag}>`
330-
}
331-
332-
origin.listitem = renderer.listitem = function (text) {
333-
const isTaskItem = /^(<input.*type="checkbox"[^>]*>)/.test(text)
334-
const html = isTaskItem ? `<li class="task-list-item"><label>${text}</label></li>` : `<li>${text}</li>`
335-
336-
return html
337-
}
229+
origin.code = highlightCodeCompiler({ renderer })
230+
origin.link = linkCompiler({ renderer, router, linkTarget, compilerClass: _self })
231+
origin.paragraph = paragraphCompiler({ renderer })
232+
origin.image = imageCompiler({ renderer, contentBase, router })
233+
origin.list = taskListCompiler({ renderer })
234+
origin.listitem = taskListItemCompiler({ renderer })
338235

339236
renderer.origin = origin
340237

Collapse file

‎src/core/render/compiler/code.js‎

Copy file name to clipboard
+10Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import Prism from 'prismjs'
2+
// See https://github.com/PrismJS/prism/pull/1367
3+
import 'prismjs/components/prism-markup-templating'
4+
5+
export const highlightCodeCompiler = ({ renderer }) => renderer.code = function (code, lang = '') {
6+
const langOrMarkup = Prism.languages[lang] || Prism.languages.markup
7+
const text = Prism.highlight(code.replace(/@DOCSIFY_QM@/g, '`'), langOrMarkup)
8+
9+
return `<pre v-pre data-lang="${lang}"><code class="lang-${lang}">${text}</code></pre>`
10+
}

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.