Documentation on ui: add anchor on properties & outputs
ui/src/components/layout/Markdown.vue
ui/src/components/layout/Markdown.vue
diff --git a/ui/src/components/layout/Markdown.vue b/ui/src/components/layout/Markdown.vue
index db1fa22ed3..4fe92fb837 100644
--- a/ui/src/components/layout/Markdown.vue
+++ b/ui/src/components/layout/Markdown.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <span v-html="markdownRenderer"></span>
+        <span ref="doc" v-html="markdownRenderer"></span>
     </div>
 </template>
 
@@ -21,7 +21,31 @@
                 default: ``,
             },
         },
-
+        mounted() {
+            setTimeout(() => {
+                window.scrollTo({
+                    top: document.querySelector(location.hash).getBoundingClientRect().top + window.pageYOffset,
+                    behavior: 'smooth'
+                })
+            }, 1000)
+        },
+        methods: {
+            computeAnchors() {
+                let lastTitle = ''
+                for (const child of this.$refs.doc.children) {
+                    if (child.tagName === 'H2') {
+                        lastTitle = child.textContent.replaceAll('.', '-')
+                        child.setAttribute('id', lastTitle)
+                        child.innerHTML = `<a href="#${lastTitle}">${child.innerHTML}</a>`
+                    }
+                    if (child.tagName === 'H3') {
+                        const childId = `${lastTitle}-${child.textContent}`.replaceAll('.', '-')
+                        child.setAttribute('id', childId)
+                        child.innerHTML = `<a href="#${childId}">${child.innerHTML}</a>`
+                    }
+                }
+            }
+        },
         computed: {
             markdownRenderer() {
                 const outHtml = Markdown.render(this.source);
@@ -30,6 +54,7 @@
 
                 this.$nextTick(() => {
                     Prism.highlightAll();
+                    this.computeAnchors()
                 });
 
                 return outHtml;
@@ -38,3 +63,11 @@
 
     };
 </script>
+<style scoped>
+span /deep/ h3 a {
+    color:#e83e8c;
+}
+span /deep/ h2 a {
+    color:#222;
+}
+</style>
