@ -16,24 +16,41 @@ marked.use(
} )
} )
)
)
function highlightCode ( code : string , lang : string ) : string {
if ( lang && hljs . getLanguage ( lang ) ) {
return hljs . highlight ( code , { language : lang } ) . value
}
return hljs . highlightAuto ( code ) . value
}
function highlightHtmlCode ( html : string ) : string {
function highlightHtmlCode ( html : string ) : string {
const doc = new DOMParser ( ) . parseFromString ( html , 'text/html' )
const doc = new DOMParser ( ) . parseFromString ( html , 'text/html' )
const blocks = Array . from ( doc . querySelectorAll < HTMLElement > ( 'pre' ) )
for ( const pre of blocks ) {
const container = pre . closest < HTMLElement > ( '.ql-code-block-container' )
const codeEl = pre . querySelector < HTMLElement > ( 'code' )
const blocks = Array . from ( doc . querySelectorAll < HTMLElement > ( 'pre, .ql-code-block-container' ) )
for ( const block of blocks ) {
if ( block . classList . contains ( 'ql-code-block-container' ) ) {
const lines = Array . from ( block . querySelectorAll < HTMLElement > ( '.ql-code-block' ) )
const text = lines . map ( ( el ) = > el . textContent ? ? '' ) . join ( '\n' ) . replace ( /\n$/ , '' )
const lang = block . getAttribute ( 'data-language' ) ? ? ''
const pre = doc . createElement ( 'pre' )
pre . className = 'hljs'
const code = doc . createElement ( 'code' )
code . className = lang ? ` hljs language- ${ lang } ` : 'hljs'
code . innerHTML = highlightCode ( text , lang )
pre . appendChild ( code )
block . replaceWith ( pre )
continue
}
const container = block . closest < HTMLElement > ( '.ql-code-block-container' )
const codeEl = block . querySelector < HTMLElement > ( 'code' )
let lang = container ? . getAttribute ( 'data-language' ) ? ? ''
let lang = container ? . getAttribute ( 'data-language' ) ? ? ''
if ( ! lang && codeEl ) {
if ( ! lang && codeEl ) {
const m = ( codeEl . className || '' ) . match ( /language-([\w-]+)/ )
const m = ( codeEl . className || '' ) . match ( /language-([\w-]+)/ )
if ( m ) lang = m [ 1 ]
if ( m ) lang = m [ 1 ]
}
}
const text = codeEl ? codeEl . textContent ? ? '' : pre . textContent ? ? ''
let highlighted : string
if ( lang && hljs . getLanguage ( lang ) ) {
highlighted = hljs . highlight ( text , { language : lang } ) . value
} else {
highlighted = hljs . highlightAuto ( text ) . value
}
const text = codeEl ? codeEl . textContent ? ? '' : block . textContent ? ? ''
const highlighted = highlightCode ( text , lang )
if ( codeEl ) {
if ( codeEl ) {
codeEl . innerHTML = highlighted
codeEl . innerHTML = highlighted
codeEl . classList . add ( 'hljs' )
codeEl . classList . add ( 'hljs' )
@ -41,8 +58,8 @@ function highlightHtmlCode(html: string): string {
const newCode = doc . createElement ( 'code' )
const newCode = doc . createElement ( 'code' )
newCode . className = 'hljs'
newCode . className = 'hljs'
newCode . innerHTML = highlighted
newCode . innerHTML = highlighted
pre . innerHTML = ''
pre . appendChild ( newCode )
block . innerHTML = ''
block . appendChild ( newCode )
}
}
}
}
return doc . body . innerHTML
return doc . body . innerHTML