Code snippets in the Documentation without a monospace fallback

[penge]

🐛 Bug Report

Code snippets in the Documentation at https://www.elastic.co/guide/index.html don't have a correct fallback font - font that would be used if none of the monospaced fonts is present. Right now, the fallback is sans-serif, but should be monospace.

To Reproduce

Open:

• https://www.elastic.co/guide/en/elasticsearch/client/javascript-api/current/client-configuration.html
• https://www.elastic.co/guide/en/beats/libbeat/current/config-file-format.html

In the case of Chrome OS, the code snippet would have sans-serif font. It would look like:

Expected behavior

Expected is to have a monospace fallback. It would look like this:

This is easy to fix. Change the style from:

#guide .prettyprint span {
    font-family: Consolas,Menlo,DejaVu Sans Mono,Bitstream Vera Sans Mono,Lucida Console;
}

To:

#guide .prettyprint span {
    font-family: Consolas,Menlo,DejaVu Sans Mono,Bitstream Vera Sans Mono,Lucida Console,monospace;
}

This would use a Fixed-width font (monospace) based on the OS. In the case of Chrome OS, it would be Cousine. Elsewhere it could be Courier New. Right now, the fallback is sans-serif because that's how it's defined in:

guide * {
  font-family: Inter,sans-serif;
}

Your Environment

• os: Chrome OS, Version 80

[delvedor]

@elastic/webteam could you take a look at this?

[cnbishop]

Hi @delvedor - the docs team would handle this - I dropped a message in #techpubs and will update you. Thanks!

[jrodewig]

Transferring this to the elastic/docs repo as that's where these styles are stored. I'll work on raising a PR to address.

[delvedor]

Thanks!

cc @penge if you are wondering where the issue has been moved :)

[penge]

found the issue, thanks for handling it so quickly :)