JiXinHui
/
YingXingAI
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 调整Markdown渲染样式，确保内容自动换行并优化代码块显示

This commit is contained in:
yangzhe 2025-07-11 15:58:10 +08:00
parent 089ba82ec9
commit 8cfd8d3e9c
1 changed files with 35 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
components/markdown-viewer/markdown-viewer.vue
View File

@ -54,9 +54,21 @@ export default {
renderedContent() {
if (!this.content) return '';
try {
// 添加自定义样式
const styleTag = this.customStyle ?
`<style>${this.customStyle}</style>` : '';
// 添加自定义样式，确保内容自动换行
const styleTag = `<style>
* {
max-width: 99% !important;
word-break: break-word !important;
overflow-wrap: break-word !important;
}
pre, code {
white-space: pre-wrap !important;
word-wrap: break-word !important;
word-break: break-word !important;
overflow-wrap: break-word !important;
}
${this.customStyle || ''}
</style>`;
// 渲染Markdown为HTML
const htmlContent = marked(this.content);
@ -77,5 +89,25 @@ export default {
.markdown-container {
padding: 20rpx;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
}
/* 全局样式，确保所有元素都能自动换行 */
.markdown-container >>> * {
max-width: 99% !important;
white-space: normal !important;
word-break: break-word !important;
overflow-wrap: break-word !important;
}
/* 特别处理代码块 */
.markdown-container >>> pre,
.markdown-container >>> code {
white-space: pre-wrap !important;
word-break: break-word !important;
overflow-wrap: break-word !important;
max-width: 99% !important;
}
</style>