代码组件增加md高亮
parent
8a98529d0f
commit
1ae0a3b8f7
|
@ -17,6 +17,15 @@ const STR = /(['"`])(.*?)\1/g
|
||||||
const NUM = /\b(\d+)\b/g
|
const NUM = /\b(\d+)\b/g
|
||||||
const FN = /([\.\s])([a-zA-Z$][\da-zA-Z_]*)(\(.*?\))/g
|
const FN = /([\.\s])([a-zA-Z$][\da-zA-Z_]*)(\(.*?\))/g
|
||||||
const CM = /(?=\s)([ ]*\/\/.*)|(^\/\/.*)/g
|
const CM = /(?=\s)([ ]*\/\/.*)|(^\/\/.*)/g
|
||||||
|
const INLINE = {
|
||||||
|
code: /`([^`]*?[^`\\\s])`/g,
|
||||||
|
strong: [/__([\s\S]*?[^\s\\])__(?!_)/g, /\*\*([\s\S]*?[^\s\\])\*\*(?!\*)/g],
|
||||||
|
em: [/_([\s\S]*?[^\s\\])_(?!_)/g, /\*([\s\S]*?[^\s\\*])\*(?!\*)/g],
|
||||||
|
del: /~~([\s\S]*?[^\s\\~])~~/g,
|
||||||
|
qlink: /\[([^\]]*?)\]\[(\d*?)\]/g, // 引用链接
|
||||||
|
img: /\!\[([^\]]*?)\]\(([^)]*?)\)/g,
|
||||||
|
a: /\[([^\]]*?)\]\(([^)]*?)(\s+"([\s\S]*?)")*?\)/g
|
||||||
|
}
|
||||||
|
|
||||||
function parseJs(code) {
|
function parseJs(code) {
|
||||||
return code
|
return code
|
||||||
|
@ -41,6 +50,26 @@ function rebuild(code) {
|
||||||
.replace(/\[(\/?)num\]/g, (m, s) => (s ? '</i>' : '<i class="pp">'))
|
.replace(/\[(\/?)num\]/g, (m, s) => (s ? '</i>' : '<i class="pp">'))
|
||||||
.replace(/\[(\/?)fn\]/g, (m, s) => (s ? '</i>' : '<i class="b">'))
|
.replace(/\[(\/?)fn\]/g, (m, s) => (s ? '</i>' : '<i class="b">'))
|
||||||
.replace(/\[(\/?)cm\]/g, (m, s) => (s ? '</i>' : '<i class="gr">'))
|
.replace(/\[(\/?)cm\]/g, (m, s) => (s ? '</i>' : '<i class="gr">'))
|
||||||
|
.replace(/\[(\/?)bold\]/g, (m, s) => (s ? '</i>' : '<i class="bold">'))
|
||||||
|
.replace(/\[(\/?)link\]/g, (m, s) => (s ? '</i>' : '<i class="link">'))
|
||||||
|
}
|
||||||
|
|
||||||
|
export function colorMd(code) {
|
||||||
|
code = code
|
||||||
|
.replace(INLINE.strong[0], '[cm]__[/cm]<strong>$1</strong>[cm]__[/cm]')
|
||||||
|
.replace(INLINE.strong[1], '[cm]**[/cm]<strong>$1</strong>[cm]**[/cm]')
|
||||||
|
.replace(INLINE.em[0], '[cm]_[/cm]<em>$1</em>[cm]_[/cm]')
|
||||||
|
.replace(INLINE.em[1], '[cm]*[/cm]<em>$1</em>[cm]*[/cm]')
|
||||||
|
.replace(INLINE.del, '[cm]~~[/cm]<del>$1</del>[cm]~~[/cm]')
|
||||||
|
.replace(INLINE.qlink, '[[attr]$1[/attr]]([link]$2[/link])')
|
||||||
|
.replace(INLINE.img, '![[attr]$1[/attr]]([link]$2[/link])')
|
||||||
|
.replace(INLINE.a, (m1, txt, link, m2, attr = '') => {
|
||||||
|
if (attr) {
|
||||||
|
attr = ` "[tag]${attr}[/tag]"`
|
||||||
|
}
|
||||||
|
return `[[attr]${txt}[/attr]]([link]${link}[/link]${attr})`
|
||||||
|
})
|
||||||
|
return rebuild(code)
|
||||||
}
|
}
|
||||||
|
|
||||||
export function colorHtml(code) {
|
export function colorHtml(code) {
|
||||||
|
|
|
@ -129,6 +129,14 @@
|
||||||
.pp {
|
.pp {
|
||||||
color: #6a1ea8;
|
color: #6a1ea8;
|
||||||
}
|
}
|
||||||
|
.bold {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.link {
|
||||||
|
font-style: italic;
|
||||||
|
text-decoration: underline;
|
||||||
|
color: var(--color-grey-2);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -170,7 +178,7 @@
|
||||||
import '../scroll/index'
|
import '../scroll/index'
|
||||||
import '../layer/index'
|
import '../layer/index'
|
||||||
import $ from '../utils'
|
import $ from '../utils'
|
||||||
import { colorHtml, colorCss, colorJs } from './colorful'
|
import { colorHtml, colorCss, colorJs, colorMd } from './colorful'
|
||||||
|
|
||||||
export default class Code {
|
export default class Code {
|
||||||
props = {
|
props = {
|
||||||
|
@ -220,6 +228,11 @@ export default class Code {
|
||||||
txt = colorCss(txt)
|
txt = colorCss(txt)
|
||||||
break
|
break
|
||||||
|
|
||||||
|
case 'md':
|
||||||
|
case 'markdown':
|
||||||
|
txt = colorMd(txt)
|
||||||
|
break
|
||||||
|
|
||||||
case 'js':
|
case 'js':
|
||||||
case 'ts':
|
case 'ts':
|
||||||
case 'javascript':
|
case 'javascript':
|
||||||
|
|
|
@ -6,8 +6,8 @@
|
||||||
|
|
||||||
const HR_LIST = ['=', '-', '_', '*']
|
const HR_LIST = ['=', '-', '_', '*']
|
||||||
const LIST_RE = /^(([\+\-\*])|(\d+\.))\s/
|
const LIST_RE = /^(([\+\-\*])|(\d+\.))\s/
|
||||||
const TODO_RE = /^\-\s\[(x|\s)\]\s/
|
const TODO_RE = /^[\+\-\*]\s\[(x|\s)\]\s/
|
||||||
const ESCAPE_RE = /\\([-+*_`])/g
|
const ESCAPE_RE = /\\([-+*_`\]\[\(\)])/g
|
||||||
const QLINK_RE = /^\[(\d+)\]: ([\S]+)\s*?((['"])[\s\S]*?\4)?\s*?$/
|
const QLINK_RE = /^\[(\d+)\]: ([\S]+)\s*?((['"])[\s\S]*?\4)?\s*?$/
|
||||||
const TAG_RE = /<([\w\-]+)([\w\W]*?)>/g
|
const TAG_RE = /<([\w\-]+)([\w\W]*?)>/g
|
||||||
const ATTR_RE = /\s*?on[a-zA-Z]+="[^"]*?"\s*?/g
|
const ATTR_RE = /\s*?on[a-zA-Z]+="[^"]*?"\s*?/g
|
||||||
|
@ -66,6 +66,7 @@ const Helper = {
|
||||||
},
|
},
|
||||||
isQLink(str) {
|
isQLink(str) {
|
||||||
if (QLINK_RE.test(str)) {
|
if (QLINK_RE.test(str)) {
|
||||||
|
// l: link, t: title, $1: index
|
||||||
return { [RegExp.$1]: { l: RegExp.$2, t: RegExp.$3 } }
|
return { [RegExp.$1]: { l: RegExp.$2, t: RegExp.$3 } }
|
||||||
}
|
}
|
||||||
return false
|
return false
|
||||||
|
@ -150,7 +151,7 @@ const Decoder = {
|
||||||
var stat = todoChecked === 1 ? 'checked' : ''
|
var stat = todoChecked === 1 ? 'checked' : ''
|
||||||
var txt = todoChecked === 1 ? `<del>${word}</del>` : word
|
var txt = todoChecked === 1 ? `<del>${word}</del>` : word
|
||||||
|
|
||||||
return `<section><wc-checkbox-item readonly ${stat}>${txt}</wc-checkbox-item></section>`
|
return `<section><wc-checkbox readonly ${stat}>${txt}</wc-checkbox></section>`
|
||||||
}
|
}
|
||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
|
|
Reference in New Issue