如图。传递型双链类标签样式,同正文割裂,在输入正文时无需考虑该怎么打双链,输入完成后结尾补充即可。
听说可以纯 CSS 实现,但我菜,需要配合 js。
:root { --block-ref-color: #007bff; --block-ref-hover-color: #4885ac; } /* 关联型双链 */ .tag-ref span[data-type="block-ref"] { display: inline-block !important; padding: 0.15em 0.15em !important; margin: 0.25em !important; color: var(--block-ref-color) !important; text-decoration: none !important; font-size: 0.95em !important; line-height: 1em !important; transition: background-color 0.2s ease-in-out !important; background-color: transparent !important; } .tag-ref span[data-type="block-ref"]::before { color: var(--block-ref-color) !important; text-decoration: none !important; font-size: 0.95em !important; line-height: 1em !important; content: "#" !important; background-color: transparent !important; } .tag-ref span[data-type="block-ref"]::after { color: var(--block-ref-color) !important; background-color: transparent !important; text-decoration: none !important; font-size: 0.85em !important; line-height: 1em !important; content: "" !important; } .tag-ref span[data-type="block-ref"]:hover { text-decoration: none !important; color: var(--block-ref-hover-color) !important; background-color: white !important; } /* 传递型双链 */ .traditional-ref span[data-type="block-ref"] { display: inline-block !important; margin: 0.1em !important; color: var(--block-ref-color) !important; text-decoration: none !important; font-size: 0.95em !important; line-height: 1em !important; transition: background-color 0.2s ease-in-out !important; background-color: transparent !important; } .traditional-ref span[data-type="block-ref"]::before { color: #d3d3d3 !important; background-color: transparent !important; text-decoration: none !important; font-size: 0.95em !important; line-height: 1em !important; content: "[[" !important; } .traditional-ref span[data-type="block-ref"]::after { color: #d3d3d3 !important; background-color: transparent !important; text-decoration: none !important; font-size: 0.95em !important; line-height: 1em !important; content: "]]" !important; } .traditional-ref span[data-type="block-ref"]:hover { text-decoration: none !important; color: var(--block-ref-hover-color) !important; background-color: transparent !important; }
function applyBlockRefStyle(divElement) { const hasDirectText = Array.from(divElement.childNodes).some((node) => { return node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== ""; }); if (hasDirectText) { divElement.classList.remove("traditional-ref"); divElement.classList.add("tag-ref"); } else { divElement.classList.remove("tag-ref"); divElement.classList.add("traditional-ref"); } } document.addEventListener("DOMNodeInserted", () => { let divs1 = document.querySelectorAll("div[spellcheck]"); let divs = Array.from(divs1).filter(function (div) { return !div.classList.contains("protyle-wysiwyg"); }); divs.forEach(applyBlockRefStyle); });
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于