improve: more elegant way to improve vitepress-plugin-highlight-targeted-heading

[BeiyanYunyi]

We can implement the highlight effect with the :target selector instead, without js.

Example code

Live demo:

Highlight headings within the page Click the links in table of contents in sidebar to see the highlight effect.

Highlight headings across pages

[nekomeowww]

Thanks for the feedbacks!

I do know it is possible to implement such functionalities through :target selector instead of the current implementation.

Unfortunately, I have performed the experiment against this long before the publication of this plugin. The results shown that the functionalities of :target selector would be broken when the history (or router) has taken control by the current VitePress's implementation of vue router.

Therefore, the :target selector will be dismissed once loaded and only can be triggered at the very first beginning of page load since it is SSG rendered pages where the router haven't yet existed.

I have included both the reproduction repo, steps and workarounds in this VitePress issue for such breaking changed behaviors here https://github.com/vuejs/vitepress/issues/2984#issuecomment-1752007645 . (Please kindly take a look into this issue if you'd have time)