How to increase Code block font?!

How to increase the font size for Code block?!

The font-size for Code block is critically too small, especially on a dark background…

I have found this - but it works only in Reading View…

.markdown-preview-view code {
  font-family: Courier New !important;
  font-size: 18px !important;
}

How to do the same for Preview / Source Views ?!

1 Like

There is a custom variable / property you could use for size, but this will affect inline code as well as code blocks:

body {
     --code-size: var(--font-smaller);
}

These are the variables defined in the default theme (you can of course just use your own em or px value in the above snippet and skip these).

  /* Relative font sizes */
  --font-smallest: 0.8em;
  --font-smaller: 0.875em;
  --font-small: 0.933em;

e.g.

body {
    --code-size: 1em;
}

If you only wanted to target code blocks, you could could use this (for Source mode and Live Preview) in addition to your CSS above (for Reading view).

.cm-s-obsidian .HyperMD-codeblock {
  font-family: 'Courier New';
  font-size: 18px;
}

For inline code, it would be

.cm-s-obsidian span.cm-inline-code {
  font-family: 'Courier New';
  font-size: 18px;
}

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.