markdown: Use buffer font instead of UI font for code blocks (#17351)

Mathias and Marshall Bowers created 1 year ago

Related to #15379 (it does not fix the issue for inline code blocks)

#### Before

<img width="905" alt="Screenshot 2024-09-05 at 11 25 50 AM"
src="https://github.com/user-attachments/assets/38ac7b1a-1556-4b69-a74a-b0fca35d598c">

#### After

<img width="871" alt="Screenshot 2024-09-05 at 11 24 33 AM"
src="https://github.com/user-attachments/assets/a70c2624-c000-4b07-9fb2-940adf8e287f">


Release Notes:

- Updated Markdown code blocks to use the buffer font.

---------

Co-authored-by: Marshall Bowers <[e-mail]>

Change summary

Cargo.lock                                       |  1 +
crates/markdown_preview/Cargo.toml               |  1 +
crates/markdown_preview/src/markdown_renderer.rs | 15 +++++++++++++--
3 files changed, 15 insertions(+), 2 deletions(-)

Detailed changes

Cargo.lock

@@ -6678,6 +6678,7 @@ dependencies = [
  "log",
  "pretty_assertions",
  "pulldown-cmark 0.12.1",
+ "settings",
  "theme",
  "ui",
  "workspace",

crates/markdown_preview/Cargo.toml

@@ -25,6 +25,7 @@ linkify.workspace = true
 log.workspace = true
 pretty_assertions.workspace = true
 pulldown-cmark.workspace = true
+settings.workspace = true
 theme.workspace = true
 ui.workspace = true
 workspace.workspace = true

crates/markdown_preview/src/markdown_renderer.rs

@@ -9,11 +9,12 @@ use gpui::{
     HighlightStyle, Hsla, InteractiveText, IntoElement, Keystroke, Modifiers, ParentElement,
     SharedString, Styled, StyledText, TextStyle, WeakView, WindowContext,
 };
+use settings::Settings;
 use std::{
     ops::{Mul, Range},
     sync::Arc,
 };
-use theme::{ActiveTheme, SyntaxTheme};
+use theme::{ActiveTheme, SyntaxTheme, ThemeSettings};
 use ui::{
     h_flex, v_flex, Checkbox, FluentBuilder, InteractiveElement, LinkPreview, Selection,
     StatefulInteractiveElement, Tooltip,
@@ -25,6 +26,8 @@ type CheckboxClickedCallback = Arc<Box<dyn Fn(bool, Range<usize>, &mut WindowCon
 pub struct RenderContext {
     workspace: Option<WeakView<Workspace>>,
     next_id: usize,
+    buffer_font_family: SharedString,
+    buffer_text_style: TextStyle,
     text_style: TextStyle,
     border_color: Hsla,
     text_color: Hsla,
@@ -40,10 +43,17 @@ impl RenderContext {
     pub fn new(workspace: Option<WeakView<Workspace>>, cx: &WindowContext) -> RenderContext {
         let theme = cx.theme().clone();
 
+        let settings = ThemeSettings::get_global(cx);
+        let buffer_font_family = settings.buffer_font.family.clone();
+        let mut buffer_text_style = cx.text_style();
+        buffer_text_style.font_family = buffer_font_family.clone();
+
         RenderContext {
             workspace,
             next_id: 0,
             indent: 0,
+            buffer_font_family,
+            buffer_text_style,
             text_style: cx.text_style(),
             syntax_theme: theme.syntax().clone(),
             border_color: theme.colors().border,
@@ -308,7 +318,7 @@ fn render_markdown_code_block(
 ) -> AnyElement {
     let body = if let Some(highlights) = parsed.highlights.as_ref() {
         StyledText::new(parsed.contents.clone()).with_highlights(
-            &cx.text_style,
+            &cx.buffer_text_style,
             highlights.iter().filter_map(|(range, highlight_id)| {
                 highlight_id
                     .style(cx.syntax_theme.as_ref())
@@ -320,6 +330,7 @@ fn render_markdown_code_block(
     };
 
     cx.with_common_p(div())
+        .font_family(cx.buffer_font_family.clone())
         .px_3()
         .py_3()
         .bg(cx.code_block_background_color)