From 95ea8700397ee767e1d98c448e76ddfdce6067df Mon Sep 17 00:00:00 2001
From: Amit Haridas <amit.wh@gmail.com>
Date: Sun, 15 Mar 2026 08:39:53 +0530
Subject: [PATCH] feat: apply JetBrains Mono font to editor and preview code

- Add custom EditorView.theme for CodeMirror 6 with JetBrains Mono
- Update .editor-textarea and #editor font-family to prioritize JetBrains Mono
- Update preview code blocks (#preview code, .preview-content code) to use JetBrains Mono
- Ensures consistent monospace font across editor source and markdown rendering

Amit Haridas
---
 src/editor/codemirror-setup.js | 14 ++++++++++++++
 src/styles.css                 |  6 +++---
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/editor/codemirror-setup.js b/src/editor/codemirror-setup.js
index 8e25508..ff5214b 100644
--- a/src/editor/codemirror-setup.js
+++ b/src/editor/codemirror-setup.js
@@ -33,6 +33,19 @@ const {
 } = require('@codemirror/language');
 const { oneDark } = require('@codemirror/theme-one-dark');
 
+// Custom theme for JetBrains Mono font
+const jetBrainsMonoTheme = EditorView.theme({
+  '&': {
+    fontFamily: "'JetBrains Mono', 'Fira Code', 'SF Mono', Monaco, 'Courier New', monospace"
+  },
+  '.cm-content': {
+    fontFamily: 'inherit'
+  },
+  '.cm-scroller': {
+    fontFamily: 'inherit'
+  }
+});
+
 /**
  * Create a CodeMirror 6 editor instance.
  *
@@ -64,6 +77,7 @@ function createEditor(parentElement, options = {}) {
     highlightSelectionMatches(),
     autocompletion(),
     foldGutter(),
+    jetBrainsMonoTheme,
     keymap.of([
       ...defaultKeymap,
       ...historyKeymap,
diff --git a/src/styles.css b/src/styles.css
index 120d286..ba2b24a 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -209,7 +209,7 @@ body {
     width: 100%;
     height: 100%;
     padding: 20px;
-    font-family: 'SF Mono', Monaco, 'Courier New', monospace;
+    font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Monaco, 'Courier New', monospace;
     font-size: 15px;
     line-height: 1.6;
     border: none;
@@ -253,7 +253,7 @@ body {
     width: 100%;
     height: 100%;
     padding: 20px;
-    font-family: 'SF Mono', Monaco, 'Courier New', monospace;
+    font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Monaco, 'Courier New', monospace;
     font-size: 15px;
     line-height: 1.6;
     border: none;
@@ -533,7 +533,7 @@ body[class*="dark"] .bottom-panel-title { color: #ccc; }
     background-color: #f6f8fa;
     border: 1px solid #d0d7de;
     border-radius: 6px;
-    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+    font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
     color: #24292f;
 }