DOC-3881: Revert to Highlight.js, fix admonition issues (#112)

* Add highlight.js bundle to gcx, fix admonition errors with dark mode and nested blocks

* update code styles for highlight.js

---------

Co-authored-by: Josué Bran <[email protected]>

Author: eric-schneider

gcx/gulpfile.js

@@ -88,7 +88,7 @@ const cleanCSS = () => {
 }
 
 const bundleCSS = () =>
-  src(['styles/src/css/**/*.css', '!styles/src/css/**/helios-gcx.css', '!styles/src/css/**/highlight.css'])
+  src(['styles/src/css/**/*.css', '!styles/src/css/**/helios-gcx.css'])
     .pipe(concat('siteTemp.css'))
     .pipe(dest('styles/build/css'))
 

gcx/styles/src/css/doc.css

@@ -520,8 +520,7 @@
 
 .doc pre:not(.highlight),
 .doc pre.highlight code {
-  /* background: var(--pre-background); */
-  box-shadow: inset 0 0 1.75px var(--pre-border-color);
+  background: none;
   display: block;
   overflow-x: auto;
   padding: 0.75rem;

gcx/styles/src/css/helios-gcx-alerts.css

@@ -69,13 +69,6 @@
     border-radius: 6px;
 }
 
-.dark-mode .doc .admonitionblock.important tr {
-    display: block;
-    background: var(--color-white);
-    border: 2px solid var(--color-gray-neutral-500);
-    border-radius: 6px;
-}
-
 .doc .admonitionblock.important td.content {
     color: var(--color-black);
 }

gcx/styles/src/css/helios-gcx-code.css

@@ -21,11 +21,13 @@
 
 .doc pre.highlight,
 .doc pre:not(.highlight) {
-    /* background: #f7f8ff; */
+    background: var(--color-smoke-60);
     display: block;
     font-size: 14px;
     padding: .75rem;
     box-shadow: inset 0 0 1.75px #c9cef6;
+    border: 1px solid var(--color-prism-light-border);
+    border-radius: .375em;
     overflow-x: auto
 }
 

gcx/styles/src/css/helios-gcx-icons.css

@@ -2,38 +2,31 @@
     padding: 0 1.5rem;;
 }
 
-.doc .admonitionblock.tip .icon,
-.doc .admonitionblock.note .icon {
+.doc .admonitionblock.tip > table > tbody > tr > .icon,
+.doc .admonitionblock.note > table > tbody > tr >  .icon {
     color: var(--color-green-700);
     background-color: var(--color-green-700);
     border: 2px solid var(--color-green-700);
 }
 
-.doc .admonitionblock.warning .icon {
+.doc .admonitionblock.warning > table > tbody > tr > .icon {
     color: var(--color-red-500);
     background-color: var(--color-red-500);
     border: 2px solid var(--color-red-500);
 }
 
-.doc .admonitionblock.caution .icon {
+.doc .admonitionblock.caution > table > tbody > tr > .icon {
     color: #E64328;
     background-color: #E64328;
     border: 2px solid #E64328;
 }
 
-.doc .admonitionblock.important .icon {
+.doc .admonitionblock.important > table > tbody > tr > .icon {
     color: var(--color-gray-neutral-700);
     background-color: var(--color-gray-neutral-700);
     border: 2px solid var(--color-gray-neutral-700);
 }
 
-.dark-mode .doc .admonitionblock.important .icon {
-    color: var(--color-gray-neutral-500);
-    background-color: var(--color-gray-neutral-500);
-    border: 2px solid var(--color-gray-neutral-500);
-}
-
-
 .doc .admonitionblock .icon i::after {
     color: white;
 }

gcx/styles/src/css/helios-gcx.css

@@ -431,11 +431,12 @@ feedback-stars {
 
 .doc pre.highlight,
 .doc pre:not(.highlight) {
-    /* background: #f7f8ff; */
+    background: var(--color-smoke-60);
     display: block;
     font-size: 14px;
     padding: .75rem;
-    box-shadow: inset 0 0 1.75px #c9cef6;
+    border: 1px solid var(--color-prism-light-border);
+    border-radius: .375em;
     overflow-x: auto
 }
 

gcx/styles/src/css/highlight.css

@@ -1,5 +1,5 @@
 /*! Adapted from the GitHub style by Vasily Polovnyov <[email protected]> */
-/* .hljs-comment,
+.hljs-comment,
 .hljs-quote {
   color: #998;
   font-style: italic;
@@ -8,7 +8,7 @@
 .hljs-keyword,
 .hljs-selector-tag,
 .hljs-subst {
-  color: #333;
+  color: var(--color-prism-light-purple);
   font-weight: var(--monospace-font-weight-bold);
 }
 
@@ -17,7 +17,7 @@
 .hljs-variable,
 .hljs-template-variable,
 .hljs-tag .hljs-attr {
-  color: #008080;
+  color: var(--color-prism-light-orange);
 }
 
 .hljs-string,
@@ -199,6 +199,12 @@
   font-weight: bold;
 }
 
+.dark-mode .doc pre.highlight,
+.dark-mode .doc pre:not(.highlight) {
+  background: var(--color-prism-dark-background);
+  border: 1px solid var(--color-prism-dark-border);
+}
+
 pre code.hljs {
   display: block;
   overflow-x: auto;
@@ -272,7 +278,7 @@ code.hljs {
 .hljs-addition,
 .hljs-title.class_.inherited__,
 .hljs-string {
-  color: #637200;
+  color: var(--color-prism-light-orange);
 }
 
 .hljs-built_in,