1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
|
const prefix = "md-";
const selectall = `${prefix}dl`;
const renderer = {
// Block-level methods
code(code, infostring, escaped) {
return `<pre class="${selectall} ${prefix}pre"><code class="${selectall} ${prefix}code">${code}</code></pre>`;
},
blockquote(quote) {
return `<blockquote class="${selectall} ${prefix}blockquote">${quote}</blockquote>`;
},
html(html, block) {
return block ? html : `<span class="${selectall} ${prefix}inline-html">${html}</span>`;
},
heading(text, level, raw, slugger) {
return `<h${level} class="${selectall} ${prefix}h${level}">${text}</h${level}>`;
},
hr() {
return `<hr class="${selectall} ${prefix}hr" />`;
},
list(body, ordered, start) {
const tag = ordered ? 'ol' : 'ul';
return `<${tag} class="${selectall} ${prefix}list ${prefix}${tag}"${ordered && start !== 1 ? ` start="${start}"` : ''}>${body}</${tag}>`;
},
listitem(text, task, checked) {
let classList = `${prefix}li`;
if(task) {
classList += ` ${prefix}li-checkbox`;
} else {
classList += ` ${prefix}li-nocheckbox`;
}
return `<li class="${selectall} ${classList}">${text}</li>`;
},
checkbox(checked) {
return `<input type="checkbox" class="${selectall} ${prefix}checkbox" ${checked ? 'checked' : ''} disabled />`;
},
paragraph(text) {
return `<p class="${selectall} ${prefix}p">${text}</p>`;
},
table(header, body) {
return `<table class="${selectall} ${prefix}table"><thead class="${selectall} ${prefix}thead">${header}</thead><tbody class="${selectall} ${prefix}tbody">${body}</tbody></table>`;
},
tablerow(content) {
return `<tr class="${selectall} ${prefix}tr">${content}</tr>`;
},
tablecell(content, flags) {
const type = flags.header ? 'th' : 'td';
return `<${type} class="${selectall} ${prefix}${type}">${content}</${type}>`;
},
// Inline-level methods
strong(text) {
return `<strong class="${selectall} ${prefix}strong">${text}</strong>`;
},
em(text) {
return `<em class="${selectall} ${prefix}em">${text}</em>`;
},
codespan(code) {
return `<code class="${selectall} ${prefix}codespan">${code}</code>`;
},
br() {
return `<br class="${selectall} ${prefix}br" />`;
},
del(text) {
return `<del class="${selectall} ${prefix}del">${text}</del>`;
},
link(href, title, text) {
return `<a href="${href}" class="${selectall} ${prefix}a"${title ? ` title="${title}"` : ''}>${text}</a>`;
},
image(href, title, text) {
return `<img src="${href}" alt="${text}" class="${selectall} ${prefix}img"${title ? ` title="${title}"` : ''} />`;
},
text(text) {
return text; // text-level elements typically don't have classes
},
};
const hooks = {
postprocess(html) {
return `<div class="${selectall} ${prefix}wrapper" >${html}</div>`;
},
preprocess(md) {
return md;
}
};
module.exports = {
renderer,
hooks
};
|
