FEATURE: when rich-editor is enabled use Jetbrains Mono as code font (#32122)

This change forces consistency around code font in Discourse once the
new
rich-editor is enabled

- This means all code blocks in Discourse will render with this font
- Additionally the markdown mode composer will render with this font

Additionally we make 3 small adjustments:

1. We disable ligatures which conflict with typographer
2. We add support for custom ligature settings
3. We adjust down font size, cause 14px ends up matching visually with a
16px non monospace font, this change is already in place previously on
posts

Example:


![image](https://github.com/user-attachments/assets/eca0b544-f3a4-4172-b2af-b39a3c0208e7)
This commit is contained in:
Sam
2025-04-02 16:36:52 +11:00
committed by GitHub
parent e4244cca35
commit c0cf898c10
4 changed files with 32 additions and 5 deletions

View File

@ -127,7 +127,7 @@ GEM
digest (3.2.0) digest (3.2.0)
digest-xxhash (0.2.9) digest-xxhash (0.2.9)
discourse-emojis (1.0.38) discourse-emojis (1.0.38)
discourse-fonts (0.0.18) discourse-fonts (0.0.19)
discourse-seed-fu (2.3.12) discourse-seed-fu (2.3.12)
activerecord (>= 3.1) activerecord (>= 3.1)
activesupport (>= 3.1) activesupport (>= 3.1)
@ -851,7 +851,7 @@ CHECKSUMS
digest (3.2.0) sha256=fa2e7092ec683f65d82fadde5ff4ca3b32e23ee0b19f1fc1a5e09993ad2d3991 digest (3.2.0) sha256=fa2e7092ec683f65d82fadde5ff4ca3b32e23ee0b19f1fc1a5e09993ad2d3991
digest-xxhash (0.2.9) sha256=a989d8309c03c4136a4bea9981ec0a146a2750de7f3dfb7b5624a3038aa598d7 digest-xxhash (0.2.9) sha256=a989d8309c03c4136a4bea9981ec0a146a2750de7f3dfb7b5624a3038aa598d7
discourse-emojis (1.0.38) sha256=4f9cfcbc7ea8aef69e1210e8796233ad9923ae908ee7696424f3ad92e51d6c51 discourse-emojis (1.0.38) sha256=4f9cfcbc7ea8aef69e1210e8796233ad9923ae908ee7696424f3ad92e51d6c51
discourse-fonts (0.0.18) sha256=a7d25c13edd3325ae40010ca277530d69fc7952a05aa7b2ff07c1d07412b72a1 discourse-fonts (0.0.19) sha256=78d4ddd671615908303a675427039d8d787c935e6deae184c6e143c18c6e0033
discourse-seed-fu (2.3.12) sha256=4f61d95c11ed54609046cd04eb3a51b531c5fa863fa86d1bea7d74264e5c75e4 discourse-seed-fu (2.3.12) sha256=4f61d95c11ed54609046cd04eb3a51b531c5fa863fa86d1bea7d74264e5c75e4
discourse_dev_assets (0.0.5) sha256=a09a801a210aa3f7247dd382dfd73b389d4bd02be86be675eca2d451f9898285 discourse_dev_assets (0.0.5) sha256=a09a801a210aa3f7247dd382dfd73b389d4bd02be86be675eca2d451f9898285
docile (1.4.1) sha256=96159be799bfa73cdb721b840e9802126e4e03dfc26863db73647204c727f21e docile (1.4.1) sha256=96159be799bfa73cdb721b840e9802126e4e03dfc26863db73647204c727f21e

View File

@ -5,6 +5,8 @@
&--rich-editor-enabled .d-editor-textarea-wrapper textarea.d-editor-input { &--rich-editor-enabled .d-editor-textarea-wrapper textarea.d-editor-input {
font-family: var(--d-font-family--monospace); font-family: var(--d-font-family--monospace);
font-size: var(--font-down-1);
font-variant-ligatures: none;
} }
} }

View File

@ -11,9 +11,6 @@
--d-button-border-radius: 2px; --d-button-border-radius: 2px;
--d-input-border-radius: 2px; --d-input-border-radius: 2px;
--d-content-background: initial; --d-content-background: initial;
--d-font-family--monospace:
ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Liberation Mono", menlo,
monaco, consolas, monospace;
--d-button-transition: none; --d-button-transition: none;
} }

View File

@ -64,9 +64,31 @@ module Stylesheet
CSS CSS
if SiteSetting.rich_editor
contents << <<~CSS
#{font_css(jetbrains_mono)}
#{render_font_special_properties(jetbrains_mono, "body")}
:root {
--d-font-family--monospace: #{jetbrains_mono[:stack]};
}
CSS
else
contents << <<~CSS
:root {
--d-font-family--monospace: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Liberation Mono", menlo, monaco, consolas, monospace;
}
CSS
end
contents contents
end end
def jetbrains_mono
@@jetbrains_mono ||= DiscourseFonts.fonts.find { |f| f[:key] == "jet_brains_mono" }
end
def wizard_fonts def wizard_fonts
contents = +"" contents = +""
@ -262,6 +284,12 @@ module Stylesheet
else else
contents << "#{" " * indent}font-feature-settings: normal;\n" contents << "#{" " * indent}font-feature-settings: normal;\n"
end end
# avoiding adding normal to the CSS cause it is not needed in this case
if font[:font_variant_ligatures].present?
contents << "#{" " * indent}font-variant-ligatures: #{font[:font_variant_ligatures]};\n"
end
contents contents
end end
end end