mingzailao
/
silverbullet
mirror of https://github.com/silverbulletmd/silverbullet.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Inject custom styles and theme into markdown preview pane (#741)

pull/744/head
Joe Krill 2024-02-23 03:01:38 -05:00 committed by GitHub
parent 29e55ca6b1
commit da762356db
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 35 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
plugs/markdown/assets/preview.css
View File

@ -1,15 +1,19 @@
html,
html {
overflow-y: scroll !important;
width: 90% !important
width: 90% !important;
}
body {
overflow: initial !important;
color: var(--top-color);
font-family: georgia, times, serif;
font-size: 14pt;
max-width: 800px;
margin-left: auto;
margin-right: auto;
margin-top: revert;
margin-bottom: revert;
padding-left: 20px;
padding-right: 20px;
}
@ -28,8 +32,8 @@ ul li p {
}
thead tr {
background-color: #333;
color: #eee;
background-color: var(--editor-table-head-background-color);
color: var(--editor-table-head-color);
}
th,
@ -38,23 +42,26 @@ td {
}
tbody tr:nth-of-type(even) {
background-color: #f3f3f3;
background-color: var(--editor-table-even-background-color);
}
a[href] {
text-decoration: none;
color: var(--link-color);
}
blockquote {
border-left: 1px solid #333;
border-left: 1px solid var(--editor-blockquote-border-color);
margin-left: 2px;
padding-left: 10px;
background-color: var(--editor-blockquote-background-color);
color: var(--editor-blockquote-color);
}
hr {
margin: 1em 0 1em 0;
text-align: center;
border-color: #777;
border-color: var(--editor-ruler-color);
border-width: 0;
border-style: dotted;
}
@ -65,5 +72,5 @@ hr:after {
}
span.highlight {
background-color: yellow;
background-color: var(--highlight-color);
}

22
plugs/markdown/preview.ts
View File

@ -25,11 +25,29 @@ export async function updateMarkdownPreview() {
return url;
},
});
const customStyles = await editor.getUiOption("customStyles");
const darkMode = await clientStore.get("darkMode");
const theme = darkMode ? "dark" : "light";
await editor.showPanel(
"rhs",
2,
`<html><head><style>${css}</style></head><body><div id="root">${html}</div></body></html>`,
js,
`<html>
<head>
<link rel="stylesheet" href="/.client/main.css" />
<style>
${css}
${customStyles ?? ""}
</style>
</head>
<body>
<div id="root" class="sb-preview">${html}</div>
</body>
</html>`,
`
document.documentElement.dataset.theme = ${JSON.stringify(theme)};
${js}
`,
);
}