feat(web): 在 renderMarkdown 中集成 SVG 渲染(DOMPurify 默认已支持 SVG)
- 导入 renderSvgBlocks() 并在 markdown-it 渲染前调用 - cacheKey 基于 SVG 转换后的内容,保证缓存一致性 - DOMPurify 配置保持不变(默认白名单已支持 SVG)
This commit is contained in:
parent
6938dfe18d
commit
f764415e4d
@ -6,6 +6,7 @@ import { createHighlighter } from 'shiki'
|
|||||||
import yaml from 'js-yaml'
|
import yaml from 'js-yaml'
|
||||||
import { escapeHtml } from '@/utils/html'
|
import { escapeHtml } from '@/utils/html'
|
||||||
import { normalizeCodeLanguage } from '@/utils/file_preview'
|
import { normalizeCodeLanguage } from '@/utils/file_preview'
|
||||||
|
import { renderSvgBlocks } from './svgRenderer'
|
||||||
|
|
||||||
const markdownKatexPlugin = markdownItKatex.default || markdownItKatex
|
const markdownKatexPlugin = markdownItKatex.default || markdownItKatex
|
||||||
const FRONTMATTER_MARKER = '---'
|
const FRONTMATTER_MARKER = '---'
|
||||||
@ -198,19 +199,20 @@ const setCachedHtml = (cacheKey, html) => {
|
|||||||
export const renderMarkdown = async (content, { theme = 'github-light' } = {}) => {
|
export const renderMarkdown = async (content, { theme = 'github-light' } = {}) => {
|
||||||
try {
|
try {
|
||||||
const normalizedContent = normalizeHtmlTagQuotes(content)
|
const normalizedContent = normalizeHtmlTagQuotes(content)
|
||||||
|
const svgContent = renderSvgBlocks(normalizedContent)
|
||||||
const themeName = normalizeTheme(theme)
|
const themeName = normalizeTheme(theme)
|
||||||
const needsHighlight = hasCodeFence(normalizedContent)
|
const needsHighlight = hasCodeFence(svgContent)
|
||||||
const cacheKey = `${needsHighlight ? themeName : 'plain'}\u0000${normalizedContent}`
|
const cacheKey = `${needsHighlight ? themeName : 'plain'}\u0000${svgContent}`
|
||||||
const cachedHtml = getCachedHtml(cacheKey)
|
const cachedHtml = getCachedHtml(cacheKey)
|
||||||
if (cachedHtml !== undefined) return cachedHtml
|
if (cachedHtml !== undefined) return cachedHtml
|
||||||
|
|
||||||
if (needsHighlight) {
|
if (needsHighlight) {
|
||||||
const highlighter = await getHighlighter()
|
const highlighter = await getHighlighter()
|
||||||
await ensureLanguages(highlighter, collectCodeFenceLanguages(normalizedContent))
|
await ensureLanguages(highlighter, collectCodeFenceLanguages(svgContent))
|
||||||
}
|
}
|
||||||
|
|
||||||
const md = await getRenderer(themeName, needsHighlight)
|
const md = await getRenderer(themeName, needsHighlight)
|
||||||
const html = DOMPurify.sanitize(md.render(normalizedContent), {
|
const html = DOMPurify.sanitize(md.render(svgContent), {
|
||||||
ADD_TAGS: ['input'],
|
ADD_TAGS: ['input'],
|
||||||
ADD_ATTR: [
|
ADD_ATTR: [
|
||||||
'class',
|
'class',
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user