40 lines
4.1 KiB
JavaScript
40 lines
4.1 KiB
JavaScript
export function markdownToHtml(markdown) {
|
|
if (!markdown) return ''
|
|
|
|
let html = markdown
|
|
|
|
const lines = html.split('\n')
|
|
if (lines.length > 0) {
|
|
lines.shift()
|
|
html = lines.map(line => line.trimStart()).join('\n').trim()
|
|
}
|
|
|
|
html = html.replace(/^### (.*$)/gim, '<h3 style="font-size:28rpx;font-weight:600;color:#92400E;margin:24rpx 0 16rpx 0;padding:12rpx 20rpx;border-bottom:2rpx dashed #F59E0B;display:inline-block;background:linear-gradient(90deg,#FFFBEB 0%,transparent 100%)">$1</h3>')
|
|
html = html.replace(/^## (.*$)/gim, '<h2 style="font-size:32rpx;font-weight:bold;color:#B91C1C;margin:32rpx 0 20rpx 0;padding:16rpx 24rpx;background:linear-gradient(90deg,#FFF7ED 0%,transparent 100%);border-left:6rpx solid #F59E0B;border-radius:0 12rpx 12rpx 0">$1</h2>')
|
|
html = html.replace(/^# (.*$)/gim, '<h1 style="font-size:36rpx;font-weight:bold;color:#DC2626;margin:40rpx 0 24rpx 0;padding:20rpx 28rpx;background:linear-gradient(135deg,#FEF2F2 0%,#FEE2E2 100%);border-left:8rpx solid #DC2626;border-radius:12rpx;box-shadow:0 4rpx 12rpx rgba(220,38,38,0.1)">$1</h1>')
|
|
|
|
html = html.replace(/\*\*\*(.+?)\*\*\*/g, '<strong style="font-weight:bold;color:#DC2626;background:linear-gradient(135deg,#FEF2F2 0%,transparent 100%);padding:4rpx 12rpx;border-radius:6rpx;border:1rpx solid rgba(220,38,38,0.2)"><em style="font-style:normal;color:#7C3AED">$1</em></strong>')
|
|
html = html.replace(/\*\*(.+?)\*\*/g, '<strong style="font-weight:bold;color:#DC2626;background:linear-gradient(135deg,#FEF2F2 0%,transparent 100%);padding:4rpx 12rpx;border-radius:6rpx;border:1rpx solid rgba(220,38,38,0.2)">$1</strong>')
|
|
html = html.replace(/\*(.+?)\*/g, '<em style="font-style:normal;color:#7C3AED;font-weight:600;background:linear-gradient(135deg,#F5F3FF 0%,transparent 100%);padding:2rpx 8rpx;border-radius:4rpx">$1</em>')
|
|
html = html.replace(/__(.+?)__/g, '<strong style="font-weight:bold;color:#DC2626;background:linear-gradient(135deg,#FEF2F2 0%,transparent 100%);padding:4rpx 12rpx;border-radius:6rpx;border:1rpx solid rgba(220,38,38,0.2)">$1</strong>')
|
|
html = html.replace(/_(.+?)_/g, '<em style="font-style:normal;color:#7C3AED;font-weight:600;background:linear-gradient(135deg,#F5F3FF 0%,transparent 100%);padding:2rpx 8rpx;border-radius:4rpx">$1</em>')
|
|
html = html.replace(/`(.+?)`/g, '<code style="font-family:Courier New,monospace;background:linear-gradient(135deg,#FEF3C7 0%,#FDE68A 100%);padding:6rpx 16rpx;border-radius:8rpx;color:#92400E;font-size:24rpx;border:2rpx solid #F59E0B;font-weight:600;box-shadow:0 2rpx 8rpx rgba(245,158,11,0.2)">$1</code>')
|
|
|
|
html = html.replace(/^[-•]\s(.+)$/gim, '<li style="margin:16rpx 0;padding:16rpx 20rpx 16rpx 32rpx;background:linear-gradient(90deg,#F0FDF4 0%,transparent 100%);border-left:4rpx solid #10B981;color:#374151;line-height:2;border-radius:0 12rpx 12rpx 0;box-shadow:0 2rpx 8rpx rgba(16,185,129,0.1)">$1</li>')
|
|
html = html.replace(/^\*\s(.+)$/gim, '<li style="margin:16rpx 0;padding:16rpx 20rpx 16rpx 32rpx;background:linear-gradient(90deg,#F0FDF4 0%,transparent 100%);border-left:4rpx solid #10B981;color:#374151;line-height:2;border-radius:0 12rpx 12rpx 0;box-shadow:0 2rpx 8rpx rgba(16,185,129,0.1)">$1</li>')
|
|
html = html.replace(/^\+\s(.+)$/gim, '<li style="margin:16rpx 0;padding:16rpx 20rpx 16rpx 32rpx;background:linear-gradient(90deg,#F0FDF4 0%,transparent 100%);border-left:4rpx solid #10B981;color:#374151;line-height:2;border-radius:0 12rpx 12rpx 0;box-shadow:0 2rpx 8rpx rgba(16,185,129,0.1)">$1</li>')
|
|
|
|
html = html.replace(/(<li[^>]*>.*<\/li>\n?)+/g, function(match) {
|
|
return '<ul style="margin:24rpx 0;padding-left:0;list-style:none;background:rgba(240,253,244,0.3);padding:16rpx;border-radius:16rpx;border:1rpx solid rgba(16,185,129,0.2)">' + match + '</ul>'
|
|
})
|
|
|
|
html = html.replace(/\n\n/g, '</p><p style="margin:20rpx 0;text-align:justify;color:#4B5563;line-height:2.2;font-size:26rpx;letter-spacing:1rpx">')
|
|
html = html.replace(/\n/g, '<br style="display:block;margin:8rpx 0"/>')
|
|
|
|
if (!html.startsWith('<')) {
|
|
html = '<p style="margin:20rpx 0;text-align:justify;color:#4B5563;line-height:2.2;font-size:26rpx;letter-spacing:1rpx">' + html + '</p>'
|
|
}
|
|
|
|
return html
|
|
}
|