Improve code annotation

- hover shows line highlighting
- below support clicking element to show line highlighting

Author: dragonstyle

src/format/html/format-html.ts

@@ -721,6 +721,11 @@ function processCodeAnnotations(format: Format, doc: Document) {
       if (ddEl) {
         ddEl.innerHTML = "";
         ddEl.innerText = annotation;
+        const codeCell = annoteEl.getAttribute(kCodeCellAttr);
+        if (codeCell) {
+          ddEl.setAttribute(kCodeCellTargetAttr, codeCell);
+          ddEl.setAttribute(kCodeAnnotationTargetAttr, annotation);
+        }
       }
     }
   };

src/resources/formats/html/_quarto-rules.scss

@@ -583,7 +583,7 @@ div.column {
 }
 
 .code-annotation-container-hidden {
-  display: none;
+  display: none !important;
 }
 
 dl.code-annotation-container-grid {

src/resources/formats/html/bootstrap/_bootstrap-rules.scss

@@ -1783,20 +1783,32 @@ dl.code-annotation-container-grid {
   }
 }
 
-dl.code-annotation-container-grid dt {
-  font-family: $font-family-code;
-  color: var(--quarto-hl-co-color);
-  border: solid var(--quarto-hl-co-color) 1px;
-  border-radius: 50%;
-  height: 22px;
-  width: 22px;
-  line-height: 22px;
-  font-size: 11px;
+dl.code-annotation-container-grid {
+  dt {
+    font-family: $font-family-code;
+    color: theme-dim($body-color, 10%);
+    border: solid theme-dim($body-color, 10%) 1px;
+    border-radius: 50%;
+    height: 22px;
+    width: 22px;
+    line-height: 22px;
+    font-size: 11px;
 
-  text-align: center;
-  vertical-align: middle;
+    text-align: center;
+    vertical-align: middle;
 
-  text-decoration: none;
+    text-decoration: none;
+  }
+
+  dt[data-target-cell] {
+    cursor: pointer;
+  }
+
+  dt[data-target-cell].code-annotation-active {
+    color: $body-bg;
+    border: solid #aaaaaa 1px;
+    background-color: #aaaaaa;
+  }
 }
 
 pre.code-annotation-code {