ApiCodeBlock CSS .theme-code-block-highlighted-line

[pmarschik]

Describe the bug

With version 2.0.0-beta.3 you've forked the CodeBlock component to ApiCodeBlock. When I use the plugin and the built-in code blocks with the showLineNumbers the formatting breaks.

Expected behavior

Using normal code blocks while having the docusaurus-openapi-theme activated should not break formatting.

Current behavior

Formatting breaks when using code blocks with showLineNumbers

Possible solution

For most CSS classes you've added the prefix openapi- to avoid name clashes. For the component ApiDemoPanel/ApiCodeBlock/Line the global style .theme-code-block-highlighted-line wis defined. I've patched the style ApiDemoPanel/ApiCodeBlock/Line/_Line.scss to remove the style, which worked for me.

Your Environment

• Version used: 2.0.0-beta.3
• Environment name and version:
  • docusaurus 2.4.0
  • pnpm 8.5.0 for building

[welcome-to-palo-alto-networks[bot]]

:tada: Thanks for opening your first issue here! Welcome to the community!

[sserrata]

Hi @pmarschik, thanks for reporting this issue. We'll work on renaming the classname to avoid the collision.

[sserrata]

@pmarschik, to ensure we address the original issue, can you elaborate on "formatting breaks" so we know exactly what to test for? Thanks!

[pmarschik]

@sserrata I'll be back in office on Tuesday and make some screenshots then.

[pmarschik]

It's really hard to replicate because not only does it depend on the duplicate global style it seems but also on the order the CSS is packed.

[pmarschik]

I've upgraded to 2.0.0-beta.4 and the problem occurred again.

I'ts worth noting that this problem occurs only when using docusaurus build and then docusaurus serve, not when running docusaurus start.

This is the patch I'm currently using via pnpm.patchedDependencies in package.json to workaround this issue:

diff --git a/lib/theme/ApiDemoPanel/ApiCodeBlock/Line/_Line.scss b/lib/theme/ApiDemoPanel/ApiCodeBlock/Line/_Line.scss
index a4185edb92be9e81884feecef2ae521d4d62ddfc..73854b28baabd40f3517089c0fddf0544bf91413 100644
--- a/lib/theme/ApiDemoPanel/ApiCodeBlock/Line/_Line.scss
+++ b/lib/theme/ApiDemoPanel/ApiCodeBlock/Line/_Line.scss
@@ -8,7 +8,7 @@ the background in custom CSS file due bug https://github.com/facebook/docusaurus
   --docusaurus-highlighted-code-line-bg: rgb(100 100 100);
 }

-.theme-code-block-highlighted-line {
+.openapi-theme-code-block-highlighted-line {
   background-color: var(--docusaurus-highlighted-code-line-bg);
   display: block;
   margin: 0 calc(-1 * var(--ifm-pre-padding));
@@ -36,7 +36,7 @@ the background in custom CSS file due bug https://github.com/facebook/docusaurus
   opacity: 0.4;
 }

-:global(.theme-code-block-highlighted-line)
+:global(.openapi-theme-code-block-highlighted-line)
   .openapi-explorer__code-block-code-line-number::before {
   opacity: 0.8;
 }
diff --git a/lib/theme/ApiExplorer/ApiCodeBlock/Line/_Line.scss b/lib/theme/ApiExplorer/ApiCodeBlock/Line/_Line.scss
index a4185edb92be9e81884feecef2ae521d4d62ddfc..73854b28baabd40f3517089c0fddf0544bf91413 100644
--- a/lib/theme/ApiExplorer/ApiCodeBlock/Line/_Line.scss
+++ b/lib/theme/ApiExplorer/ApiCodeBlock/Line/_Line.scss
@@ -8,7 +8,7 @@ the background in custom CSS file due bug https://github.com/facebook/docusaurus
   --docusaurus-highlighted-code-line-bg: rgb(100 100 100);
 }

-.theme-code-block-highlighted-line {
+.openapi-theme-code-block-highlighted-line {
   background-color: var(--docusaurus-highlighted-code-line-bg);
   display: block;
   margin: 0 calc(-1 * var(--ifm-pre-padding));
@@ -36,7 +36,7 @@ the background in custom CSS file due bug https://github.com/facebook/docusaurus
   opacity: 0.4;
 }

-:global(.theme-code-block-highlighted-line)
+:global(.openapi-theme-code-block-highlighted-line)
   .openapi-explorer__code-block-code-line-number::before {
   opacity: 0.8;
 }
diff --git a/src/theme/ApiDemoPanel/ApiCodeBlock/Line/_Line.scss b/src/theme/ApiDemoPanel/ApiCodeBlock/Line/_Line.scss
index a4185edb92be9e81884feecef2ae521d4d62ddfc..73854b28baabd40f3517089c0fddf0544bf91413 100644
--- a/src/theme/ApiDemoPanel/ApiCodeBlock/Line/_Line.scss
+++ b/src/theme/ApiDemoPanel/ApiCodeBlock/Line/_Line.scss
@@ -8,7 +8,7 @@ the background in custom CSS file due bug https://github.com/facebook/docusaurus
   --docusaurus-highlighted-code-line-bg: rgb(100 100 100);
 }

-.theme-code-block-highlighted-line {
+.openapi-theme-code-block-highlighted-line {
   background-color: var(--docusaurus-highlighted-code-line-bg);
   display: block;
   margin: 0 calc(-1 * var(--ifm-pre-padding));
@@ -36,7 +36,7 @@ the background in custom CSS file due bug https://github.com/facebook/docusaurus
   opacity: 0.4;
 }

-:global(.theme-code-block-highlighted-line)
+:global(.openapi-theme-code-block-highlighted-line)
   .openapi-explorer__code-block-code-line-number::before {
   opacity: 0.8;
 }
diff --git a/src/theme/ApiExplorer/ApiCodeBlock/Line/_Line.scss b/src/theme/ApiExplorer/ApiCodeBlock/Line/_Line.scss
index a4185edb92be9e81884feecef2ae521d4d62ddfc..73854b28baabd40f3517089c0fddf0544bf91413 100644
--- a/src/theme/ApiExplorer/ApiCodeBlock/Line/_Line.scss
+++ b/src/theme/ApiExplorer/ApiCodeBlock/Line/_Line.scss
@@ -8,7 +8,7 @@ the background in custom CSS file due bug https://github.com/facebook/docusaurus
   --docusaurus-highlighted-code-line-bg: rgb(100 100 100);
 }

-.theme-code-block-highlighted-line {
+.openapi-theme-code-block-highlighted-line {
   background-color: var(--docusaurus-highlighted-code-line-bg);
   display: block;
   margin: 0 calc(-1 * var(--ifm-pre-padding));
@@ -36,7 +36,7 @@ the background in custom CSS file due bug https://github.com/facebook/docusaurus
   opacity: 0.4;
 }

-:global(.theme-code-block-highlighted-line)
+:global(.openapi-theme-code-block-highlighted-line)
   .openapi-explorer__code-block-code-line-number::before {
   opacity: 0.8;
 }