feat: modify footnote style to match LaTeX theme (#172)

* feat: Modify and footnote superscript styles to match LaTeX theme Remove footnote superscript background and padding; adjust brackets and spacing of footnote labels * feat: Superscript footnotes in the text with "[ ]" * feat: adjust spacing between consecutive footnotes * feat: align footnote numbers and the indented annotation text * feat: apply style to exported pdf * chore: add comments --------- Co-authored-by: Keldos <[email protected]> Co-authored-by: RalXYZ <[email protected]>
Keldos-Li · Jan 7, 2025 · c500a46 · c500a46
1 parent e24a55d
commit c500a46
Showing 1 changed file with 105 additions and 6 deletions.
diff --git a/src/scss/footnote.scss b/src/scss/footnote.scss
@@ -1,18 +1,117 @@
 $os: "" !default;
 $theme: "" !default;
 
-/* 参考文献（脚注）块 */
-.footnotes {
+/* 参考文献（脚注）块，在 Typora 中的样式 */
+.md-def-footnote {
+  display: flex;
+  position: relative;
   font-size: 0.95em;
+  opacity: 1;
+  margin: 0;
+
+  &:not(:first-child),
+  & + *:not(.md-def-footnote) {
+    margin-top: 1em;
+  }
+  & + .md-def-footnote {
+    margin-top: 0.5em;
+  }
+
+  .md-def-name {
+    font-weight: inherit;
+    padding: 0;
+    flex-shrink: 0;
+    width: 3em;
+    margin-inline-start: -1ch;
+    white-space: nowrap;
+    text-align: left;
+
+    &:before {
+      content: "［";
+      position: static;
+      color: inherit;
+    }
+    &:after {
+      content: "］";
+      position: static;
+      color: inherit;
+    }
+  }
+
+  // 默认隐藏行尾的 ↩️，仅在鼠标悬停时显示
+  .md-reverse-footnote-area {
+    display: none;
+  }
+  &:hover .md-reverse-footnote-area {
+    position: absolute;
+    right: -6px;
+    display: inline;
+  }
 }
+
+/* 参考文献（脚注）块，在导出 HTML 或 PDF 时的样式（导出后的 HTML tag 和 Typora 中的 HTML tag 不一致） */
 .footnotes-area {
+  padding-inline-start: 2.5em;
+
+  // 默认情况下，Typora 会给参考文献块顶部加一条横线，这里把它隐藏掉
+  hr {
+    display: none;
+  }
+
   .footnote-line {
     color: var(--text-color);
+    font-size: 0.95em;
+    margin-top: 0.5em;
+
+    *:not(.md-fn-count) {
+      display: inline-block;
+      vertical-align: top;
+    }
+
+    span.md-fn-count {
+      font-weight: inherit;
+      padding: 0;
+      margin-inline-start: -3em;
+      white-space: nowrap;
+      display: inline-block;
+      width: 2.5em;
+      &:before {
+        content: "［";
+        position: static;
+        color: inherit;
+      }
+      &:after {
+        content: "］";
+        position: static;
+        color: inherit;
+      }
+    }
+
+    a.reversefootnote {
+      display: none;
+    }
   }
+}
 
-  // 默认情况下，Typora 会给参考文献块顶部加一条横线，这里把它隐藏掉
-  hr {
-    border: 0;
-    color: #00000000;
+/* 参考文献（脚注）上标 */
+sup.md-footnote {
+  display: inline;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  color: inherit;
+  a {
+    color: inherit !important; // 导出时的a是单独的必须再次设置
+  }
+
+  // 显示 markdown 预览，而没有点击展开显示尾注内容时
+  &:not(.md-expand) {
+    margin-inline: -0.44em;
+      &:before {
+        content: "［";
+      }
+      &:after {
+        content: "］";
+      }
   }
 }