|
| 1 | +import md_emoji from 'markdown-it-emoji' |
| 2 | +import md_prism from 'markdown-it-prism' // 高亮 |
| 3 | +import md_sup from 'markdown-it-sup' // 上标 ^ ^ |
| 4 | +import md_sub from 'markdown-it-sub' // 下标 ~ ~ |
| 5 | +import md_mark from 'markdown-it-mark' // 高亮文字 == == |
| 6 | +import md_anchor from 'markdown-it-anchor' |
| 7 | +import md_container from 'markdown-it-container' // 提示块 |
| 8 | + |
| 9 | +export const MdExt = [md_emoji, md_sub, md_sup, md_mark] |
| 10 | + |
| 11 | +const RE = /{([\d,-]+)}/ |
| 12 | +const highlightLines = (md) => { |
| 13 | + const fence = md.renderer.rules.fence |
| 14 | + md.renderer.rules.fence = (...args) => { |
| 15 | + const [tokens, idx, options, , self] = args |
| 16 | + const token = tokens[idx] |
| 17 | + |
| 18 | + if (!token.info || !RE.test(token.info)) { |
| 19 | + return fence(...args) |
| 20 | + } |
| 21 | + |
| 22 | + const lineNumbers = RE.exec(token.info)[1] |
| 23 | + .split(',') |
| 24 | + .map((v) => v.split('-').map((v) => parseInt(v, 10))) |
| 25 | + const langName = token.info.replace(RE, '').trim() |
| 26 | + |
| 27 | + const code = options.highlight ? options.highlight(token.content, langName) : token.content |
| 28 | + const codeSplitsArr = code.split('\n').map((split, index) => { |
| 29 | + const lineNumber = index + 1 |
| 30 | + const inRange = lineNumbers.some(([start, end]) => { |
| 31 | + if (start && end) { |
| 32 | + return lineNumber >= start && lineNumber <= end |
| 33 | + } |
| 34 | + return lineNumber === start |
| 35 | + }) |
| 36 | + if (inRange) { |
| 37 | + return { |
| 38 | + code: `<span class="highlighted-line">${split}</span>`, |
| 39 | + highlighted: true |
| 40 | + } |
| 41 | + } |
| 42 | + return { |
| 43 | + code: split |
| 44 | + } |
| 45 | + }) |
| 46 | + let highlightCode = '' |
| 47 | + codeSplitsArr.forEach((split) => { |
| 48 | + if (split.highlighted) { |
| 49 | + highlightCode += split.code |
| 50 | + } else { |
| 51 | + highlightCode += `${split.code}\n` |
| 52 | + } |
| 53 | + }) |
| 54 | + // If custom highlighter wraps code with starting <pre..., don't wrap code |
| 55 | + if (highlightCode.startsWith('<pre')) { |
| 56 | + return highlightCode |
| 57 | + } |
| 58 | + const tmpToken = { |
| 59 | + attrs: [['class', langName ? `language-${langName}` : '']] |
| 60 | + } |
| 61 | + const attrs = self.renderAttrs(tmpToken) |
| 62 | + return `<pre${attrs}><code${attrs}>${highlightCode.trim()}</code></pre>` |
| 63 | + } |
| 64 | +} |
| 65 | + |
| 66 | +// 自定义container |
| 67 | +function createContainer(klass) { |
| 68 | + return [ |
| 69 | + md_container, |
| 70 | + klass, |
| 71 | + { |
| 72 | + render(tokens, idx) { |
| 73 | + const token = tokens[idx] |
| 74 | + const info = token.info.trim().slice(klass.length).trim() || '' |
| 75 | + if (token.nesting === 1) { |
| 76 | + return `<div class="${klass} custom-block"><p class="custom-block-title">${info}</p>\n` |
| 77 | + } else { |
| 78 | + return `</div>\n` |
| 79 | + } |
| 80 | + } |
| 81 | + } |
| 82 | + ] |
| 83 | +} |
| 84 | + |
| 85 | +export function mdInstall(md) { |
| 86 | + md.use(md_prism, { plugins: ['line-highlight'] }) |
| 87 | + .use(...createContainer('tip')) |
| 88 | + .use(...createContainer('info')) |
| 89 | + .use(...createContainer('warning')) |
| 90 | + .use(...createContainer('danger')) |
| 91 | + .use(md_anchor, { |
| 92 | + permalink: true, |
| 93 | + permalinkBefore: true, |
| 94 | + permalinkSymbol: '', |
| 95 | + slugify: (s) => encodeURIComponent(s) |
| 96 | + }) |
| 97 | + .use(highlightLines) |
| 98 | +} |
0 commit comments