feat: syntax highlighting of code section (#6236)

Co-authored-by: AdrieanKhisbe <adriean.khisbe@live.fr>

src/style/_buttons.scss

@@ -174,3 +174,17 @@ button
     background: url("data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' aria-hidden='true'><path fill='#ffffff' fill-rule='evenodd' d='M2 13h4v1H2v-1zm5-6H2v1h5V7zm2 3V8l-3 3 3 3v-2h5v-2H9zM4.5 9H2v1h2.5V9zM2 12h2.5v-1H2v1zm9 1h1v2c-.02.28-.11.52-.3.7-.19.18-.42.28-.7.3H1c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h3c0-1.11.89-2 2-2 1.11 0 2 .89 2 2h3c.55 0 1 .45 1 1v5h-1V6H1v9h10v-2zM2 5h8c0-.55-.45-1-1-1H8c-.55 0-1-.45-1-1s-.45-1-1-1-1 .45-1 1-.45 1-1 1H3c-.55 0-1 .45-1 1z'></path></svg>") center center no-repeat;
   }
 }
+
+// overrides for smaller copy button for curl command
+.curl-command .copy-to-clipboard
+{
+  bottom: 5px;
+  right: 10px;
+  width: 20px;
+  height: 20px;
+  button
+  {
+    padding-left: 18px;
+    height: 18px
+  }
+}

src/style/_layout.scss

@@ -642,10 +642,12 @@
 
     overflow-wrap: break-word;
     @include text_code($opblock-body-font-color);
-    span
-    {
-        color: $opblock-body-font-color !important;
-    }
+
+    // disabled to have syntax highliting with react-syntax-highlight
+    // span
+    // {
+    //     color: $opblock-body-font-color !important;
+    // }
 
     .headerline
     {
@@ -662,6 +664,9 @@
     min-height: 6em;
   }
 }
+.curl-command {
+  position: relative;
+}
 
 .download-contents {
   position: absolute;