amass/md
1
0
Fork 0
mirror of https://github.com/doocs/md.git synced 2024-11-24 19:10:34 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: dark style of codeblock (#388)

Browse Source
This commit is contained in:
YangFong 2024-09-07 21:43:18 +08:00 committed by GitHub
parent 0acc49a88c
commit 744785bd84
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 15 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/stores/index.js
View File

@ -89,27 +89,16 @@ export const useStore = defineStore(`store`, () => {
// 去除第一行的 margin-top // 去除第一行的 margin-top
outputTemp = outputTemp.replace(/(style=".*?)"/, `$1;margin-top: 0"`) outputTemp = outputTemp.replace(/(style=".*?)"/, `$1;margin-top: 0"`)
if (isCiteStatus.value) {
// 引用脚注 // 引用脚注
outputTemp += renderer.buildFootnotes() outputTemp += renderer.buildFootnotes()
// 附加的一些 style // 附加的一些 style
outputTemp += renderer.buildAddition() outputTemp += renderer.buildAddition()
}
if (isMacCodeBlock.value) { if (isMacCodeBlock.value) {
outputTemp += ` outputTemp += `
<style> <style>
.hljs.code__pre::before { .hljs.code__pre > .mac-sign {
position: initial; display: inline-block;
padding: initial;
content: '';
display: block;
height: 25px;
background-color: transparent;
background-image: url("https://doocs.oss-cn-shenzhen.aliyuncs.com/img/123.svg");
background-position: 14px 10px!important;
background-repeat: no-repeat;
background-size: 40px!important;
} }
.hljs.code__pre { .hljs.code__pre {

10
src/utils/renderer.ts
View File

@ -79,6 +79,14 @@ function transform(legend: string, text: string | null, title: string | null): s
return `` return ``
} }
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">
<ellipse cx="65" 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="385" cy="65" rx="50" ry="52" stroke="rgb(27,161,37)" stroke-width="2" fill="rgb(100,200,86)" />
</svg>
`.trim()
export function initRenderer(opts: IOpts) { export function initRenderer(opts: IOpts) {
const footnotes: [number, string, string][] = [] const footnotes: [number, string, string][] = []
let footnoteIndex: number = 0 let footnoteIndex: number = 0
@ -165,7 +173,7 @@ export function initRenderer(opts: IOpts) {
.replace(/\n/g, `<br/>`) .replace(/\n/g, `<br/>`)
.replace(/(>[^<]+)|(^[^<]+)/g, str => str.replace(/\s/g, `&nbsp;`)) .replace(/(>[^<]+)|(^[^<]+)/g, str => str.replace(/\s/g, `&nbsp;`))
return `<pre class="hljs code__pre" ${styles(`code_pre`)}><code class="language-${lang}" ${styles(`code`)}>${highlighted}</code></pre>` return `<pre class="hljs code__pre" ${styles(`code_pre`)}><span class="mac-sign" style="padding: 10px 14px 0;" hidden>${macCodeSvg}</span><code class="language-${lang}" ${styles(`code`)}>${highlighted}</code></pre>`
}, },
codespan({ text }: Tokens.Codespan): string { codespan({ text }: Tokens.Codespan): string {