fix: code block render abnormal

This commit is contained in:
dribble-njr 2024-11-21 13:10:58 +08:00
parent a25dedf811
commit 4c16dcf34f
2 changed files with 18 additions and 14 deletions

View File

@ -158,23 +158,27 @@ export const useStore = defineStore(`store`, () => {
outputTemp += ` outputTemp += `
<style> <style>
.hljs.code__pre > .mac-sign { .hljs.code__pre > .mac-sign {
display: inline-block; display: flex;
}
.hljs.code__pre {
padding: 0!important;
}
.hljs.code__pre code {
display: -webkit-box;
padding: 0.5em 1em 1em;
overflow-x: auto;
text-indent: 0;
} }
</style> </style>
` `
} }
outputTemp += `
<style>
.code__pre {
padding: 0 !important;
}
.hljs.code__pre code {
display: -webkit-box;
padding: 0.5em 1em 1em;
overflow-x: auto;
text-indent: 0;
}
</style>
`
output.value = outputTemp output.value = outputTemp
} }

View File

@ -89,9 +89,9 @@ function transform(legend: string, text: string | null, title: string | null): s
const macCodeSvg = ` const macCodeSvg = `
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" width="45px" height="13px" viewBox="0 0 450 130"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" width="45px" height="13px" viewBox="0 0 450 130">
<ellipse cx="65" cy="65" rx="50" ry="52" stroke="rgb(220,60,54)" stroke-width="2" fill="rgb(237,108,96)" /> <ellipse cx="50" cy="65" rx="50" ry="52" stroke="rgb(220,60,54)" stroke-width="2" fill="rgb(237,108,96)" />
<ellipse cx="225" cy="65" rx="50" ry="52" stroke="rgb(218,151,33)" stroke-width="2" fill="rgb(247,193,81)" /> <ellipse cx="225" cy="65" rx="50" ry="52" stroke="rgb(218,151,33)" stroke-width="2" fill="rgb(247,193,81)" />
<ellipse cx="385" cy="65" rx="50" ry="52" stroke="rgb(27,161,37)" stroke-width="2" fill="rgb(100,200,86)" /> <ellipse cx="400" cy="65" rx="50" ry="52" stroke="rgb(27,161,37)" stroke-width="2" fill="rgb(100,200,86)" />
</svg> </svg>
`.trim() `.trim()