feat: add highlight.js as an option

assets/scss/components/_buttons.scss

@@ -55,9 +55,19 @@ body.dark .toggle-dark {
 }
 
 @include media-breakpoint-up(md) {
+  .doks-clipboard {
+    position: relative;
+    float: right;
+  }
+
   .btn-clipboard {
+    position: absolute;
+    top: 2.125rem;
+    right: 1rem;
+    z-index: 10;
     display: block;
-    margin: 2.0625rem 0.25rem -4rem auto;
+    padding: 0.25rem 0.5rem;
+    font-size: $font-size-xs;
   }
 }
 

assets/scss/components/_code.scss

@@ -7,37 +7,37 @@ samp {
   border-radius: $border-radius;
 }
 
-pre {
-  background: $beige;
-  color: $black;
-  line-height: $line-height-base;
-  margin: 2rem 0;
-  overflow: auto;
-  padding: 1.25rem 1.5rem;
-  tab-size: 4;
-}
-
 code {
   background: $beige;
   color: $black;
   padding: 0.25rem 0.5rem;
 }
 
+pre {
+  margin: 2rem 0;
+}
+
 pre code {
-  background: none;
-  font-size: inherit;
-  padding: 0;
+  display: block;
+  overflow-x: auto;
+  line-height: $line-height-base;
+  padding: 1.25rem 1.5rem;
+  tab-size: 4;
+}
+
+.hljs {
+  padding: 1.25rem 1.5rem;
 }
 
 @include media-breakpoint-down(sm) {
-  pre {
-    margin: 2rem -1.5rem;
-  }
-
   pre,
   code,
   kbd,
   samp {
     border-radius: 0;
   }
+
+  pre {
+    margin: 2rem -1.5rem;
+  }
 }