Prefix all user-generated IDs in markup

modules/markup/html.go

@@ -312,6 +312,12 @@ func (ctx *postProcessCtx) postProcess(rawHTML []byte) ([]byte, error) {
 }
 
 func (ctx *postProcessCtx) visitNode(node *html.Node) {
+	// Add user-content- to IDs if they don't already have them
+	for idx, attr := range node.Attr {
+		if attr.Key == "id" && !strings.HasPrefix(attr.Val, "user-content-") {
+			node.Attr[idx].Val = "user-content-" + attr.Val
+		}
+	}
 	// We ignore code, pre and already generated links.
 	switch node.Type {
 	case html.TextNode:

web_src/js/index.js

@@ -2472,21 +2472,10 @@ $(document).ready(() => {
 
   // Set anchor.
   $('.markdown').each(function () {
-    const headers = {};
     $(this).find('h1, h2, h3, h4, h5, h6').each(function () {
       let node = $(this);
-      const val = encodeURIComponent(node.text().toLowerCase().replace(/[^\u00C0-\u1FFF\u2C00-\uD7FF\w\- ]/g, '').replace(/[ ]/g, '-'));
-      let name = val;
-      if (headers[val] > 0) {
-        name = `${val}-${headers[val]}`;
-      }
-      if (headers[val] === undefined) {
-        headers[val] = 1;
-      } else {
-        headers[val] += 1;
-      }
-      node = node.wrap(`<div id="${name}" class="anchor-wrap" ></div>`);
-      node.append(`<a class="anchor" href="#${name}"><span class="octicon octicon-link"></span></a>`);
+      node = node.wrap('<div class="anchor-wrap"></div>');
+      node.append(`<a class="anchor" href="#${node.attr('id')}"><span class="octicon octicon-link"></span></a>`);
     });
   });