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

This commit is contained in:
Alexey Pyltsyn 2019-12-10 23:50:35 +03:00 committed by Yangshun Tay
parent 6db29897cf
commit 1f0eb37e19
3 changed files with 5 additions and 5 deletions

View file

@ -6,7 +6,6 @@
*/ */
.codeBlock { .codeBlock {
border-radius: 0;
margin-bottom: 0; margin-bottom: 0;
overflow: hidden; overflow: hidden;
overflow-wrap: break-word; overflow-wrap: break-word;

View file

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

View file

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