change font size for code snippets

[andybeet]

Is it possible to change the font size for code snips, that is any code between fences?
If so where do i look? I find the font is a little too small

[rjzupkoii]

I've been considering pushing an update that adjust the font size for code, but for the time being you can edit it in _sass/_syntax.scss. Incidentally that's where all of the styling related to code is as well.

[andybeet]

It looks like there are three options to change fontsize in this file. I have changed all three to larger font sizes (as defined in _theme.scss) eg. From $type-size-6 to $type-size-4 . I see no difference

[rjzupkoii]

From the looks of the developer tools, it seems like the font-size is getting overwritten, but it's based upon the setting for the code tag. Try the following in _sass/layout/_base.scss:

a > code,
figcaption > code,
li > code,
p > code,
pre > code,
td > code {
  padding-top: 0.1rem;
  padding-bottom: 0.1rem;
  font-size: $type-size-6;
  background: var(--global-code-background-color);
  border: 1px solid var(--global-thead-color);
  border-radius: $border-radius;
  box-shadow: $box-shadow;
  color: var(--global-code-text-color);

  &:before, &:after {
    letter-spacing: -0.2em;
    content: "\00a0"; /* non-breaking space*/
  }
}

[andybeet]

so i may have spoke in error. I think this section works for changing code font

  .highlight {
    margin: 0;
    font-family: $monospace;
    font-size: $type-size-5;
    line-height: 1.8;
  }

[rjzupkoii]

The stylesheet for that part of the code is a bit messy, so I wouldn't be surprised if it's controlled by more than one thing, or set and then overwritten somewhere else.

[JunyangZhangUSTC]

From the looks of the developer tools, it seems like the font-size is getting overwritten, but it's based upon the setting for the code tag. Try the following in _sass/layout/_base.scss:

a > code,
figcaption > code,
li > code,
p > code,
pre > code,
td > code {
  padding-top: 0.1rem;
  padding-bottom: 0.1rem;
  font-size: $type-size-6;
  background: var(--global-code-background-color);
  border: 1px solid var(--global-thead-color);
  border-radius: $border-radius;
  box-shadow: $box-shadow;
  color: var(--global-code-text-color);

  &:before, &:after {
    letter-spacing: -0.2em;
    content: "\00a0"; /* non-breaking space*/
  }
}

If modify font-size in above code directly, it may affect the normal code tag and make its font too large. So I delete the line pre > code,. I found that deleting this setting is enough to meet my needs.

More customized approach: modify the code to

a > code,
figcaption > code,
li > code,
p > code,
td > code {
  padding-top: 0.1rem;
  padding-bottom: 0.1rem;
  font-size: $type-size-6;
  background: var(--global-code-background-color);
  border: 1px solid var(--global-thead-color);
  border-radius: $border-radius;
  box-shadow: $box-shadow;
  color: var(--global-code-text-color);

  &:before, &:after {
    letter-spacing: -0.2em;
    content: "\00a0"; /* non-breaking space*/
  }
}

pre > code {
  padding-top: 0.1rem;
  padding-bottom: 0.1rem;
  font-size: $type-size-5;
  background: var(--global-code-background-color);
  /* border: 1px solid var(--global-thead-color); */
  /* border-radius: $border-radius; */
  /* box-shadow: $box-shadow; */
  color: var(--global-code-text-color);

  &:before, &:after {
    letter-spacing: -0.2em;
    content: "\00a0"; /* non-breaking space*/
  }
}

Set the style of the code block independently.