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

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

@ -1,15 +1,19 @@
html, html,
html { html {
overflow-y: scroll !important; overflow-y: scroll !important;
width: 90% !important width: 90% !important;
} }
body { body {
overflow: initial !important;
color: var(--top-color);
font-family: georgia, times, serif; font-family: georgia, times, serif;
font-size: 14pt; font-size: 14pt;
max-width: 800px; max-width: 800px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
margin-top: revert;
margin-bottom: revert;
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
} }
@ -28,8 +32,8 @@ ul li p {
} }
thead tr { thead tr {
background-color: #333; background-color: var(--editor-table-head-background-color);
color: #eee; color: var(--editor-table-head-color);
} }
th, th,
@ -38,23 +42,26 @@ td {
} }
tbody tr:nth-of-type(even) { tbody tr:nth-of-type(even) {
background-color: #f3f3f3; background-color: var(--editor-table-even-background-color);
} }
a[href] { a[href] {
text-decoration: none; text-decoration: none;
color: var(--link-color);
} }
blockquote { blockquote {
border-left: 1px solid #333; border-left: 1px solid var(--editor-blockquote-border-color);
margin-left: 2px; margin-left: 2px;
padding-left: 10px; padding-left: 10px;
background-color: var(--editor-blockquote-background-color);
color: var(--editor-blockquote-color);
} }
hr { hr {
margin: 1em 0 1em 0; margin: 1em 0 1em 0;
text-align: center; text-align: center;
border-color: #777; border-color: var(--editor-ruler-color);
border-width: 0; border-width: 0;
border-style: dotted; border-style: dotted;
} }
@ -65,5 +72,5 @@ hr:after {
} }
span.highlight { 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; return url;
}, },
}); });
const customStyles = await editor.getUiOption("customStyles");
const darkMode = await clientStore.get("darkMode");
const theme = darkMode ? "dark" : "light";
await editor.showPanel( await editor.showPanel(
"rhs", "rhs",
2, 2,
`<html><head><style>${css}</style></head><body><div id="root">${html}</div></body></html>`, `<html>
js, <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}
`,
); );
} }