Keep heading selectable and use seperate element to link target

[LIGMATV]

Feature request

I want the heading link target using the seperate element (#) like in Vitepress.

Problem or desire

The headings was hard to selectable and more like an link, also ugly.

Proposal

The headings was like other texts, and selectable. The link target element will visible when the heading hovered.

Implementation

This is the code i use to make the screenshot demo.

<h1 id="quick-start">
   <a href="#/?id=quick-start" data-id="quick-start" class="anchor">
+        <div class="heading-anchor"></div>
+    </a>
        <span>Quick start</span>
-    </a>
</h1>

        .anchor:hover {
            text-decoration: none;
        }
        .markdown-section h1 {
            padding-left: 1rem;
            margin-left: -1.42rem;
        }
        .markdown-section h1:hover .heading-anchor {
            opacity: 1;
        }
        .heading-anchor {
            opacity: 0;
            transition: color .25s, opacity .25s;
        }
        .heading-anchor::before {
            content: '#';
            margin-left: -1rem;
        }

[sy-records]

You can implement this using css.

      .markdown-section .anchor{
        text-decoration: none;
        position: relative;
      }

      .markdown-section .anchor:before{
        content: '#';
        opacity: 0;
        transition: opacity 0.3s;
        position: absolute;
        left: -0.8em;
      }

      .markdown-section .anchor:hover::before {
        opacity: 1;
      }

[LIGMATV]

@sy-records @paulhibbitts I just do new experiment and this how to create the text of heading still selectable :

              .markdown-section .anchor {
                  text-decoration: none;
                  position: relative;
                  user-select: text;
                  -webkit-user-drag: none;
                  cursor: auto;
              }

              .markdown-section .anchor:before {
                  content: '#';
                  opacity: 0;
                  transition: opacity 0.3s;
                  position: absolute;
                  left: -0.8em;
                  cursor: pointer;
              }

              .markdown-section .anchor:hover::before {
                  opacity: 1;
              }

With using user-select: text and -webkit-user-drag.