标签样式传递型双链代码片段分享

如图。传递型双链类标签样式，同正文割裂，在输入正文时无需考虑该怎么打双链，输入完成后结尾补充即可。

听说可以纯 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);
});