3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-05-22 05:27:00 +02:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

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

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

1
packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/styles.module.css
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;

6
website/src/components/ColorGenerator/index.js
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>
); );
} }