cssjekyllgithub-pagesrouge

Jekyll code block size in header is too small

The code block font size is too small on my website when it appears in Heading 1 lines.

When typing a code block in a header in Stack Exchange we seem to have no problem. For example, when I type the following on this website:

# `multi-timer` bash script

The `multi-timer` bash script works in Ubuntu versions 14.04, 16.04 and 18.04. It also works in Windows 10 with Ubuntu 16.04 Desktop installed.

The markdown renders properly in HTML as:

multi-timer bash script

The multi-timer bash script works in Ubuntu versions 14.04, 16.04 and 18.04. It also works in Windows 10 with Ubuntu 16.04 Desktop installed.

Using Jekyll (Cayman Theme) however the font is always a little bit smaller than the normal sized font:

jekyll code block size in header.png

I think the problem is buried somewhere in this Sass / SCSS code on the Jekyll Cayman Theme website:

  code {
    padding: 2px 4px;
    font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
    font-size: 0.9rem;
    color: $code-text-color;
    background-color: $code-bg-color;
    border-radius: 0.3rem;
  }

Specifically the: font-size: 0.9rem; line I believe to be the problem.

How do I change the code block so it uses H1 font size on an H1 line, H2 font size on an H2 line, etc.?

If it helps I'm just using Github Pages natively and this is the repo.

Solution

  • Change 0.9rem to 92%

    As shown below I've fixed the problem:

    enter image description here

    Steps taken

    I made the fix by first copying the entire file https://github.com/pages-themes/cayman/blob/master/_sass/jekyll-theme-cayman.scss to my repo's _sass/ subdirectory.

    Then I changed font-size: 0.9rem line below to font-size: 92%;:

      code {
    padding: 2px 4px;
    font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
    font-size: 92%;  // Change 0.9rem to 92% for proper size in headings
    color: $code-text-color;
    background-color: $code-bg-color;
    border-radius: 0.3rem;
  }

    Drawbacks

    I don't like the fact if the Cayman Theme repo makes changes to this file I will not gain them as 398 lines of this file are now permanently in my own repo.

    That said, I can live with this solution for now. If I improve it I will come back and update this answer.