Skip to content

Blog 3 #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
motdotla merged 3 commits into from
Feb 23, 2026
Merged

Blog 3 #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ab93d88
blog 3 wip
motdotla Feb 21, 2026
a4498ed
blog-3
motdotla Feb 23, 2026
baacda7
updates
motdotla Feb 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 2 additions & 4 deletions _config.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,11 +45,9 @@ exclude:
markdown: kramdown
kramdown:
input: GFM
syntax_highlighter: none
syntax_highlighter_opts:
disable: true
syntax_highlighter: rouge

highlighter: none
highlighter: rouge

plugins:
Comment on lines 45 to 52

@charliecreates charliecreates Bot Feb 23, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Switching kramdown.syntax_highlighter and highlighter to rouge is fine, but it changes generated HTML structure and class names for code blocks across the site. You already updated index.md to use {% highlight %}, but any existing posts/pages that relied on prior <pre> styling may render differently.

Given you also removed .blog-content pre styles, you should verify at least one older post/page with fenced code blocks still looks acceptable (light + dark).

Suggestion

Do a quick audit of existing markdown posts/pages that contain fenced code blocks (```), verify the generated HTML uses Rouge wrappers, and ensure the new CSS covers them. If gaps exist, add a small compatibility selector (e.g. for bare pre > code) or update the markdown to use {% highlight %} consistently.

Reply with "@CharlieHelps yes please" if you’d like me to add a commit that adds minimal compatibility CSS for non-Rouge code blocks.

- jekyll-redirect-from
Expand Down
137 changes: 137 additions & 0 deletions _includes/layouts/meta.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,143 @@
background-position: center;
background-attachment: fixed;
}

main :not(pre) > code {
background: #f4f4f5;
color: #111827;
font-size: 0.9em;
border-radius: 6px;
padding: 0.08rem 0.32rem;
}

main div.highlighter-rouge,
main pre.highlight,
main figure.highlight {
margin-top: 0.15rem;
margin-bottom: 1rem;
background: #f5f8fc;
border: 1px solid #d7e3f0;
border-left: 3px solid #7aa2d6;
border-radius: 10px;
padding: 0.75rem 0.9rem;
overflow-x: auto;
font-size: 0.76rem;
line-height: 1.55;
}

main div.highlighter-rouge .highlight,
main div.highlighter-rouge pre.highlight,
main figure.highlight pre {
margin: 0;
border: 0;
padding: 0;
background: transparent;
border-left: 0;
border-radius: 0;
font-size: inherit;
overflow: visible;
}

main div.highlighter-rouge code,
main pre.highlight code {
background: transparent;
padding: 0;
color: inherit;
font-size: inherit;
}
Comment on lines +50 to +92

@charliecreates charliecreates Bot Feb 23, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The inline-code selector main :not(pre) > code will also style code inside other containers you likely don’t want treated as “inline” (e.g., figure.highlight code can still match depending on Rouge’s structure, nested wrappers, or future markup changes). It’s safer to explicitly exclude Rouge/highlight containers so you don’t end up double-styling or fighting specificity later.

Suggestion

Tighten the selector to target only inline code while explicitly excluding Rouge blocks. For example:

main :not(pre):not(.highlight):not(.highlighter-rouge) > code {
  /* inline code styles */
}

/* Or, more explicit: */
main p > code,
main li > code,
main td > code {
  /* inline code styles */
}

This reduces unintended styling collisions with Rouge-generated markup. Reply with "@CharlieHelps yes please" if you’d like me to add a commit with this change.


main .highlight .c,
main .highlight .c1,
main .highlight .cm {
color: #64748b;
font-style: italic;
}

main .highlight .k,
main .highlight .kd,
main .highlight .kn,
main .highlight .kp,
main .highlight .kr,
main .highlight .kt {
color: #b45309;
}

main .highlight .s,
main .highlight .s1,
main .highlight .s2,
main .highlight .sb,
main .highlight .se,
main .highlight .sh {
color: #0369a1;
}

main .highlight .m,
main .highlight .mi,
main .highlight .mf {
color: #be123c;
}

main .highlight .na,
main .highlight .nb,
main .highlight .nc,
main .highlight .nf,
main .highlight .nx {
color: #1d4ed8;
}

@media (prefers-color-scheme: dark) {
main :not(pre) > code {
background: #0f141a;
color: #e5e7eb;
}

main div.highlighter-rouge,
main pre.highlight,
main figure.highlight {
background: #0f141a;
border-color: #27323d;
border-left-color: #64748b;
color: #e5e7eb;
}

main .highlight .c,
main .highlight .c1,
main .highlight .cm {
color: #7c8aa0;
}

main .highlight .k,
main .highlight .kd,
main .highlight .kn,
main .highlight .kp,
main .highlight .kr,
main .highlight .kt {
color: #fbbf24;
}

main .highlight .s,
main .highlight .s1,
main .highlight .s2,
main .highlight .sb,
main .highlight .se,
main .highlight .sh {
color: #34d399;
}

main .highlight .m,
main .highlight .mi,
main .highlight .mf {
color: #fb923c;
}

main .highlight .na,
main .highlight .nb,
main .highlight .nc,
main .highlight .nf,
main .highlight .nx {
color: #fda4af;
}
}
Comment on lines +49 to +185

@charliecreates charliecreates Bot Feb 23, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All Rouge/highlighting styles are being injected into a shared meta.html include. This is a large, domain-specific styling block that will apply to every page and increases the cost of future style changes (and makes CSS harder to discover/override). If the site grows, this becomes a maintainability pain point and can cause unexpected cross-page regressions.

Suggestion

Move these code/highlight styles into a dedicated CSS file (e.g., assets/css/highlight.css) and include it via <link> so it’s cacheable and logically separated.

If you want to keep it inline for now, at least wrap with a comment header and scope to a class on layouts that need it (e.g., .has-code-blocks main ...). Reply with "@CharlieHelps yes please" if you’d like me to add a commit moving this into an asset and wiring it up.

</style>
<script src="https://cdn.tailwindcss.com"></script>
<script>
Expand Down
45 changes: 12 additions & 33 deletions _layouts/blog.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@
font-size: 0.72rem;
line-height: 1.65;
color: #111827;
text-transform: lowercase;
}

.blog-topline {
Expand Down Expand Up @@ -88,6 +87,18 @@
margin-bottom: 0.85rem;
}

.blog-content blockquote {
margin: 1rem 0;
padding: 0.7rem 0.9rem;
border-left: 3px solid #1a7f52;
background: rgba(26, 127, 82, 0.06);
color: #374151;
}

.blog-content blockquote p:last-child {
margin-bottom: 0;
}

.blog-content ul,
.blog-content ol {
margin-top: 0;
Expand All @@ -111,31 +122,6 @@
margin-bottom: 0.32rem;
}

.blog-content code {
background: #f4f4f5;
color: #111827;
font-size: 0.9em;
border-radius: 6px;
padding: 0.08rem 0.32rem;
}

.blog-content pre {
margin-top: 0.15rem;
margin-bottom: 1rem;
background: #f7f7f7;
border: 1px solid #d9d9d9;
border-radius: 10px;
padding: 0.75rem 0.9rem;
overflow-x: auto;
font-size: 0.76rem;
}

.blog-content pre code {
background: transparent;
padding: 0;
font-size: inherit;
}

.blog-content a {
color: #1a7f52;
text-decoration: underline;
Expand Down Expand Up @@ -195,13 +181,6 @@
color: #a1a1aa;
}

.blog-content code,
.blog-content pre {
background: #0d2219;
border-color: #2f4f40;
color: #f4f4f5;
}

.blog-footer {
border-top-color: #2f4f40;
}
Expand Down
Binary file added assets/img/blog/blog-3.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading