Make a class for the whole sidenote <span>

[pauldruce]

I love this filter, however, I have a request. I want the sidenote to highlight when you hover over the sidenote number. I usually do this by enclosing the whole side note in a which a class name.

I don't know enough haskell to modify the code, but is there a way to wrap the sidenote in a css'able environment?

[jez]

<p>
  This is some text.
  <span>
    <label for="sn-1" class="margin-toggle sidenote-number"></label>
    <input type="checkbox" id="sn-1" class="margin-toggle">
    <span class="sidenote"> Some text. </span>
  </span>
  This is some more text.
</p>

This is the markup for the foot note right now. What class names or markup changes are you asking for?

Keep in mind that any change you propose must be backwards compatible—I'm not interested in breaking the existing people who are using this filter. In particular that probably means no markup structure changes.

[pauldruce]

I was thinking something simple along these lines:

<p>
  This is some text.
  <span class="sidenote-container">
    <label for="sn-1" class="margin-toggle sidenote-number"></label>
    <input type="checkbox" id="sn-1" class="margin-toggle">
    <span class="sidenote"> Some text. </span>
  </span>
  This is some more text.
</p>

I want to highlight both the sidenote text and the sidenote number whenever you hover over either one. It seems you can only do that by css along the lines of .sidenote-container:hover .sidenote .sidenote-number{ color:blue, border-color:blue}

If it's not possible, don't worry about it. I just thought it might be a relatively simple modification, I just have no idea how to use Haskell at the moment.

[jez]

Gotcha. From your original message it sounded like you only wanted hovering over the ¹ to highlight the sidenote, not the other way around. If you're fine with both ways, that's easy enough to do.

[jez]

https://github.com/jez/pandoc-sidenote/releases/tag/0.22.1

[pauldruce]

Perfect, thank you! :)