Skip to content

Style `kbd`, `code` & `pre` elements in GFM"

Olena Horal-Koretska requested to merge 381554-new-fonts-style-gfm-elements into master

What does this MR do and why?

Adjusts slightly the monospace elements kbd, code, pre. In the current code version:

  • kbd is changed from 11px to 12px and is slightly vertical adjusted
  • code is changed from 12.6px to 14px
  • pre is changed from 13px to 14px

Screenshots or screen recordings

kbd

Before font-size 11px After (new font) font-size 12px, adjusted vertical-align
kbd_before kbd_after

code

Text before code is 14px Inter

Before (90% font-size) - 12.6.px After (new font) (90% font-size) - 12.6.px After (new font) - 12px After (new font) - 14px ( - my favourite)
code_before code_new_90_ code_new_12px code_new_14px

pre

🐄 example borrowed from MDN

Before - font-size: 13px After (new font) - font-size: 14px
pre_before pre_after

How to set up and validate locally

Follow the instructions from this MR to apply new fonts.

Insert the following code into the markdown field - e.g. I've used project's README. Go to any project page, update README file with the following content

#  testing kbd, code, pre with new mono font

### kbd
<kbd>Ctrl</kbd>Key CTRL

### code

Some text before the code <code>console.log('test')</code>

### pre
<pre role="img" aria-label="ASCII COW">
    ___________________________
&lt; I'm an expert in my field (pre example). &gt;
    ---------------------------
        \   ^__^
        \  (oo)\_______
            (__)\       )\/\
                ||----w |
                ||     ||
</pre>

Related to #381554 (closed)

Edited by Sascha Eggenberger

Merge request reports