From 3f26887bb37867dcb7ae211e3601bfb6c3a8fb30 Mon Sep 17 00:00:00 2001
From: Alexey Pyltsyn <lex61rus@gmail.com>
Date: Tue, 10 Dec 2019 17:28:14 +0300
Subject: [PATCH] fix(v2): add syntax highlight to generated colors

---
 .../src/theme/CodeBlock/styles.module.css                   | 3 +--
 .../src/theme/CodeBlock/styles.module.css                   | 1 -
 website/src/components/ColorGenerator/index.js              | 6 ++++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/styles.module.css b/packages/docusaurus-theme-classic/src/theme/CodeBlock/styles.module.css
index 16e20f6215b9..83c9e16af8de 100644
--- a/packages/docusaurus-theme-classic/src/theme/CodeBlock/styles.module.css
+++ b/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;
diff --git a/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/styles.module.css b/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/styles.module.css
index 217d0bc106ff..65744d74af93 100644
--- a/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/styles.module.css
+++ b/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;
diff --git a/website/src/components/ColorGenerator/index.js b/website/src/components/ColorGenerator/index.js
index dfdfcd7ec86a..458813ab9147 100644
--- a/website/src/components/ColorGenerator/index.js
+++ b/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>
   );
 }