This is an automated email from the ASF dual-hosted git repository.
kaxilnaik pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/airflow-site.git
The following commit(s) were added to refs/heads/main by this push:
new d7afdc3cca Fix syntax highlighting in blog code blocks (#1334)
d7afdc3cca is described below
commit d7afdc3cca9720c0cc557e130c934c4284562a95
Author: Kaxil Naik <[email protected]>
AuthorDate: Wed Dec 17 22:19:46 2025 +0000
Fix syntax highlighting in blog code blocks (#1334)
- Scope Pygments styles to .rst-content to prevent overriding Chroma
- Import Docsy Chroma dark theme (td/code-dark) for blog posts
- Remove .chroma selector from _highlights.scss (keep only .highlight for
Sphinx)
- Fix excessive line spacing by excluding .chroma spans from margin-bottom
- Reduce code block padding/margin from 40px/16px to 1rem
Fixes incorrect token colors where 'from' and 'airflow.sdk' appeared
identical in blog posts. Chroma now properly applies distinct colors for
different Python token types (.kn vs .nn).
---
landing-pages/site/assets/scss/_highlights.scss | 11 +++++++----
landing-pages/site/assets/scss/_markdown-content.scss | 15 ++++++++++++---
landing-pages/site/assets/scss/main-custom.scss | 1 +
landing-pages/site/assets/scss/pygments/_dark.scss | 3 +++
landing-pages/site/assets/scss/pygments/_light.scss | 3 +++
5 files changed, 26 insertions(+), 7 deletions(-)
diff --git a/landing-pages/site/assets/scss/_highlights.scss
b/landing-pages/site/assets/scss/_highlights.scss
index 44e42dbf33..8351f3eb43 100644
--- a/landing-pages/site/assets/scss/_highlights.scss
+++ b/landing-pages/site/assets/scss/_highlights.scss
@@ -20,7 +20,9 @@
@import "pygments/light";
@import "pygments/dark";
-.chroma, .highlight {
+// Light theme syntax highlighting for RST/Sphinx docs only
+// (Chroma for blog markdown uses Docsy theme colors)
+.highlight {
background-color: #ffffff;
.lntd {
@@ -86,8 +88,8 @@
}
pre {
- margin: 40px 0;
- padding: 16px 20px;
+ margin: 1rem 0;
+ padding: 1rem;
border: solid 1px map-get($colors, very-light-pink);
border-radius: 5px;
width: 100%;
@@ -98,7 +100,8 @@ pre {
}
[data-bs-theme="dark"] {
- .chroma, .highlight {
+ // Dark theme for RST/Sphinx docs only
+ .highlight {
background-color: #0d1117;
.hl {
diff --git a/landing-pages/site/assets/scss/_markdown-content.scss
b/landing-pages/site/assets/scss/_markdown-content.scss
index 00676b9806..d273c62222 100644
--- a/landing-pages/site/assets/scss/_markdown-content.scss
+++ b/landing-pages/site/assets/scss/_markdown-content.scss
@@ -24,14 +24,23 @@
margin-bottom: 20px;
}
- p, span {
+ p {
@extend .bodytext__medium--brownish-grey;
margin-bottom: 30px;
margin-top: 20px;
}
- pre span {
- @extend .monotext--brownish-grey;
+ // Only apply to spans outside of code blocks
+ > p, > span {
+ @extend .bodytext__medium--brownish-grey;
+ margin-bottom: 30px;
+ margin-top: 20px;
+ }
+
+ // Reset margin for spans inside code blocks
+ .chroma span {
+ margin-bottom: 0;
+ margin-top: 0;
}
img {
diff --git a/landing-pages/site/assets/scss/main-custom.scss
b/landing-pages/site/assets/scss/main-custom.scss
index c486fa2f8d..defe50572b 100644
--- a/landing-pages/site/assets/scss/main-custom.scss
+++ b/landing-pages/site/assets/scss/main-custom.scss
@@ -51,6 +51,7 @@
@import "scroll-to-top";
@import "content-drawer";
@import "dropdown";
+@import "td/code-dark"; // Import Docsy Chroma themes for blog markdown code
blocks
@import "highlights";
@import "share-social-media";
@import "four-oh-four";
diff --git a/landing-pages/site/assets/scss/pygments/_dark.scss
b/landing-pages/site/assets/scss/pygments/_dark.scss
index 19e52d7ae3..08af580109 100644
--- a/landing-pages/site/assets/scss/pygments/_dark.scss
+++ b/landing-pages/site/assets/scss/pygments/_dark.scss
@@ -36,6 +36,8 @@
*/
[data-bs-theme="dark"] {
+// Scope Pygments to .rst-content only (don't override Chroma for blog
markdown)
+.rst-content {
pre { line-height: 125%; }
td.linenos .normal { color: #6e7681; background-color: #0d1117; padding-left:
5px; padding-right: 5px; }
span.linenos { color: #6e7681; background-color: #0d1117; padding-left: 5px;
padding-right: 5px; }
@@ -123,3 +125,4 @@ span.linenos.special { color: #e6edf3; background-color:
#6e7681; padding-left:
.highlight .vm { color: #79C0FF } /* Name.Variable.Magic */
.highlight .il { color: #A5D6FF } /* Literal.Number.Integer.Long */
}
+}
diff --git a/landing-pages/site/assets/scss/pygments/_light.scss
b/landing-pages/site/assets/scss/pygments/_light.scss
index 7a8b42f33d..c57a955491 100644
--- a/landing-pages/site/assets/scss/pygments/_light.scss
+++ b/landing-pages/site/assets/scss/pygments/_light.scss
@@ -36,6 +36,8 @@
*/
[data-bs-theme="light"] {
+ // Scope Pygments to .rst-content only (don't override Chroma for blog
markdown)
+ .rst-content {
pre { line-height: 125%; }
td.linenos .normal { color: inherit; background-color: transparent;
padding-left: 5px; padding-right: 5px; }
span.linenos { color: inherit; background-color: transparent; padding-left:
5px; padding-right: 5px; }
@@ -80,4 +82,5 @@
.highlight .sr { color: #A31515 } /* Literal.String.Regex */
.highlight .s1 { color: #A31515 } /* Literal.String.Single */
.highlight .ss { color: #A31515 } /* Literal.String.Symbol */
+ }
}
