Merge pull request #14839 from dotty-staging/scaladoc/snippet-fix

Fix snippets hiding and buttons animation

Author: pikinier20

scaladoc-js/common/css/code-snippets.css

@@ -140,14 +140,14 @@ input:checked + .slider:before {
   transition: all .2s ease;
   opacity: 0;
   visibility: hidden;
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: flex-start;
 }
 
 .snippet:hover .buttons {
   opacity: 1;
   visibility: visible;
-  display: flex;
-  flex-direction: row-reverse;
-  justify-content: flex-start;
 }
 
 .snippet .buttons button {

scaladoc/resources/dotty_res/scripts/ux.js

@@ -89,7 +89,30 @@ window.addEventListener("DOMContentLoaded", () => {
 
   hljs.registerLanguage("scala", highlightDotty);
   hljs.registerAliases(["dotty", "scala3"], "scala");
-  hljs.initHighlighting();
+
+  var aliases = ['language-scala', 'language-dotty', 'language-scala3']
+
+  var highlightDeep = function(el) {
+    el.childNodes.forEach(node => {
+      if(node.nodeType == Node.TEXT_NODE) {
+        let newNode = document.createElement('span');
+        newNode.innerHTML = hljs.highlight(node.textContent, {language: 'scala'}).value;
+        el.insertBefore(newNode, node);
+        el.removeChild(node);
+      } else if(node.nodeType == Node.ELEMENT_NODE) {
+        highlightDeep(node);
+      }
+    })
+  }
+
+  document.querySelectorAll('pre code').forEach( el => {
+    if (aliases.some(alias => el.classList.contains(alias))) {
+      highlightDeep(el);
+    } else {
+      hljs.highlightElement(el);
+    }
+  });
+
 
   /* listen for the `F` key to be pressed, to focus on the member filter input (if it's present) */
   document.body.addEventListener('keydown', e => {

scaladoc/resources/dotty_res/styles/scalastyle.css

@@ -88,6 +88,7 @@ pre {
   margin: 0px;
 }
 pre code, pre code.hljs {
+  font-family: var(--mono-font);
   font-size: 1em;
   padding: 0;
 }