fix(v2): add syntax highlight to generated colors (#2114)

packages/docusaurus-theme-classic/src/theme/CodeBlock/styles.module.css

@@ -4,9 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
- 
+
 .codeBlock {
-  border-radius: 0;
   margin-bottom: 0;
   overflow: hidden;
   overflow-wrap: break-word;

packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/styles.module.css

@@ -1,5 +1,4 @@
 .codeBlock {
-  border-radius: 0;
   font-size: inherit;
   margin-bottom: 0;
   overflow: hidden;

website/src/components/ColorGenerator/index.js

@@ -9,6 +9,8 @@ import React, {useState} from 'react';
 
 import Color from 'color';
 
+import CodeBlock from '@theme/CodeBlock';
+
 import styles from './styles.module.css';
 
 const COLOR_SHADES = {
@@ -154,12 +156,12 @@ function ColorGenerator({children, minHeight, url}) {
         Replace the variables in <code>src/css/custom.css</code> with these new
         variables.
       </p>
-      <pre>
+      <CodeBlock className="css">
         {adjustedColors
           .sort((a, b) => a.codeOrder - b.codeOrder)
           .map(value => `${value.variableName}: ${value.hex.toLowerCase()};`)
           .join('\n')}
-      </pre>
+      </CodeBlock>
     </div>
   );
 }