Fix TwentyTwentyOne theme overriding the overlow-x

The TwentyTwentyOne theme is overriding the overflow-x which is preventing the line-numbers from showing. This specifies the initial setting in a more specific rule for .wp-block-code code Fixes #99
mkaz · Mar 26, 2021 · 7da715d · 7da715d
1 parent 8127a56
commit 7da715d
Show file tree

Hide file tree

Showing 5 changed files with 160 additions and 155 deletions.
diff --git a/assets/prism-a11y-dark.css b/assets/prism-a11y-dark.css
@@ -6,6 +6,7 @@
 
 pre.wp-block-code code {
 	color: #f8f8f2;
+	overflow-x: initial;
 }
 
 code[class*="language-"],

diff --git a/assets/prism-ghcolors.css b/assets/prism-ghcolors.css
@@ -5,6 +5,7 @@
 
 pre.wp-block-code code {
 	color: #393A34;
+	overflow-x: initial;
 }
 
 code[class*="language-"],

diff --git a/assets/prism-nord.css b/assets/prism-nord.css
@@ -7,6 +7,7 @@
 
 pre.wp-block-code code {
 	color: #f8f8f2;
+	overflow-x: initial;
 }
 
 code[class*="language-"],

diff --git a/assets/prism-onedark.css b/assets/prism-onedark.css
@@ -9,6 +9,7 @@
 
 pre.wp-block-code code {
   color: #ABB2BF;
+  overflow-x: initial;
 }
 
 code[class*="language-"],

diff --git a/assets/prism.css b/assets/prism.css
@@ -6,163 +6,164 @@
 
 .wp-block-code code {
 	color: #f8f8f2;
+	overflow-x: initial;
 }
 
- code[class*="language-"],
- pre[class*="language-"] {
-	 color: #f8f8f2;
-	 background: none;
-	 font-family: Hack, "Fira Code", Consolas, Menlo, Monaco, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
-	 text-align: left;
-	 white-space: pre;
-	 word-spacing: normal;
-	 word-break: normal;
-	 word-wrap: normal;
-	 line-height: 1.5;
-
-	 -moz-tab-size: 4;
-	 -o-tab-size: 4;
-	 tab-size: 4;
-
-	 -webkit-hyphens: none;
-	 -moz-hyphens: none;
-	 -ms-hyphens: none;
-	 hyphens: none;
- }
-
- /* Code blocks */
- pre[class*="language-"] {
-	 padding: 1em;
-	 margin: 0.5em auto;
-	 overflow: auto;
-	 border-radius: 0.3em;
- }
-
- :not(pre) > code[class*="language-"],
- pre[class*="language-"] {
-	 background: #2b2b2b;
- }
-
- /* Inline code */
- :not(pre) > code[class*="language-"] {
-	 padding: 0.1em;
-	 border-radius: 0.3em;
-	 white-space: normal;
- }
-
- .token.comment,
- .token.prolog,
- .token.doctype,
- .token.cdata {
-	 color: #d4d0ab;
- }
-
- .token.punctuation {
-	 color: #fefefe;
- }
-
- .token.property,
- .token.tag,
- .token.constant,
- .token.symbol,
- .token.deleted {
-	 color: #ffa07a;
- }
-
- .token.boolean,
- .token.number {
-	 color: #00e0e0;
- }
-
- .token.selector,
- .token.attr-name,
- .token.string,
- .token.char,
- .token.builtin,
- .token.inserted {
-	 color: #abe338;
- }
-
- .token.operator,
- .token.entity,
- .token.url,
- .language-css .token.string,
- .style .token.string,
- .token.variable {
-	 color: #00e0e0;
- }
-
- .token.atrule,
- .token.attr-value,
- .token.function {
-	 color: #ffd700;
- }
-
- .token.keyword {
-	 color: #00e0e0;
- }
-
- .token.regex,
- .token.important {
-	 color: #ffd700;
- }
-
- .token.important,
- .token.bold {
-	 font-weight: bold;
- }
-
- .token.italic {
-	 font-style: italic;
- }
-
- .token.entity {
-	 cursor: help;
- }
-
- @media screen and (-ms-high-contrast: active) {
-	 code[class*="language-"],
-	 pre[class*="language-"] {
-		 color: windowText;
-		 background: window;
-	 }
-
-	 :not(pre) > code[class*="language-"],
-	 pre[class*="language-"] {
-		 background: window;
-	 }
-
-	 .token.important {
-		 background: highlight;
-		 color: window;
-		 font-weight: normal;
-	 }
-
-	 .token.atrule,
-	 .token.attr-value,
-	 .token.function,
-	 .token.keyword,
-	 .token.operator,
-	 .token.selector {
-		 font-weight: bold;
-	 }
-
-	 .token.attr-value,
-	 .token.comment,
-	 .token.doctype,
-	 .token.function,
-	 .token.keyword,
-	 .token.operator,
-	 .token.property,
-	 .token.string {
-		 color: highlight;
-	 }
-
-	 .token.attr-value,
-	 .token.url {
-		 font-weight: normal;
-	 }
- }
+code[class*="language-"],
+pre[class*="language-"] {
+    color: #f8f8f2;
+    background: none;
+    font-family: Hack, "Fira Code", Consolas, Menlo, Monaco, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    word-wrap: normal;
+    line-height: 1.5;
+
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+    padding: 1em;
+    margin: 0.5em auto;
+    overflow: auto;
+    border-radius: 0.3em;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+    background: #2b2b2b;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+    padding: 0.1em;
+    border-radius: 0.3em;
+    white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+    color: #d4d0ab;
+}
+
+.token.punctuation {
+    color: #fefefe;
+}
+
+.token.property,
+.token.tag,
+.token.constant,
+.token.symbol,
+.token.deleted {
+    color: #ffa07a;
+}
+
+.token.boolean,
+.token.number {
+    color: #00e0e0;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+    color: #abe338;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string,
+.token.variable {
+    color: #00e0e0;
+}
+
+.token.atrule,
+.token.attr-value,
+.token.function {
+    color: #ffd700;
+}
+
+.token.keyword {
+    color: #00e0e0;
+}
+
+.token.regex,
+.token.important {
+    color: #ffd700;
+}
+
+.token.important,
+.token.bold {
+    font-weight: bold;
+}
+
+.token.italic {
+    font-style: italic;
+}
+
+.token.entity {
+    cursor: help;
+}
+
+@media screen and (-ms-high-contrast: active) {
+    code[class*="language-"],
+    pre[class*="language-"] {
+   	 color: windowText;
+   	 background: window;
+    }
+
+    :not(pre) > code[class*="language-"],
+    pre[class*="language-"] {
+   	 background: window;
+    }
+
+    .token.important {
+   	 background: highlight;
+   	 color: window;
+   	 font-weight: normal;
+    }
+
+    .token.atrule,
+    .token.attr-value,
+    .token.function,
+    .token.keyword,
+    .token.operator,
+    .token.selector {
+   	 font-weight: bold;
+    }
+
+    .token.attr-value,
+    .token.comment,
+    .token.doctype,
+    .token.function,
+    .token.keyword,
+    .token.operator,
+    .token.property,
+    .token.string {
+   	 color: highlight;
+    }
+
+    .token.attr-value,
+    .token.url {
+   	 font-weight: normal;
+    }
+}
 
 
 pre.line-numbers {