优化模版样式

This commit is contained in:
tianyaxiang 2025-02-01 14:23:00 +08:00
parent 6db55b4dd9
commit d6806b2757
2 changed files with 59 additions and 34 deletions

View File

@ -20,7 +20,7 @@ export const templates: Template[] = [
themeColor: '#166534',
fontFamily: '-apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif',
textAlign: 'left',
lineHeight: '1.75',
lineHeight: '2',
padding: '1rem 1.5rem',
maxWidth: '100%',
margin: '0 auto',

View File

@ -38,23 +38,27 @@ function preprocessMarkdown(markdown: string): string {
}
// Initialize marked instance
const marked = new Marked()
// 创建基础渲染器
const baseRenderer = new marked.Renderer()
// 重写 strong 渲染器
baseRenderer.strong = function(text) {
return `<strong>${text}</strong>`
}
// 应用配置和渲染器
marked.setOptions({
const marked = new Marked({
gfm: true,
breaks: true,
async: false,
pedantic: false,
renderer: baseRenderer
pedantic: false
})
// 应用配置
marked.use({
breaks: true,
gfm: true,
walkTokens(token: Tokens.Generic) {
// 确保列表项被正确处理
if (token.type === 'list') {
(token as Tokens.List).items.forEach(item => {
if (item.task) {
item.checked = !!item.checked
}
})
}
}
})
const defaultOptions: RendererOptions = {
@ -83,9 +87,6 @@ const defaultOptions: RendererOptions = {
export function convertToWechat(markdown: string, options: RendererOptions = defaultOptions): string {
const renderer = new marked.Renderer()
// 继承基础渲染器
Object.setPrototypeOf(renderer, baseRenderer)
// 合并选项
const mergedOptions = {
base: { ...defaultOptions.base, ...options.base },
@ -156,14 +157,28 @@ export function convertToWechat(markdown: string, options: RendererOptions = def
}
// 重写 list 方法
renderer.list = function(token: Tokens.List): string {
renderer.list = function(token: Tokens.List) {
const tag = token.ordered ? 'ol' : 'ul'
try {
const style = mergedOptions.block?.[token.ordered ? 'ol' : 'ul']
const style = {
...(mergedOptions.block?.[token.ordered ? 'ol' : 'ul'] || {}),
listStyle: token.ordered ? 'decimal' : 'disc',
paddingLeft: '2em',
marginBottom: '16px'
}
const styleStr = cssPropertiesToString(style)
const startAttr = token.ordered && token.start !== 1 ? ` start="${token.start}"` : ''
return `<${tag}${startAttr}${styleStr ? ` style="${styleStr}"` : ''}>${token.items.map(item => renderer.listitem(item)).join('')}</${tag}>`
const items = token.items.map(item => {
let itemText = item.text
if (item.task) {
const checkbox = `<input type="checkbox"${item.checked ? ' checked=""' : ''} disabled="" /> `
itemText = checkbox + itemText
}
return renderer.listitem({ ...item, text: itemText })
}).join('')
return `<${tag}${startAttr}${styleStr ? ` style="${styleStr}"` : ''}>${items}</${tag}>`
} catch (error) {
console.error(`Error rendering list: ${error}`)
return `<${tag}>${token.items.map(item => renderer.listitem(item)).join('')}</${tag}>`
@ -173,28 +188,38 @@ renderer.list = function(token: Tokens.List): string {
// 重写 listitem 方法
renderer.listitem = function(item: Tokens.ListItem) {
try {
const style = mergedOptions.inline?.listitem
const style = {
...(mergedOptions.inline?.listitem || {}),
marginBottom: '8px',
display: 'list-item'
}
const styleStr = cssPropertiesToString(style)
// 移除列表项开头的破折号和空格
let itemText = item.text.replace(/^- /, '')
// 处理任务列表项
if (item.task) {
const checkbox = `<input type="checkbox"${item.checked ? ' checked=""' : ''} disabled="" /> `
itemText = checkbox + itemText
// 处理嵌套列表
let content = item.text
if (item.tokens) {
content = item.tokens.map(token => {
if (token.type === 'list') {
// 递归处理嵌套列表
return renderer.list(token as Tokens.List)
} else {
// 处理其他类型的 token
const tokens = marked.Lexer.lexInline(token.raw)
return marked.Parser.parseInline(tokens, { renderer })
}
}).join('')
} else {
// 如果没有 tokens则按普通文本处理
const tokens = marked.Lexer.lexInline(content)
content = marked.Parser.parseInline(tokens, { renderer })
}
// 使用 Lexer 和 Parser 处理剩余的内联标记
const tokens = marked.Lexer.lexInline(itemText)
const content = marked.Parser.parseInline(tokens, { renderer })
return `<li${styleStr ? ` style="${styleStr}"` : ''}>${content}</li>`
} catch (error) {
console.error(`Error rendering list item: ${error}`)
return `<li>${item.text}</li>`
}
}
}
// Convert Markdown to HTML using the custom renderer
const html = marked.parse(markdown, { renderer }) as string