September 10, 2024

Add inline notes with automatic numbering using HTML, CSS and Markdown

These below are my notes for my own wiki; to see the original post, visit: https://web.archive.org/web/20240910153334/https://www.stevans.org/inline-footnotes/

In your markdown file, do:

This is the sentence<input type="checkbox" id="uniquetag" /><label for="uniquetag"><sup></sup></label><span><br><br>
This is the note
<br><br></span>

Two things to note:

1. Make sure the id and for tags are identical for each inline note.
2. Make sure each combination of id and for tags is unique.

In the CSS file, add:

/* Copyright 2023 Matt Stevans */
/* This creates the counter  */
body {
  counter-reset: cb_counter_var;
}

/* This increments the counter value and defines 
the displayed content  */
sup::after {
  counter-increment: cb_counter_var;
  content: counter(cb_counter_var);
}

/* This initially hides the footnote (i.e. span)  */
input[type=checkbox] ~ span {
    display:none; 
}

/* This styles the footnote text which appears 
when the label is clicked  */
input[type=checkbox]:checked ~ span {
    display:inline; 
    font-size: 85%;
    font-family:$monospace;
    color: mix(#000, $text-color, 30%);
    cursor:default;
}

/* This permanently hides the checkbox  */
input[type=checkbox]{
    display:none;  
}

/* This styles the footnote label to appear 
like a hyperlink  */
input[type=checkbox] ~ label {
    display:inline;
    cursor:pointer;
    color:$link-color;
    text-decoration:underline;
}

/* This styles the footnote label when the mouse 
hovers over it */
input[type=checkbox] ~ label:hover {
    text-decoration:underline;
    cursor:pointer;
    color:red;
}

/* This styles the footnote label after it is clicked */
input[type=checkbox]:checked ~ label {
    color:red;
    text-decoration:none;
}

Bug-to-be-fixed: if there are many inline notes in one paragraph i.e. <p>, all following inline notes will show when you click on the preceding one; at least that the behaviour I got using the above code. I have not figured what’s wrong yet.

Credit: Matt Stevans; source: https://web.archive.org/web/20240910153334/https://www.stevans.org/inline-footnotes/

personal computing wiki css html markdown