Code block header

[simbleau]

I just noticed that the dark theme has a slightly constrasting background color while the light theme does not for code blocks. I don't care if it's the same or slightly different, but I'd hope they are consistent.

Also not sure how much I like code type (rs:) on the code block itself, which I also noticed blends in too well with the use statements on the next line, especially on light theme.

I think it would be nice if we could aim for something pleasant with rounded borders and a clear heading line, although I'm not sure how feasible it is:

[Jieiku]

Yeah I plan to work on this eventually, I will be a bit busy for a while. The idea for the current implementation on the code block naming comes from here: https://github.com/getzola/zola/issues/1851

I agree that the code block name could be better, also for the copy button, I am thinking I would like it to only display on mouseover, like it does on github:

//! jelly-actix-web-starter - A starter template for actix-web projects that feels very Django-esque. Avoid the boring stuff and move faster.

use jelly::actix_web;
use mainlib;
use std::io;

#[actix_web::main]
async fn main() -> io::Result<()> {
    mainlib::main().await
}

let context = Context::new();

I like the shading behind the code block for the dark theme, I can try adding some shading to the background of the light theme, the problem with a light theme is its hard to maintain enough contrast to pass google lighthouse and still have vibrant colors.

When I have some time I can try and work on that.

[simbleau]

Rockstar. :)

[Jieiku]

I enclosed the tag in brackets instead of a following colon, I changed the color, I also capitalized it all and put an extra line break, I think this gives plenty of separation and makes it apparent that it is a title/tag and not part of the code.

I also made the code copy button hidden unless you mouse over the code block, this looks MUCH cleaner on a page with multiple code blocks.

You can check it out here: https://abridge.netlify.app/overview-code-blocks/

[Jieiku]

I got a lot of this worked out in the refactor branch, the Tabi theme recently implemented some changes that format it close to what you were looking for, here is the result:

Just waiting for the next version/subversion of Zola to release before I merge the refactor branch of abridge.