Questions on code formatting

[fredrikaverpil]

Hi 👋 and thanks for a great project!

I'd like to make code blocks and inline code (using backticks) use the Fira Code font but I'm having issues making that work. I also would like to remove the backticks shown for inline code.

Custom font for code blocks and inline code

With a previous Hugo theme, I added this to my assets/css/custom.css but I must be doing something wrong, as this does not work with blowfish:

/* https://cdn.jsdelivr.net/gh/tonsky/[email protected]/ */
@import url(https://cdn.jsdelivr.net/gh/tonsky/[email protected]/distr/fira_code.css);

code {
  font-family: "Fira Code";
}

Do you see what I'm doing wrong here?

Visible backticks

I am noticing that inline codes (specified by backticks) are rendered like this by default:

I don't want these backticks visible, and instead I'd like this to show something like this (and using the Fira Code font):

Can I achieve this myself, or should this be an option in the theme config?

[nunocoracao]

Hey @fredrikaverpil thanks for reaching out.

Regarding the custom.css that should work. The docs site for blowfish uses that also, you can check the exampleSite folder in the repo. Happy to have a look at your code an try to figure it out.

The visible backticks you can override it using Hugo's docs. If you would like to propose that change feel free to open a ticket in the repo.

Thanks again and happy new year!

[fredrikaverpil]

@nunocoracao awesome, many thanks for the feedback - and a happy new year to you too! 🎉 😄

The docs site for blowfish uses that also, you can check the exampleSite folder in the repo.

Thanks, that helped!

Managed to get the custom font work in the end. I'm not sure why, but I had to inline the CSS from the CDN and then override code, kbd, samp, pre. In case anyone ends up here, this is my full assets/css/custom.css):

@font-face {
  font-family: "Mona Sans";
  src: url("/fonts/Mona-Sans.woff2") format("woff2 supports variations"),
    url("/fonts/Mona-Sans.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-stretch: 75% 125%;
}

html {
  font-family: "Mona Sans";
}

@font-face {
  font-family: "Fira Code";
  src: url("/fonts/FiraCode-Light.woff2") format("woff2"),
    url("/fonts/FiraCode-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Fira Code";
  src: url("/fonts/FiraCode-Regular.woff2") format("woff2"),
    url("/fonts/FiraCode-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Fira Code";
  src: url("/fonts/FiraCode-Medium.woff2") format("woff2"),
    url("/fonts/FiraCode-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Fira Code";
  src: url("/fonts/FiraCode-SemiBold.woff2") format("woff2"),
    url("/fonts/FiraCode-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "Fira Code";
  src: url("fonts/FiraCode-Bold.woff2") format("woff2"),
    url("fonts/FiraCode-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Fira Code VF";
  src: url("/fonts/FiraCode-VF.woff2") format("woff2-variations"),
    url("/fonts/FiraCode-VF.woff") format("woff-variations");
  /* font-weight requires a range: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide#Using_a_variable_font_font-face_changes */
  font-weight: 300 700;
  font-style: normal;
}

/* See blowfish's assets/css/compiled/main.css for what to override */
code,
kbd,
samp,
pre {
  font-family: "Fira Code";
}

The visible backticks you can override it using Hugo's docs.

Hmm 🤔 not sure what you mean here. Is this documented over at the official Hugo docs, you mean?
I searched Google and then Hugo's own docs. Would you be so kind and elaborate and maybe point me in the direction of what you mean?

I thought `something` was valid markdown out of the box and would "automatically" be styled according to whatever CSS is assigned to the code tag. 😄

I do see that in blowfish's main.css there's this that defines this behavior:

.prose :where(code):not(:where([class~="not-prose"] *)) {
  color: var(--tw-prose-code);
  font-weight: 600;
  font-size: 0.875em;
}

.prose :where(code):not(:where([class~="not-prose"] *))::before {
  content: "`";
}

.prose :where(code):not(:where([class~="not-prose"] *))::after {
  content: "`";
}

[nunocoracao]

Hello @fredrikaverpil I am sorry. I meant that you will need to dig a little deeper on how Hugo parses and renders .md files. The theme is not doing anything to it apart from selecting the right css. I have to admit that I would like to implement something like that. Would you mind sharing once you find out how that could be achieved?

[fredrikaverpil]

I'm not very good at this but judging from this, the whole issue stems from Tailwind, not Hugo, right?

[nunocoracao]

better than me apparently 🤣
I will need time to look into this one. If you would like me to code the solution let's move the discussion into an issue, I think this might be a good idea (more people asked for this change).

[fredrikaverpil]

I think that what this comes down to is to generate the tailwind main.css but with instructions on not using this "prose" thing for code and pre. Since I've never worked with Tailwind (I'm primarily in the backend of things 😅), I'm not really sure how to achieve this... but this seems like something others are having an issue with too.

Sounds good to convert this into an issue.