From ea67e496d8c53ece7a1fd0169068e36a87443338 Mon Sep 17 00:00:00 2001 From: Angus Hollands Date: Thu, 26 Sep 2024 12:48:05 +0100 Subject: [PATCH 1/8] feat: add client-side styling for code blocks theme --- packages/myst-to-react/src/code.tsx | 90 +++++++++++++++++++---------- 1 file changed, 59 insertions(+), 31 deletions(-) diff --git a/packages/myst-to-react/src/code.tsx b/packages/myst-to-react/src/code.tsx index e7757a40..597b12c5 100644 --- a/packages/myst-to-react/src/code.tsx +++ b/packages/myst-to-react/src/code.tsx @@ -1,5 +1,4 @@ import type { NodeRenderer } from '@myst-theme/providers'; -import { useThemeSwitcher } from '@myst-theme/providers'; import { LightAsync as SyntaxHighlighter } from 'react-syntax-highlighter'; import light from 'react-syntax-highlighter/dist/esm/styles/hljs/xcode.js'; import dark from 'react-syntax-highlighter/dist/esm/styles/hljs/vs2015.js'; @@ -7,6 +6,8 @@ import { DocumentIcon } from '@heroicons/react/24/outline'; import classNames from 'classnames'; import { CopyIcon } from './components/index.js'; import { MyST } from './MyST.js'; +import { useMemo, cloneElement } from 'react'; +import type { ComponentProps, CSSProperties } from 'react'; type Props = { value: string; @@ -32,8 +33,9 @@ function normalizeLanguage(lang?: string): string | undefined { } } +type HighlightPropsType = ComponentProps; + export function CodeBlock(props: Props) { - const { isLight } = useThemeSwitcher(); const { value, lang, @@ -49,6 +51,59 @@ export function CodeBlock(props: Props) { border, } = props; const highlightLines = new Set(emphasizeLines); + const highlighterProps: Omit = { + language: normalizeLanguage(lang), + startingLineNumber, + showLineNumbers, + wrapLines: true, + lineNumberContainerStyle: { + // This stops page content shifts + display: 'inline-block', + float: 'left', + minWidth: '1.25em', + paddingRight: '1em', + textAlign: 'right', + userSelect: 'none', + borderLeft: '4px solid transparent', + }, + lineProps: (line: number | boolean) => { + if (typeof line === 'boolean') return {}; + return highlightLines.has(line) + ? ({ + 'data-line-number': `${line}`, + 'data-highlight': 'true', + } as any) + : ({ 'data-line-number': `${line}` } as any); + }, + customStyle: { + padding: '0.8rem', + // Take over display in order to style via classes + display: null, + }, + }; + + const darkStyle = useMemo(() => { + const style = dark as CSSProperties; + return style as any; + }, []); + const darkComponent = ( + + {value} + + ); + + const lightStyle = useMemo(() => { + return { + ...(light as CSSProperties), + hljs: { ...light.hljs, background: 'transparent' }, + } as any; + }, []); + const lightComponent = ( + + {value} + + ); + return (
)} - { - if (typeof line === 'boolean') return {}; - return highlightLines.has(line) - ? ({ - 'data-line-number': `${line}`, - 'data-highlight': 'true', - } as any) - : ({ 'data-line-number': `${line}` } as any); - }} - customStyle={{ padding: '0.8rem' }} - > - {value} - + {darkComponent} + {lightComponent} {showCopy && ( Date: Thu, 26 Sep 2024 15:12:43 +0100 Subject: [PATCH 2/8] chore: add changeset --- .changeset/shiny-rocks-approve.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/shiny-rocks-approve.md diff --git a/.changeset/shiny-rocks-approve.md b/.changeset/shiny-rocks-approve.md new file mode 100644 index 00000000..7ee283f3 --- /dev/null +++ b/.changeset/shiny-rocks-approve.md @@ -0,0 +1,5 @@ +--- +'myst-to-react': patch +--- + +Fix themeing of code-blocks From 56948f93bcacfff2e2b87159fb099d634b0051bc Mon Sep 17 00:00:00 2001 From: Angus Hollands Date: Mon, 30 Sep 2024 19:30:30 +0100 Subject: [PATCH 3/8] Update packages/myst-to-react/src/code.tsx Co-authored-by: Rowan Cockett --- packages/myst-to-react/src/code.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/myst-to-react/src/code.tsx b/packages/myst-to-react/src/code.tsx index 597b12c5..e5c4907c 100644 --- a/packages/myst-to-react/src/code.tsx +++ b/packages/myst-to-react/src/code.tsx @@ -6,7 +6,7 @@ import { DocumentIcon } from '@heroicons/react/24/outline'; import classNames from 'classnames'; import { CopyIcon } from './components/index.js'; import { MyST } from './MyST.js'; -import { useMemo, cloneElement } from 'react'; +import { useMemo } from 'react'; import type { ComponentProps, CSSProperties } from 'react'; type Props = { From e939fda801808dea83616ea352ba92c1c140eb6d Mon Sep 17 00:00:00 2001 From: Angus Hollands Date: Tue, 1 Oct 2024 14:34:23 +0100 Subject: [PATCH 4/8] fix: roll our own styles --- packages/myst-to-react/src/code.tsx | 85 ++++------- styles/code-highlight.css | 210 ++++++++++++++++++++++++++++ 2 files changed, 241 insertions(+), 54 deletions(-) diff --git a/packages/myst-to-react/src/code.tsx b/packages/myst-to-react/src/code.tsx index e5c4907c..e1baa847 100644 --- a/packages/myst-to-react/src/code.tsx +++ b/packages/myst-to-react/src/code.tsx @@ -50,59 +50,35 @@ export function CodeBlock(props: Props) { background, border, } = props; - const highlightLines = new Set(emphasizeLines); - const highlighterProps: Omit = { - language: normalizeLanguage(lang), - startingLineNumber, - showLineNumbers, - wrapLines: true, - lineNumberContainerStyle: { - // This stops page content shifts - display: 'inline-block', - float: 'left', - minWidth: '1.25em', - paddingRight: '1em', - textAlign: 'right', - userSelect: 'none', - borderLeft: '4px solid transparent', - }, - lineProps: (line: number | boolean) => { - if (typeof line === 'boolean') return {}; - return highlightLines.has(line) - ? ({ - 'data-line-number': `${line}`, - 'data-highlight': 'true', - } as any) - : ({ 'data-line-number': `${line}` } as any); - }, - customStyle: { - padding: '0.8rem', - // Take over display in order to style via classes - display: null, - }, - }; - - const darkStyle = useMemo(() => { - const style = dark as CSSProperties; - return style as any; - }, []); - const darkComponent = ( - - {value} - - ); - - const lightStyle = useMemo(() => { + const highlighterProps: Omit = useMemo(() => { + const highlightLines = new Set(emphasizeLines); return { - ...(light as CSSProperties), - hljs: { ...light.hljs, background: 'transparent' }, - } as any; - }, []); - const lightComponent = ( - - {value} - - ); + language: normalizeLanguage(lang), + startingLineNumber, + showLineNumbers, + useInlineStyles: true, + wrapLines: true, + lineNumberContainerStyle: { + // This stops page content shifts + display: 'inline-block', + float: 'left', + minWidth: '1.25em', + paddingRight: '1em', + textAlign: 'right', + userSelect: 'none', + borderLeft: '4px solid transparent', + }, + lineProps: (line: number | boolean) => { + if (typeof line === 'boolean') return {}; + return highlightLines.has(line) + ? ({ + 'data-line-number': `${line}`, + 'data-highlight': 'true', + } as any) + : ({ 'data-line-number': `${line}` } as any); + }, + }; + }, [emphasizeLines]); return (
)} - {darkComponent} - {lightComponent} + + {value} + {showCopy && ( code > span > .linenumber { pre > code > span[data-highlight='true'] > .linenumber { color: #5ca5ee; } + +/* + +XCode style (c) Angel Garcia + +*/ + +/* Gray DOCTYPE selectors like WebKit */ +.xml .hljs-meta { + color: #c0c0c0; + background: transparent; +} + +.hljs-comment, +.hljs-quote { + color: #007400; +} + +.hljs-tag, +.hljs-attribute, +.hljs-keyword, +.hljs-selector-tag, +.hljs-literal, +.hljs-name { + color: #aa0d91; +} + +.hljs-variable, +.hljs-template-variable { + color: #3f6e74; +} + +.hljs-code, +.hljs-string, +.hljs-meta .hljs-string { + color: #c41a16; +} + +.hljs-regexp, +.hljs-link { + color: #0e0eff; +} + +.hljs-title, +.hljs-symbol, +.hljs-bullet, +.hljs-number { + color: #1c00cf; +} + +.hljs-section, +.hljs-meta { + color: #643820; +} + +.hljs-title.class_, +.hljs-class .hljs-title, +.hljs-type, +.hljs-built_in, +.hljs-params { + color: #5c2699; +} + +.hljs-attr { + color: #836c28; +} + +.hljs-subst { + color: #000; +} + +.hljs-formula { + background-color: #eee; + font-style: italic; +} + +.hljs-addition { + background-color: #baeeba; +} + +.hljs-deletion { + background-color: #ffc8bd; +} + +.hljs-selector-id, +.hljs-selector-class { + color: #9b703f; +} + +.hljs-doctag, +.hljs-strong { + font-weight: bold; +} + +.hljs-emphasis { + font-style: italic; +} + +/*////////////////////////////////////////*/ +/* + * Visual Studio 2015 dark style + * Author: Nicolas LLOBERA + */ + +.dark .hljs { + background: #1e1e1e; + color: #dcdcdc; +} + +.dark .hljs-keyword, +.dark .hljs-literal, +.dark .hljs-symbol, +.dark .hljs-name { + color: #569cd6; +} +.dark .hljs-link { + color: #569cd6; + text-decoration: underline; +} + +.dark .hljs-built_in, +.dark .hljs-type { + color: #4ec9b0; +} + +.dark .hljs-number, +.dark .hljs-class { + color: #b8d7a3; +} + +.dark .hljs-string, +.dark .hljs-meta .hljs-string { + color: #d69d85; +} + +.dark .hljs-regexp, +.dark .hljs-template-tag { + color: #9a5334; +} + +.dark .hljs-subst, +.dark .hljs-function, +.dark .hljs-title, +.dark .hljs-params, +.dark .hljs-formula { + color: #dcdcdc; +} + +.dark .hljs-comment, +.dark .hljs-quote { + color: #57a64a; + font-style: italic; +} + +.dark .hljs-doctag { + color: #608b4e; +} + +.dark .hljs-meta, +.dark .hljs-meta .hljs-keyword, +.dark .hljs-tag { + color: #9b9b9b; +} + +.dark .hljs-variable, +.dark .hljs-template-variable { + color: #bd63c5; +} + +.dark .hljs-attr, +.dark .hljs-attribute { + color: #9cdcfe; +} + +.dark .hljs-section { + color: gold; +} + +.dark .hljs-emphasis { + font-style: italic; +} + +.dark .hljs-strong { + font-weight: bold; +} + +/*.hljs-code { + font-family:'Monospace'; +}*/ + +.dark .hljs-bullet, +.dark .hljs-selector-tag, +.dark .hljs-selector-id, +.dark .hljs-selector-class, +.dark .hljs-selector-attr, +.dark .hljs-selector-pseudo { + color: #d7ba7d; +} + +.dark .hljs-addition { + background-color: #144212; + display: inline-block; + width: 100%; +} + +.dark .hljs-deletion { + background-color: #600; + display: inline-block; + width: 100%; +} From 7bd491457685e784eeb1245b43387f5d71535f3b Mon Sep 17 00:00:00 2001 From: Angus Hollands Date: Tue, 1 Oct 2024 14:39:41 +0100 Subject: [PATCH 5/8] fix: background colour --- packages/myst-to-react/src/code.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/myst-to-react/src/code.tsx b/packages/myst-to-react/src/code.tsx index e1baa847..715b91f0 100644 --- a/packages/myst-to-react/src/code.tsx +++ b/packages/myst-to-react/src/code.tsx @@ -77,6 +77,9 @@ export function CodeBlock(props: Props) { } as any) : ({ 'data-line-number': `${line}` } as any); }, + customStyle: { + backgroundColor: 'unset', + }, }; }, [emphasizeLines]); From 5a2eea797e6a9f05895f4f27229b6c469cbc01c7 Mon Sep 17 00:00:00 2001 From: Angus Hollands Date: Tue, 1 Oct 2024 15:14:07 +0100 Subject: [PATCH 6/8] refactor: split out new styles --- styles/app.css | 2 + styles/code-highlight-dark.css | 146 ++++++++++++++++++++++ styles/code-highlight-light.css | 124 +++++++++++++++++++ styles/code-highlight.css | 210 -------------------------------- 4 files changed, 272 insertions(+), 210 deletions(-) create mode 100644 styles/code-highlight-dark.css create mode 100644 styles/code-highlight-light.css diff --git a/styles/app.css b/styles/app.css index ab58897c..a1168257 100644 --- a/styles/app.css +++ b/styles/app.css @@ -5,6 +5,8 @@ @import './figures.css'; @import './text-spacers.css'; @import './code-highlight.css'; +@import './code-highlight-dark.css'; +@import './code-highlight-light.css'; @import './math.css'; @import './cross-references.css'; @import './block-styles.css'; diff --git a/styles/code-highlight-dark.css b/styles/code-highlight-dark.css new file mode 100644 index 00000000..134cfe36 --- /dev/null +++ b/styles/code-highlight-dark.css @@ -0,0 +1,146 @@ +/* +BSD 3-Clause License + +Copyright (c) 2006, Ivan Sagalaev. +All rights reserved. + +Redistribution and use in source and binary forms, with or without +modification, are permitted provided that the following conditions are met: + +* Redistributions of source code must retain the above copyright notice, this + list of conditions and the following disclaimer. + +* Redistributions in binary form must reproduce the above copyright notice, + this list of conditions and the following disclaimer in the documentation + and/or other materials provided with the distribution. + +* Neither the name of the copyright holder nor the names of its + contributors may be used to endorse or promote products derived from + this software without specific prior written permission. + +THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" +AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE +IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE +DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE +FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL +DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR +SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER +CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, +OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. + + +Visual Studio 2015 dark style +Author: Nicolas LLOBERA +*/ + +.dark .hljs { + background: #1e1e1e !important; + color: #dcdcdc; +} + +.dark .hljs-keyword, +.dark .hljs-literal, +.dark .hljs-symbol, +.dark .hljs-name { + color: #569cd6; +} +.dark .hljs-link { + color: #569cd6; + text-decoration: underline; +} + +.dark .hljs-built_in, +.dark .hljs-type { + color: #4ec9b0; +} + +.dark .hljs-number, +.dark .hljs-class { + color: #b8d7a3; +} + +.dark .hljs-string, +.dark .hljs-meta .hljs-string { + color: #d69d85; +} + +.dark .hljs-regexp, +.dark .hljs-template-tag { + color: #9a5334; +} + +.dark .hljs-subst, +.dark .hljs-function, +.dark .hljs-title, +.dark .hljs-params, +.dark .hljs-formula { + color: #dcdcdc; +} + +.dark .hljs-comment, +.dark .hljs-quote { + color: #57a64a; + font-style: italic; +} + +.dark .hljs-doctag { + color: #608b4e; +} + +.dark .hljs-meta, +.dark .hljs-meta .hljs-keyword, +.dark .hljs-tag { + color: #9b9b9b; +} + +.dark .hljs-variable, +.dark .hljs-template-variable { + color: #bd63c5; +} + +.dark .hljs-attr, +.dark .hljs-attribute { + color: #9cdcfe; +} + +.dark .hljs-section { + color: gold; +} + +.dark .hljs-emphasis { + font-style: italic; +} + +.dark .hljs-strong { + font-weight: bold; +} + +/*.hljs-code { + font-family:'Monospace'; +}*/ + +.dark .hljs-bullet, +.dark .hljs-selector-tag, +.dark .hljs-selector-id, +.dark .hljs-selector-class, +.dark .hljs-selector-attr, +.dark .hljs-selector-pseudo { + color: #d7ba7d; +} + +.dark .hljs-addition { + background-color: #144212; + display: inline-block; + width: 100%; +} + +.dark .hljs-deletion { + background-color: #600; + display: inline-block; + width: 100%; +} + +.dark .hljs-code { + color: unset; +} diff --git a/styles/code-highlight-light.css b/styles/code-highlight-light.css new file mode 100644 index 00000000..2809c21b --- /dev/null +++ b/styles/code-highlight-light.css @@ -0,0 +1,124 @@ +/* +BSD 3-Clause License + +Copyright (c) 2006, Ivan Sagalaev. +All rights reserved. + +Redistribution and use in source and binary forms, with or without +modification, are permitted provided that the following conditions are met: + +* Redistributions of source code must retain the above copyright notice, this + list of conditions and the following disclaimer. + +* Redistributions in binary form must reproduce the above copyright notice, + this list of conditions and the following disclaimer in the documentation + and/or other materials provided with the distribution. + +* Neither the name of the copyright holder nor the names of its + contributors may be used to endorse or promote products derived from + this software without specific prior written permission. + +THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" +AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE +IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE +DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE +FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL +DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR +SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER +CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, +OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. + +XCode style (c) Angel Garcia +*/ + +/* Gray DOCTYPE selectors like WebKit */ +.xml .hljs-meta { + color: #c0c0c0; + background: transparent; +} + +.hljs-comment, +.hljs-quote { + color: #007400; +} + +.hljs-tag, +.hljs-attribute, +.hljs-keyword, +.hljs-selector-tag, +.hljs-literal, +.hljs-name { + color: #aa0d91; +} + +.hljs-variable, +.hljs-template-variable { + color: #3f6e74; +} + +.hljs-code, +.hljs-string, +.hljs-meta .hljs-string { + color: #c41a16; +} + +.hljs-regexp, +.hljs-link { + color: #0e0eff; +} + +.hljs-title, +.hljs-symbol, +.hljs-bullet, +.hljs-number { + color: #1c00cf; +} + +.hljs-section, +.hljs-meta { + color: #643820; +} + +.hljs-title.class_, +.hljs-class .hljs-title, +.hljs-type, +.hljs-built_in, +.hljs-params { + color: #5c2699; +} + +.hljs-attr { + color: #836c28; +} + +.hljs-subst { + color: #000; +} + +.hljs-formula { + background-color: #eee; + font-style: italic; +} + +.hljs-addition { + background-color: #baeeba; +} + +.hljs-deletion { + background-color: #ffc8bd; +} + +.hljs-selector-id, +.hljs-selector-class { + color: #9b703f; +} + +.hljs-doctag, +.hljs-strong { + font-weight: bold; +} + +.hljs-emphasis { + font-style: italic; +} diff --git a/styles/code-highlight.css b/styles/code-highlight.css index ebdb7c5f..2e922476 100644 --- a/styles/code-highlight.css +++ b/styles/code-highlight.css @@ -20,213 +20,3 @@ pre > code > span > .linenumber { pre > code > span[data-highlight='true'] > .linenumber { color: #5ca5ee; } - -/* - -XCode style (c) Angel Garcia - -*/ - -/* Gray DOCTYPE selectors like WebKit */ -.xml .hljs-meta { - color: #c0c0c0; - background: transparent; -} - -.hljs-comment, -.hljs-quote { - color: #007400; -} - -.hljs-tag, -.hljs-attribute, -.hljs-keyword, -.hljs-selector-tag, -.hljs-literal, -.hljs-name { - color: #aa0d91; -} - -.hljs-variable, -.hljs-template-variable { - color: #3f6e74; -} - -.hljs-code, -.hljs-string, -.hljs-meta .hljs-string { - color: #c41a16; -} - -.hljs-regexp, -.hljs-link { - color: #0e0eff; -} - -.hljs-title, -.hljs-symbol, -.hljs-bullet, -.hljs-number { - color: #1c00cf; -} - -.hljs-section, -.hljs-meta { - color: #643820; -} - -.hljs-title.class_, -.hljs-class .hljs-title, -.hljs-type, -.hljs-built_in, -.hljs-params { - color: #5c2699; -} - -.hljs-attr { - color: #836c28; -} - -.hljs-subst { - color: #000; -} - -.hljs-formula { - background-color: #eee; - font-style: italic; -} - -.hljs-addition { - background-color: #baeeba; -} - -.hljs-deletion { - background-color: #ffc8bd; -} - -.hljs-selector-id, -.hljs-selector-class { - color: #9b703f; -} - -.hljs-doctag, -.hljs-strong { - font-weight: bold; -} - -.hljs-emphasis { - font-style: italic; -} - -/*////////////////////////////////////////*/ -/* - * Visual Studio 2015 dark style - * Author: Nicolas LLOBERA - */ - -.dark .hljs { - background: #1e1e1e; - color: #dcdcdc; -} - -.dark .hljs-keyword, -.dark .hljs-literal, -.dark .hljs-symbol, -.dark .hljs-name { - color: #569cd6; -} -.dark .hljs-link { - color: #569cd6; - text-decoration: underline; -} - -.dark .hljs-built_in, -.dark .hljs-type { - color: #4ec9b0; -} - -.dark .hljs-number, -.dark .hljs-class { - color: #b8d7a3; -} - -.dark .hljs-string, -.dark .hljs-meta .hljs-string { - color: #d69d85; -} - -.dark .hljs-regexp, -.dark .hljs-template-tag { - color: #9a5334; -} - -.dark .hljs-subst, -.dark .hljs-function, -.dark .hljs-title, -.dark .hljs-params, -.dark .hljs-formula { - color: #dcdcdc; -} - -.dark .hljs-comment, -.dark .hljs-quote { - color: #57a64a; - font-style: italic; -} - -.dark .hljs-doctag { - color: #608b4e; -} - -.dark .hljs-meta, -.dark .hljs-meta .hljs-keyword, -.dark .hljs-tag { - color: #9b9b9b; -} - -.dark .hljs-variable, -.dark .hljs-template-variable { - color: #bd63c5; -} - -.dark .hljs-attr, -.dark .hljs-attribute { - color: #9cdcfe; -} - -.dark .hljs-section { - color: gold; -} - -.dark .hljs-emphasis { - font-style: italic; -} - -.dark .hljs-strong { - font-weight: bold; -} - -/*.hljs-code { - font-family:'Monospace'; -}*/ - -.dark .hljs-bullet, -.dark .hljs-selector-tag, -.dark .hljs-selector-id, -.dark .hljs-selector-class, -.dark .hljs-selector-attr, -.dark .hljs-selector-pseudo { - color: #d7ba7d; -} - -.dark .hljs-addition { - background-color: #144212; - display: inline-block; - width: 100%; -} - -.dark .hljs-deletion { - background-color: #600; - display: inline-block; - width: 100%; -} From 21679d3d6e6630b2d5e3787002ee1b9f6374c37f Mon Sep 17 00:00:00 2001 From: Angus Hollands Date: Tue, 1 Oct 2024 15:16:31 +0100 Subject: [PATCH 7/8] chore: add new changeset --- .changeset/honest-pumpkins-wink.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/honest-pumpkins-wink.md diff --git a/.changeset/honest-pumpkins-wink.md b/.changeset/honest-pumpkins-wink.md new file mode 100644 index 00000000..10390749 --- /dev/null +++ b/.changeset/honest-pumpkins-wink.md @@ -0,0 +1,5 @@ +--- +'@myst-theme/styles': patch +--- + +Add styling for code-blocks From e561a28c6df05a23b05f8763c8d40ef37c088eeb Mon Sep 17 00:00:00 2001 From: Rowan Cockett Date: Tue, 15 Oct 2024 08:11:24 -0600 Subject: [PATCH 8/8] remove unused imports --- packages/myst-to-react/src/code.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/myst-to-react/src/code.tsx b/packages/myst-to-react/src/code.tsx index 715b91f0..699fdaaf 100644 --- a/packages/myst-to-react/src/code.tsx +++ b/packages/myst-to-react/src/code.tsx @@ -1,13 +1,11 @@ import type { NodeRenderer } from '@myst-theme/providers'; import { LightAsync as SyntaxHighlighter } from 'react-syntax-highlighter'; -import light from 'react-syntax-highlighter/dist/esm/styles/hljs/xcode.js'; -import dark from 'react-syntax-highlighter/dist/esm/styles/hljs/vs2015.js'; import { DocumentIcon } from '@heroicons/react/24/outline'; import classNames from 'classnames'; import { CopyIcon } from './components/index.js'; import { MyST } from './MyST.js'; import { useMemo } from 'react'; -import type { ComponentProps, CSSProperties } from 'react'; +import type { ComponentProps } from 'react'; type Props = { value: string;