How to make Confluence anchors a visible link?

[syntevo]

When providing email support for our product, we are frequently linking to the Documentation stored in Confluence, usually to subsections, which have anchors. Unfortunately currently most of the time is spent by composing the correct URL, with the pageName#pageNameWithoutSpaces-anchor-name. We want to streamline this process and an easy solution would be to turn the anchors to links themselves. For example, have a look at:

https://docs.python.org/3.4/library/stdtypes.html#special-attributes

and try to hover over the ending of the heading (requiring Java script!). This makes the anchor visible and when clicking it, the browser's URL is set exactly to the anchor URL which can be copy&pasted easily.

Is there a way to establish this with Confluence?

• are you aware of a plug-in which does this job?

• can the HTML rendering be tweaked to produce corresponding <a id=>...</a> tags instead of <span id="..." class="confluence-anchor-link"> links?

• are you aware of a CSS-only solution to this problem (as I understand that custom CSS can be defined)?

Thanks, Marc

[syntevo · Accepted solution]

Solved by a combination of Custom HTML and custom Stylesheets:

<script type="text/javascript">
  var content = document.getElementById("content");
  var h1s = Array.prototype.slice.call(content.getElementsByTagName("h1"));
  var h2s = Array.prototype.slice.call(content.getElementsByTagName("h2"));
  var h3s = Array.prototype.slice.call(content.getElementsByTagName("h3"));
  var hs = [].concat(h1s, h2s, h3s);
  
  for (var i=0; i < hs.length; i++) {
   h = hs[i];
   if (h.id != null && h.id.length > 0) {
     hs[i].innerHTML = hs[i].innerHTML + "<a href=\"#" + h.id + "\" class=\"anchorLink\">¶</a>"
   }
  }
</script>

a.anchorLink {
  visibility:hidden;
  color: #cccccc;
}
h1:hover > a.anchorLink, h2:hover > a.anchorLink, h3:hover > a.anchorLink {
 visibility:visible;
  color: #cccccc;
}