Hovering anchor tag heading in Jekyll
I like when (sub)heading has anchor links on a long blog post.
This is an example
Can you see a link for the above heading? Try moving the cursor over the heading
How to achieve it?
- in
_layouts/default.html
after html tag
<html>
<script src="https://cdn.jsdelivr.net/npm/anchor-js/anchor.min.js">
</script>
...
- and just before
</body>
...
<script>
anchors.add();
</script>
</body>
Have customized it?
<style>
.anchorjs-link {
color: #aaa;
}
.anchorjs-link:hover {
color: #ff5231;
}
</style>
<script>
anchors.options.placement = 'left';
anchors.add();
</script>
References
- As jekyll-anchor-heading did not work
- AnchorJs helped me
- we can anchor
para
as well.