在论坛上收集的有效的思源代码片段,思源笔记版本v3.1.3。
在思源笔记设置-外观-代码片段
中添加CSS或者JS代码片段并启用即可。
1. CSS.表格宽度自适应
使用如下代码块可以让表格自适应宽度(自动换行)
来源: https://ld246.com/article/1726116689636/comment/1726126776087#comments;
1 2 3 4 5
| .b3-typography table, .protyle-wysiwyg table { width: 100%; display: table; }
|
添加前,表格超长后需要滚动才能看到后续内容
添加后,宽度自适应,无需滚动
2. CSS.代码块MAC美化
默认情况下思源的代码块和其他块的差距没有那么明显,这里给出CSS片段,可以在不安装代码块美化插件的情况下直接让你的代码块变成MAC样式。
来源:https://ld246.com/article/1715315635131;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106
| pre code.hljs { display: block; overflow-x: auto; padding: 1em }
code.hljs { padding: 3px 5px }
.hljs-comment, .hljs-quote { color: #969896 }
.hljs-deletion, .hljs-name, .hljs-regexp, .hljs-selector-class, .hljs-selector-id, .hljs-tag, .hljs-template-variable, .hljs-variable { color: #d54e53 }
.hljs-built_in, .hljs-link, .hljs-literal, .hljs-meta, .hljs-number, .hljs-params, .hljs-type { color: #e78c45 }
.hljs-attribute { color: #e7c547 }
.hljs-addition, .hljs-bullet, .hljs-string, .hljs-symbol { color: #b9ca4a }
.hljs-section, .hljs-title { color: #7aa6da }
.hljs-keyword, .hljs-selector-tag { color: #c397d8 }
.hljs { background: #282828; color: #eaeaea }
.hljs-emphasis { font-style: italic }
.hljs-strong { font-weight: 700 }
.b3-typography .code-block:not(pre), .protyle-wysiwyg .code-block:not(pre) { padding: 2em 1em 1.6em; margin: 1em 0; box-sizing: border-box; background-color: #282828; }
.code-block::after { content: ' '; position: absolute; background: #fa625c; box-shadow: 23px 0 #fdbc40, 45px 0 #35cd4b; border-radius: var(--b3-border-radius-round); top: 10px; left: 15px; height: 12px; width: 12px; z-index: 1; border-radius: 6px; }
.b3-typography .code-block:not(pre) .protyle-action .protyle-action__language, .protyle-wysiwyg .code-block:not(pre) .protyle-action .protyle-action__language { font-size: 85%; color: #fff8ed; margin-top: 0px; align-self: center; margin-left: 75px; }
.code-block .protyle-action .protyle-action__copy, .code-block .protyle-action .protyle-action__menu { margin-top: 0px; color: #fff; background-color: var(--S-list-background); }
|
这里改用官方的默认黑色主题midnight来测试,修改前,代码块和其他部分区分度纯靠颜色,而且字体离代码块边缘太近了。
修改后,顿时好看多了。
3. CSS+JS.多级列表子弹线
来源: https://ld246.com/article/1693238082034;
css片段
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91
| .protyle-wysiwyg [data-node-id].li:has(.block-focus)>.protyle-action{ color:rgb(70, 110, 220);; } .protyle-wysiwyg [data-node-id].li:has(.block-focus)>.protyle-action svg{ margin:0; width:16px; height:16px; padding:0px 0px } .protyle-wysiwyg [data-node-id].li:has(.block-focus)>.list:has(.block-focus)>.li::after{ content:""; display:block; position:absolute; pointer-events:none; width:34px; left:-18px; top:-20px; border-style:solid; border-color:rgb(70, 110, 220);; } .protyle-wysiwyg [data-node-id].li:has(.block-focus)>.list:has(.block-focus)>.li:not(:has(.block-focus))::after{ bottom:-2px; border-width:0 0 0 2px } .protyle-wysiwyg [data-node-id].li:has(.block-focus)>.list:has(.block-focus)>.li:has(.block-focus)::after{ height:38px; border-radius:0 0 0 8px; border-width:0 0 2px 2px } .protyle-wysiwyg [data-node-id].li:has(.block-focus)>.list:has(.block-focus)>.li:has(.block-focus)~.li:not(:has(.block-focus))::after{ border-color:rgba(0,0,0,0) } .protyle-wysiwyg [data-node-id].li:has(.block-focus)>.list:has(.block-focus)>.li[data-subtype=o]::after{ width:24px } .protyle-wysiwyg [data-node-id].li:has(.block-focus)>.list:has(.block-focus)>.li[data-subtype=t]::after{ width:28px } .protyle-wysiwyg [data-node-id].li:has(.block-focus)>[data-node-id]::after{ content:""; display:block; position:absolute; pointer-events:none; width:34px; left:-18px; top:-20px; border-style:solid; border-color:rgb(70, 110, 220); top:20px; height:calc(100% + 4px); border-width:0 0 0 2px } .protyle-wysiwyg [data-node-id].li:has(.block-focus)>[data-node-id]:has(+.list)::after{ height:auto; bottom:0 } .protyle-wysiwyg [data-node-id].li:has(.block-focus)>[data-node-id][data-type=NodeHeading]::after{ top:0; height:185% } .protyle-wysiwyg [data-node-id].li:has(.block-focus)>[data-node-id].list:has(.block-focus)::after,.protyle-wysiwyg [data-node-id].li:has(.block-focus)>[data-node-id].list:has(.block-focus)~[data-node-id]::after,.protyle-wysiwyg [data-node-id].li:has(.block-focus)>[data-node-id].bq:has(.block-focus)::after,.protyle-wysiwyg [data-node-id].li:has(.block-focus)>[data-node-id].bq:has(.block-focus)~[data-node-id]::after,.protyle-wysiwyg [data-node-id].li:has(.block-focus)>[data-node-id].sb:has(.block-focus)::after,.protyle-wysiwyg [data-node-id].li:has(.block-focus)>[data-node-id].sb:has(.block-focus)~[data-node-id]::after{ border-color:rgba(0,0,0,0) } .protyle-wysiwyg [data-node-id].li:has(.block-focus)[fold="1"]>[data-node-id]::after,.protyle-wysiwyg [data-node-id].li:has(.block-focus):has(>.block-focus)>[data-node-id]::after{ border-color:rgba(0,0,0,0) } .protyle-wysiwyg [data-node-id].li:has(.block-focus)[data-subtype=o]:has(.block-focus)>.list:has(.block-focus)>.li::after{ top:-10px } .protyle-wysiwyg [data-node-id].li:has(.block-focus)[data-subtype=o]:has(.block-focus)>.list:has(.block-focus)>.li:has(.block-focus)::after{ height:28px } .protyle-wysiwyg [data-node-id].li:has(.block-focus)[data-subtype=t]:has(.block-focus)>.protyle-action{ color:rgb(70, 110, 220); } .protyle-wysiwyg [data-node-id].li:has(.block-focus)[data-subtype=t]:has(.block-focus)>.protyle-action svg{ margin:0; width:14px; height:14px; padding:0px 0px } .protyle-wysiwyg [data-node-id].li:has(.block-focus)[data-subtype=t]:has(.block-focus)>.list:has(.block-focus)>.li::after{ top:-14px } .protyle-wysiwyg [data-node-id].li:has(.block-focus)[data-subtype=t]:has(.block-focus)>.list:has(.block-focus)>.li:has(.block-focus)::after{ height:32px } .protyle-wysiwyg [data-node-id].li:has(.block-focus)[data-subtype=t]:has(.block-focus).protyle-task--done>.list:has(.block-focus)>.li::after{ border-color:rgba(139, 139, 139) }
|
js片段
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61
| let cachedEditorBlocks = []; let focusedBlock = null;
function initEditorBlocksCache() { const editors = document.querySelectorAll('.protyle-wysiwyg'); editors.forEach(editor => { if (!editor.classList.contains('NodeAttributeView')) { cachedEditorBlocks.push(...editor.querySelectorAll('[data-node-id]')); } }); }
function handleBlockFocus(e) { let target; if (e.type === 'mouseup') { target = e.target.closest('[data-node-id]'); } else if (e.type === 'keyup') { const activeElement = document.activeElement; if (activeElement.classList.contains('protyle-wysiwyg')) { target = window.getSelection()?.focusNode?.parentElement; while (target && !target.dataset.nodeId) { target = target.parentElement; if (!target) break; if (target.classList.contains('NodeAttributeView')) { target = null; break; } } } }
if (!target || target === focusedBlock) return;
if (focusedBlock) { focusedBlock.classList.remove('block-focus'); } focusedBlock = target; focusedBlock.classList.add('block-focus');
}
initEditorBlocksCache();
document.addEventListener('mouseup', handleBlockFocus, true); document.addEventListener('keyup', handleBlockFocus, true);
(async () => { handleBlockFocus({ type: 'dummy' }); console.log('Bullet line init success.'); })();
|
添加以后,在点击多级列表的时候,会出现蓝色子弹线
4. CSS.给标签添加井号
默认的文内标签和文章标题标签都没有井号,看起来多少有点奇怪(特别是文内标签),可以用如下代码块来处理一下
来源:https://ld246.com/article/1725865228744
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
| .b3-chip--secondary, .b3-chip--primary, .b3-chip--info, .b3-chip--success, .b3-chip--warning, .b3-chip--warning, .b3-chip--error, .b3-chip--pink { mix-blend-mode: normal !important; }
.b3-chip--secondary::before, .b3-chip--primary::before, .b3-chip--info::before, .b3-chip--success::before, .b3-chip--warning::before, .b3-chip--warning::before, .b3-chip--error::before, .b3-chip--pink::before { content: "#" !important; margin-right: 5px; }
.protyle-background .b3-chip--secondary { color: #fff !important; background-color: #d6ff0070 !important; } .protyle-background .b3-chip--primary { color: #fff !important; background-color: #0053f9c4 !important; } .protyle-background .b3-chip--info { color: var(--b3-card-info-color) !important; background-color: #28405c !important; } .protyle-background .b3-chip--success { color: var(--b3-card-success-color) !important; background-color: #425347 !important; } .protyle-background .b3-chip--warning { color: var(--b3-card-warning-color) !important; background-color: #554636 !important; } .protyle-background .b3-chip--error { color: var(--b3-card-error-color) !important; background-color: #442724 !important; } .protyle-background .b3-chip--pink { color: var(--b3-theme-on-secondary) !important; background-color: #ea4aaa96 !important; }
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
| .protyle-wysiwyg [data-node-id] span[data-type~=tag] { --tag-color: #97B9DA; font-size: 80%; border-radius: 1em; padding: .1em .5em .15em; border: none; box-shadow: 0 0 0 .065em inset var(--tag-color); background-color: #28405c !important; color: var(--tag-color) ; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.protyle-wysiwyg [data-node-id] span[data-type~=tag]::before { content: "#" !important; margin-right: 5px; }
|
修改前,行内标签那是完全看不出来
修改后,行内标签正常多了
下图是标题标签修改后的效果。
这一点我觉得是思源本身默认主题的前端设置就有问题,就算没有井号,行内标签也不能是毫无辨识度的背景色,那样在使用的时候体验真的不行。
备注:行内标签需要在思源设置-编辑器
最底部开启该选项才可使用。
5. CSS.分割线加粗
这一个真的非常需要,默认暗色主题的分割线实在是看不出来!!
来源:https://ld246.com/article/1700551933609;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| .hr { border: none; position: relative; }
.hr::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 2px; background-color: white; transform: translateY(-50%); }
|
修改前
修改后
部分主题对分割线的样式进行了重置,无需使用该代码片段。
6. CSS.自定义荧光笔颜色
如题,自定义荧光笔标记的颜色。
这里的颜色是RGB的十六进制码,随便百度一个RGB颜色网站就能选你想要的颜色和对应的十六进制码了。
1 2 3 4
| :root{ --b3-protyle-inline-mark-background: #F9FC093B; }
|
来源:https://ld246.com/article/1700551933609#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%A0%87%E8%AE%B0%E9%A2%9C%E8%89%B2-CSS%E7%89%87%E6%AE%B5
7. CSS.外观菜单字体变粗
默认情况下思源的外观菜单(就是选字体颜色的哪一个)看不清,可以处理一下
来源:https://ld246.com/article/1702095793605/comment/1702105185880?r=a2930610542#comments
1
| .protyle-util .color__square[data-type="color"]{font-weight:bold}
|
不过,这种类markdown的编辑器,个人始终不建议修改文字的颜色和大小(特别是修改大小)。因为markdown本身生出来就是想让你别考虑排版的,有些人写的博客里面大大小小的字都有,原本作者是想突出一些重点,但是看上去是真不舒服,反而劣化了读者体验。
编辑markdown应该通过文字加粗、引用块、斜体、行内代码块来实现不同文字的强调或弱化,而不是用文字大小或者文字颜色来处理!这一观点嵌入到了我编辑markdown的基本思路中,所以本站的文章你是很难看到有什么特殊的字体颜色的(除了少数特别特别严重的说明我会用红色来标注)。
以上为个人想法,不适用于所有人,欢迎讨论。
8. JS.自定义默认代码语言和代码块语言选择置顶项
默认情况下,思源笔记的代码块会采用上一次用过的语言。但我编写笔记的很多时候,会在语言和这个语言于Linux控制台输出之间不断切换。而Linux的控制台输出如果也使用Linux命令行的bash语言,就会得到一大堆没有作用的无效高亮。
所以在论坛中找到了这个js片段,可以自定义代码块的默认语言,以及把自己最常用的语言置顶。
来源:https://ld246.com/article/1723089690687;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221
| (async ()=>{ const defaultCodeLang = "";
const recentlyCodeLangLength = 10;
let topCodeLang = [];
const storagePath = "/data/storage/recently_code_lang.json";
let recentlyCodeLang = await getFile(storagePath); topCodeLang.reverse(); let codeTimer = null; whenElementExist(".layout__center").then((element)=>{ const layoutCenter = element; const observer = observeDomChange(layoutCenter, (mutation) => { if(mutation.target.classList.contains("protyle-util")) { const codeList = mutation.target.querySelector(".b3-list--background"); if(codeList){ const firstChild = codeList.firstElementChild; sortLangList([...recentlyCodeLang, ...topCodeLang], codeList, firstChild); } } if(mutation.target.classList.contains("code-block") || mutation.target.classList.contains("hljs")) { if(codeTimer) clearTimeout(codeTimer); codeTimer = setTimeout(() => { const codeBlock = mutation.target.closest(".code-block"); const langText = codeBlock?.querySelector(".protyle-action__language")?.textContent; addLanguage(langText); setDefaultLang(); }, 40); } }); addLanguage(getLastLang()); setDefaultLang(); });
function sortLangList(topCodeLang, listContainer, clearItem) { topCodeLang.forEach(lang => { const item = Array.from(listContainer.querySelectorAll('.b3-list-item')).find(item => item.textContent.trim() === lang); if (item) { listContainer.insertBefore(item, clearItem.nextSibling); } else { const newElement = document.createElement('div'); newElement.className = 'b3-list-item'; newElement.textContent = lang; listContainer.insertBefore(newElement, clearItem.nextSibling); } }); listContainer.querySelector(".b3-list-item--focus").classList.remove("b3-list-item--focus"); listContainer.children[1].classList.add("b3-list-item--focus"); }
async function addLanguage(language) { if(!language) return;
language = getLastLang();
if(!language) return;
if(recentlyCodeLang[recentlyCodeLang.length-1] === language) { return; }
const index = recentlyCodeLang.indexOf(language); if (index !== -1) { recentlyCodeLang.splice(index, 1); }
recentlyCodeLang.push(language);
while (recentlyCodeLang.length > recentlyCodeLangLength) { recentlyCodeLang.shift(); }
putFile(storagePath, recentlyCodeLang); }
function setDefaultLang() { if(defaultCodeLang) window.siyuan.storage["local-codelang"] = defaultCodeLang; }
function getLastLang() { return window.siyuan.storage["local-codelang"]; }
async function getLastLangFromDb() { const sql = `SELECT markdown FROM blocks WHERE type = 'c' ORDER by updated DESC limit 1`; const result = await fetchSyncPost('/api/query/sql', {"stmt": sql}); if(result.data[0]?.markdown){ return result.data[0].markdown.split("\n")[0].replace('```', ''); } return ""; }
async function getFile(storagePath) { if(!storagePath) return []; const data = await fetchSyncPost('/api/file/getFile', {"path":`${storagePath}`}); if(data.code && data.code !== 0) return []; return data; }
function putFile(storagePath, data) { const formData = new FormData(); formData.append("path", storagePath); formData.append("file", new Blob([JSON.stringify(data)])); return fetch("/api/file/putFile", { method: "POST", body: formData, }).then((response) => { if (response.ok) { } else { throw new Error("Failed to save file"); } }).catch((error) => { console.error(error); }); }
async function fetchSyncPost (url, data) { const init = { method: "POST", }; if (data) { if (data instanceof FormData) { init.body = data; } else { init.body = JSON.stringify(data); } } try { const res = await fetch(url, init); const res2 = await res.json(); return res2; } catch(e) { console.log(e) return []; } }
function observeDomChange(targetNode, callback) { const config = { childList: true, subtree: true }; const observer = new MutationObserver((mutationsList) => { for (const mutation of mutationsList) { if (mutation.type === 'childList') { callback(mutation); } } }); observer.observe(targetNode, config); return observer; }
function whenElementExist(selector) { return new Promise(resolve => { const checkForElement = () => { let element = null; if (typeof selector === 'function') { element = selector(); } else { element = document.querySelector(selector); } if (element) { resolve(element); } else { requestAnimationFrame(checkForElement); } }; checkForElement(); }); } })();
|
如下图所示,默认情况下,代码块会是plaintext。
1 2
| const defaultCodeLang = "plaintext";
|
这里我设置了几个置顶的代码语言,也成功被置顶了,方便选择。
1 2
| let topCodeLang = ["cpp","bash","python","json","xml"];
|
这个插件会在思源工作空间的/data/storage/recently_code_lang.json
进行最近使用代码块语言的次数记录。如果你想重置数据记录,删除这个json文件即可。
9. CSS.配置emoji
在win10的电脑上可能会出现大量emoji缺失和不规整的问题,建议使用twemoji来替换思源笔记里面的emoji。替换emoji不一定需要安装插件,用下面的css也能实现。
twitter/twemoji是twitter在github开源的免费emoji,采用MIT协议。
这里的url路径是思源工作空间下的data中的路径,即工作空间data中的plugins文件夹,把下载的ttf文件放到这个路径下就可以了。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
|
@font-face { font-family: 'Twitter Emoji'; font-style: normal; font-weight: 400; font-display: swap; src: url("/plugins/Twemoji.Mozilla.ttf"); }
:root { --b3-font-family-emoji: 'Twitter Emoji', sans-serif !important; --b3-font-family-code: "JetBrainsMono-Regular", mononoki, Consolas, "Liberation Mono", Menlo, Courier, monospace, 'Twitter Emoji', "Apple Color Emoji", "Segoe UI Emoji", "Twitter Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols" !important; --b3-font-family: "Helvetica Neue", "Luxi Sans", "DejaVu Sans", "Hiragino Sans GB", "Microsoft Yahei", sans-serif, 'Twitter Emoji', "Apple Color Emoji", "Segoe UI Emoji", "Twitter Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols" !important; }
|
您可以在本站下载该tff文件:下载地址。
10. CSS.标题改色
修改各个等级标题的颜色,让标题的层级更加突出。
来源:https://ld246.com/article/1726590722601/comment/1726592372747#comments
1 2 3 4 5
| .protyle-wysiwyg .h1 { color: #d40045; } .protyle-wysiwyg .h2 { color: #ff7f00; } .protyle-wysiwyg .h3 { color: #66b82b; } .protyle-wysiwyg .h4 { color: #093f86; } .protyle-wysiwyg .h5 { color: #340c81; }
|
11. CSS.字体渲染优化
windows默认的字体渲染有一些问题,使用下面的CSS能一定程度上优化字体的渲染。修改font-family修改为你喜欢的中文字体即可。
来源:https://ld246.com/article/1712480500457
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
| **:not(.katex):not(.overlaydiv):not([class*="icon"]):not([class*="button"]){
font-family: "黑体" !important;
text-shadow: 0.01em 0.01em 0.01em #999999 ; -webkit-text-stroke-width: 0.50px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
span:not([class="katex"]) :not([class="overlaydiv"]){ text-shadow: 0.01em 0.01em 0.01em rgba(0,0,0,0) !important; }
.textLayer span { text-shadow: 0.01em 0.01em 0.01em rgba(0,0,0,0) !important; }
.b3-typography strong, .b3-typography span[data-type~=strong], .protyle-wysiwyg strong, .protyle-wysiwyg span[data-type~=strong] { text-shadow: 0.01em 0.01em 0.01em #999999 !important; -webkit-text-stroke-width: 0px !important; }
|
评论区还有另外一个代码片段。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
| :not(.katex):not(.overlaydiv):not([class*="icon"]):not([class*="button"]){
font-family: "仓耳云黑 W04" !important;
text-shadow: 0 0 0.36px #7C7C7CDD ; -webkit-text-stroke-width: 0.08px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
span:not([class="katex"]) :not([class="overlaydiv"]){ text-shadow: 0.01em 0.01em 0.01em rgba(0,0,0,0) !important; }
.b3-typography strong, .b3-typography span[data-type~=strong], .protyle-wysiwyg strong, .protyle-wysiwyg span[data-type~=strong] { text-shadow: 0.01em 0.01em 0.01em #999999 !important; -webkit-text-stroke-width: 0px !important; }
|
修改后能让字体更加清晰一些。但注意,部分主题已经对字体有一定优化,此时再添加该css代码片段会有重影的感觉,体验不太好。请根据你自己的主题使用情况和喜好来进行微调。
12. JS顶栏倒计时
在思源的顶栏显示一个目标日期的倒计时
来源:https://ld246.com/article/1726411686880;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64
|
const countdownMessage = "距离 2025 年高考剩余 ${daysLeft} 天"; const targetDateString = '2025-6-7';
const targetDate = new Date(targetDateString);
function startCountdown(targetDate) { function calculateDaysLeft() { let currentDate = new Date(); let differenceInTime = targetDate.getTime() - currentDate.getTime(); let daysLeft = Math.ceil(differenceInTime / (1000 * 3600 * 24)); return daysLeft; }
function updateCountdown() { let daysLeft = calculateDaysLeft(); let countdownElement = document.getElementById("countdown_days_display"); if (countdownElement) { countdownElement.innerText = countdownMessage.replace('${daysLeft}', daysLeft); } else { console.warn("找不到 countdown_days_display 元素"); } }
function insertCountdownElement() { let toolbarDrag = document.querySelector('#toolbar > #drag'); if (toolbarDrag) { toolbarDrag.insertAdjacentHTML( "afterend", `<div id="countdown_days_display" style="font-size: 12px; color: var(--b3-toolbar-color); margin-right: 14px; user-select:none;"></div>` ); updateCountdown(); } else { console.error("找不到 #toolbar > #drag 元素"); } }
let checkInterval = setInterval(() => { let countdownElement = document.getElementById("countdown_days_display");
if (!countdownElement) { insertCountdownElement(); console.log("倒计时元素不存在,重新插入"); } else { console.log("倒计时元素已存在,停止检测"); clearInterval(checkInterval); } }, 60 * 1000);
insertCountdownElement(); setInterval(updateCountdown, 60 * 1000); }
startCountdown(targetDate);
|
13. CSS.代码块折叠后依旧显示备注
默认情况下代码块折叠了之后,右上角的小m图标会消失,无法显示备注。使用如下代码块可以让代码块被折叠了之后依旧能显示右上角的小m图标。
来源:https://ld246.com/article/1724828789124
1 2 3 4 5 6 7
| .protyle-wysiwyg [data-node-id][fold="1"]:not(.li):not([data-type=NodeHeading]){ opacity:1; } .protyle-wysiwyg [data-node-id][fold="1"]:not(.li):not([data-type=NodeHeading]) .protyle-attr { opacity: 1; top: 0px; }
|
14. CSS.图片居中
默认情况下思源图片不是居中的。对于我来说我用不上图文混排的功能,基本上只会插入一张图片,所以直接让图片默认居中吧。
来源:https://ld246.com/article/1700551933609
1 2 3 4
| .p:has(span.img) { text-align:center; }
|
待更新
等待后续更新本文……