Style `kbd`, `code` & `pre` elements in GFM"
What does this MR do and why?
Adjusts slightly the monospace elements kbd
, code
, pre
. In the current code version:
-
kbd
is changed from11px
to12px
and is slightly vertical adjusted -
code
is changed from12.6px
to14px
-
pre
is changed from13px
to14px
Screenshots or screen recordings
kbd
Before font-size 11px
|
After (new font) font-size 12px , adjusted vertical-align |
---|---|
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 ( |
---|---|---|---|
pre
Before - font-size: 13px
|
After (new font) - font-size: 14px
|
---|---|
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">
___________________________
< I'm an expert in my field (pre example). >
---------------------------
\ ^__^
\ (oo)\_______
(__)\ )\/\
||----w |
|| ||
</pre>
Related to #381554 (closed)
Edited by Sascha Eggenberger