Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add dark option for code blocks #284

Merged
merged 7 commits into from
Sep 20, 2021
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions __tests__/index.test.js
Original file line number Diff line number Diff line change
@@ -27,6 +27,7 @@ test('it should have the proper utils exports', () => {
},
normalize: true,
settings: { position: false },
theme: 'light',
});
});

10 changes: 6 additions & 4 deletions components/Code/index.jsx
Original file line number Diff line number Diff line change
@@ -32,7 +32,7 @@ CopyCode.propTypes = {
};

function Code(props) {
const { children, className, copyButtons, lang, meta } = props;
const { children, className, copyButtons, lang, meta, theme } = props;

const langClass = className.search(/lang(?:uage)?-\w+/) >= 0 ? className.match(/\s?lang(?:uage)?-(\w+)/)[1] : '';
const language = canonicalLanguage(lang) || langClass;
@@ -41,14 +41,15 @@ function Code(props) {
const codeOpts = {
inline: !lang,
tokenizeVariables: true,
dark: theme === 'dark',
};
const codeContent = syntaxHighlighter ? syntaxHighlighter(children[0], language, codeOpts) : children[0];

return (
<React.Fragment>
<code
ref={codeRef}
className={['rdmd-code', `lang-${language}`].join(' ')}
className={['rdmd-code', `lang-${language}`, `theme-${theme}`].join(' ')}
data-lang={language}
name={meta}
suppressHydrationWarning={true}
@@ -60,12 +61,12 @@ function Code(props) {
);
}

function CreateCode(sanitizeSchema, { copyButtons }) {
function CreateCode(sanitizeSchema, { copyButtons, theme }) {
// This is for code blocks class name
sanitizeSchema.attributes.code = ['className', 'lang', 'meta', 'value'];

// eslint-disable-next-line react/display-name
return props => <Code {...props} copyButtons={copyButtons} />;
return props => <Code {...props} copyButtons={copyButtons} theme={theme} />;
}

Code.propTypes = {
@@ -74,6 +75,7 @@ Code.propTypes = {
copyButtons: PropTypes.bool,
lang: PropTypes.string,
meta: PropTypes.string,
theme: PropTypes.string,
};

Code.defaultProps = {
13 changes: 11 additions & 2 deletions components/Code/style.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@mixin gfmCodeBaseStyles($background: #F6F8FA, $text: inherit) {
@mixin gfmCodeBaseStyles($background: #F6F8FA, $background-dark: #242E34, $text: inherit) {

code,
kbd,
@@ -60,6 +60,11 @@
padding: 1em
}

pre code.theme-dark {
background-color: $background-dark;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this doubled for ie?

background-color: var(--md-code-background, $background-dark);
}

pre code {
background-color: transparent;
border: 0;
@@ -200,6 +205,10 @@
background: inherit;
}

>code.theme-dark {
color: white;
}

button.rdmd-code-copy {
display: inline-block !important;
position: absolute;
@@ -237,4 +246,4 @@
// --md-code-background: #F6F8FA;
@include gfmCodeBaseStyles;
@include copyCodeButton;
}
}
14 changes: 9 additions & 5 deletions components/CodeTabs/index.jsx
Original file line number Diff line number Diff line change
@@ -4,7 +4,7 @@ const PropTypes = require('prop-types');
const { uppercase } = require('@readme/syntax-highlighter');

const CodeTabs = props => {
const { attributes, children } = props;
const { attributes, children, theme } = props;

function handleClick({ target }, index) {
const $wrap = target.parentElement.parentElement;
@@ -20,7 +20,7 @@ const CodeTabs = props => {

return (
// eslint-disable-next-line react/jsx-props-no-spreading
<div {...attributes} className="CodeTabs CodeTabs_initial">
<div {...attributes} className={`CodeTabs CodeTabs_initial theme-${theme}`}>
<div className="CodeTabs-toolbar">
{children.map(({ props: pre }, i) => {
const { meta, lang } = pre.children[0].props;
@@ -40,12 +40,16 @@ const CodeTabs = props => {
CodeTabs.propTypes = {
attributes: PropTypes.shape({}),
children: PropTypes.arrayOf(PropTypes.any).isRequired,
theme: PropTypes.string,
};

CodeTabs.defaultProps = {
attributes: null,
};

module.exports = (/* sanitizeSchema */) => {
return CodeTabs;
};
function CreateCodeTabs({ theme }) {
// eslint-disable-next-line react/display-name
return props => <CodeTabs {...props} theme={theme} />;
}

module.exports = (_, opts) => CreateCodeTabs(opts);
24 changes: 24 additions & 0 deletions components/CodeTabs/style.scss
Original file line number Diff line number Diff line change
@@ -3,14 +3,25 @@

@mixin CodeTabs {
$bgc-pre: #F6F8FA;
$bgc-pre-dark: #242E34;
$bgc-bar: darken(desaturate($bgc-pre, 17.46), 4.31);
$bgc-bar-dark: lighten(desaturate($bgc-pre-dark, 17.46), 4.31);
$radius: var(--md-code-radius, var(--markdown-radius, 3px));

color: #333;
color: var(--md-code-text, #333);
border-radius: $radius !important;
overflow: hidden;

&.theme-dark {
color: white;
color: var(--md-code-text, white);
.CodeTabs-toolbar {
background: $bgc-bar-dark;
background: var(--md-code-tabs, $bgc-bar-dark);
}
}

&-toolbar {
background: $bgc-bar;
background: var(--md-code-tabs, $bgc-bar);
@@ -50,6 +61,14 @@
pointer-events: none;
}

&.theme-dark.CodeTabs_initial &-toolbar button:first-child,
&.theme-dark .CodeTabs-toolbar button.CodeTabs_active {
background: $bgc-pre-dark;
background: var(--md-code-background, $bgc-pre-dark);
color: white;
color: var(--md-code-text, white);
}

&-toolbar button:not(.CodeTabs_active):hover {
background: rgba(0, 0, 0, .075);
}
@@ -62,6 +81,11 @@
&:not(.CodeTabs_active) { display: none }
}

&.theme-dark pre {
background: $bgc-pre-dark;
background: var(--md-code-background, $bgc-pre-dark);
}

&.CodeTabs_initial pre:first-child {
display: block;
}
2 changes: 1 addition & 1 deletion index.js
Original file line number Diff line number Diff line change
@@ -152,7 +152,7 @@ export function reactProcessor(opts = {}, components = {}) {
createElement: React.createElement,
Fragment: React.Fragment,
components: {
'code-tabs': CodeTabs(sanitize),
'code-tabs': CodeTabs(sanitize, opts),
'html-block': HTMLBlock(sanitize),
'rdme-callout': Callout(sanitize),
'readme-variable': Variable,
1 change: 1 addition & 0 deletions options.js
Original file line number Diff line number Diff line change
@@ -16,6 +16,7 @@ const options = {
settings: {
position: false,
},
theme: 'light',
};

/**
2 changes: 1 addition & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.