Commit 8a11c68

@@ -0,0 +1,10 @@
+#import "@preview/bullseye:0.1.0": target
+
+#let marginnote(content) = context {
+  if target() == "html" {
+    return html.span(
+      class: "marginnote",
+      content,
+    )
+  }
+}

@@ -1,3 +1,5 @@
+#import "components/marginnote.typ": marginnote
+
 #let post-template(body) = {
   import "./mathyml/src/lib.typ": to-mathml
 

@@ -28,7 +28,7 @@ $
 
 Above equation employs some tricks from complex analysis.
 
-= Plain Text
+= Plain Text & Margin Notes
 
 Some#footnote[A footnote here.] random#footnote[Another footnote here.] text#footnote[Yet another long footnote here. #lorem(20)]:
 
@@ -38,6 +38,13 @@ Some#footnote[A footnote here.] random#footnote[Another footnote here.] text#foo
 
 #lorem(15)
 
+You can use ```typ #tybios.marginnote[]```#tybios.marginnote[It's same to foot note, but no refer link.]
+to create margin notes.#tybios.marginnote[
+  Due to the way Typst generates HTML, you cannot create separate paragraphs in a footnote;
+  otherwise, it will lead to HTML structure errors. ```typ #tybios.marginnote[]``` is designed to address
+  this issue—you can use `marginnote` multiple times in succession to simulate the effect of separate paragraphs.
+]
+
 = Table
 
 A table here:
@@ -65,7 +72,7 @@ And some inline code: `print("Hello, World!")`.
 
 Maybe you want Typst's special inline code with syntax highlighting: ```rust println!("Hello, World!"); ```
 
-= List/Enumeration
+= List & Enumeration
 
 Example of enumeration:
 

@@ -1,5 +1,5 @@
 .marginnote {
-  @apply relative block;
+  @apply relative block my-1;
   @variant max-md {
     @apply w-[95%] float-left m-2;
   }