From 7da715d4ea919b90d01033637e2dbb50c9287dd0 Mon Sep 17 00:00:00 2001 From: Marcus Kazmierczak Date: Fri, 26 Mar 2021 15:54:39 -0700 Subject: [PATCH] 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 --- assets/prism-a11y-dark.css | 1 + assets/prism-ghcolors.css | 1 + assets/prism-nord.css | 1 + assets/prism-onedark.css | 1 + assets/prism.css | 311 +++++++++++++++++++------------------ 5 files changed, 160 insertions(+), 155 deletions(-) diff --git a/assets/prism-a11y-dark.css b/assets/prism-a11y-dark.css index 84acf62..445183e 100644 --- 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 index caf1003..dcb3900 100644 --- 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 index 0c2b70b..5dd6d8b 100644 --- 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 index 0766106..edfc81c 100644 --- 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 index fe2a18e..72b00cd 100644 --- 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 {