From 355432c021a55ad232c2027e0841c101e4575a75 Mon Sep 17 00:00:00 2001
From: ElianHugh <elianhte@gmail.com>
Date: Fri, 17 Mar 2023 22:48:13 +1100
Subject: [PATCH 1/3] preview: font-size

---
 package.json             |  5 +++++
 src/rmarkdown/preview.ts | 19 +++++++++++++++++++
 2 files changed, 24 insertions(+)

diff --git a/package.json b/package.json
index b0689ca95..c52d1bed2 100644
--- a/package.json
+++ b/package.json
@@ -1544,6 +1544,11 @@
           "default": true,
           "markdownDescription": "Enable automatic refresh of R Markdown preview on file update."
         },
+        "r.rmarkdown.preview.fontSize": {
+          "type": "number",
+          "default": 12,
+          "description": "Controls the font size in pixels used in the R Markdown preview."
+        },
         "r.rmarkdown.knit.useBackgroundProcess": {
           "type": "boolean",
           "default": true,
diff --git a/src/rmarkdown/preview.ts b/src/rmarkdown/preview.ts
index eb5efb79b..ed1bc862d 100644
--- a/src/rmarkdown/preview.ts
+++ b/src/rmarkdown/preview.ts
@@ -89,6 +89,8 @@ class RMarkdownPreview extends vscode.Disposable {
 
         // make the output chunks a little lighter to stand out
         let chunkCol = String(config().get('rmarkdown.chunkBackgroundColor'));
+        const fontSize = config().get<number>('rmarkdown.preview.fontSize', 14);
+
         let outCol: string;
         if (chunkCol) {
             const colReg = /[0-9.]+/g;
@@ -108,7 +110,24 @@ class RMarkdownPreview extends vscode.Disposable {
             body {
                 color: var(--vscode-editor-foreground);
                 background: var(--vscode-editor-background);
+                font-size: ${fontSize}px;
+            }
+            h1, .h1 {
+                font-size: ${fontSize + 20}px;
+            }
+            h2, .h2 {
+                font-size: ${fontSize + 16}px;
+            }
+            h3, .h3 {
+                font-size: ${fontSize + 10}px;
             }
+            h4, .h4 {
+                font-size: ${fontSize + 4}px;
+            }
+            h5, .h5 {
+                font-size: ${fontSize + 2}px;
+            }
+
             .hljs {
                 color: var(--vscode-editor-foreground);
             }

From ff5e751d17e2c2c9aec7fd011cea8765701c4fbe Mon Sep 17 00:00:00 2001
From: ElianHugh <elianhte@gmail.com>
Date: Sat, 18 Mar 2023 00:09:38 +1100
Subject: [PATCH 2/3] fallback size

---
 package.json             |  6 +++---
 src/rmarkdown/preview.ts | 18 +++++++++++-------
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index c52d1bed2..e54675f0f 100644
--- a/package.json
+++ b/package.json
@@ -1545,9 +1545,9 @@
           "markdownDescription": "Enable automatic refresh of R Markdown preview on file update."
         },
         "r.rmarkdown.preview.fontSize": {
-          "type": "number",
-          "default": 12,
-          "description": "Controls the font size in pixels used in the R Markdown preview."
+          "type": "string",
+          "default": "",
+          "markdownDescription": "Controls the font size in pixels used in the R Markdown preview. When unspecified, `#markdown.preview.fontSize#` is used."
         },
         "r.rmarkdown.knit.useBackgroundProcess": {
           "type": "boolean",
diff --git a/src/rmarkdown/preview.ts b/src/rmarkdown/preview.ts
index ed1bc862d..7476f91eb 100644
--- a/src/rmarkdown/preview.ts
+++ b/src/rmarkdown/preview.ts
@@ -89,7 +89,9 @@ class RMarkdownPreview extends vscode.Disposable {
 
         // make the output chunks a little lighter to stand out
         let chunkCol = String(config().get('rmarkdown.chunkBackgroundColor'));
-        const fontSize = config().get<number>('rmarkdown.preview.fontSize', 14);
+        const fallbackSize = vscode.workspace.getConfiguration('markdown').get<number>('preview.fontSize', 14);
+        let fontSize = Number(config().get<string>('rmarkdown.preview.fontSize'));
+        fontSize = fontSize > 0 ? fontSize : fallbackSize;
 
         let outCol: string;
         if (chunkCol) {
@@ -107,25 +109,27 @@ class RMarkdownPreview extends vscode.Disposable {
 
         const style =
             `<style>
+            * {
+                font-size: ${fontSize}px !important;
+            }
             body {
                 color: var(--vscode-editor-foreground);
                 background: var(--vscode-editor-background);
-                font-size: ${fontSize}px;
             }
             h1, .h1 {
-                font-size: ${fontSize + 20}px;
+                font-size: ${fontSize + 20}px !important;
             }
             h2, .h2 {
-                font-size: ${fontSize + 16}px;
+                font-size: ${fontSize + 16}px !important;
             }
             h3, .h3 {
-                font-size: ${fontSize + 10}px;
+                font-size: ${fontSize + 10}px !important;
             }
             h4, .h4 {
-                font-size: ${fontSize + 4}px;
+                font-size: ${fontSize + 4}px !important;
             }
             h5, .h5 {
-                font-size: ${fontSize + 2}px;
+                font-size: ${fontSize + 2}px !important;
             }
 
             .hljs {

From 83f1a72fce53c1dcab3f7840b3e39f39a7191fee Mon Sep 17 00:00:00 2001
From: Kun Ren <renkun@outlook.com>
Date: Thu, 27 Apr 2023 08:53:37 +0800
Subject: [PATCH 3/3] Use zoom instead of fontSize (#1348)

---
 package.json             |  8 ++++----
 src/rmarkdown/preview.ts | 25 +++----------------------
 2 files changed, 7 insertions(+), 26 deletions(-)

diff --git a/package.json b/package.json
index e54675f0f..ae19724df 100644
--- a/package.json
+++ b/package.json
@@ -1544,10 +1544,10 @@
           "default": true,
           "markdownDescription": "Enable automatic refresh of R Markdown preview on file update."
         },
-        "r.rmarkdown.preview.fontSize": {
-          "type": "string",
-          "default": "",
-          "markdownDescription": "Controls the font size in pixels used in the R Markdown preview. When unspecified, `#markdown.preview.fontSize#` is used."
+        "r.rmarkdown.preview.zoom": {
+          "type": "number",
+          "default": 1,
+          "markdownDescription": "Controls the zoom of the R Markdown preview."
         },
         "r.rmarkdown.knit.useBackgroundProcess": {
           "type": "boolean",
diff --git a/src/rmarkdown/preview.ts b/src/rmarkdown/preview.ts
index 7476f91eb..b9d5984d6 100644
--- a/src/rmarkdown/preview.ts
+++ b/src/rmarkdown/preview.ts
@@ -87,11 +87,10 @@ class RMarkdownPreview extends vscode.Disposable {
         const $ = cheerio.load(content);
         this.htmlLightContent = $.html();
 
+        const zoom = config().get<number>('rmarkdown.preview.zoom', 1);
+
         // make the output chunks a little lighter to stand out
         let chunkCol = String(config().get('rmarkdown.chunkBackgroundColor'));
-        const fallbackSize = vscode.workspace.getConfiguration('markdown').get<number>('preview.fontSize', 14);
-        let fontSize = Number(config().get<string>('rmarkdown.preview.fontSize'));
-        fontSize = fontSize > 0 ? fontSize : fallbackSize;
 
         let outCol: string;
         if (chunkCol) {
@@ -109,29 +108,11 @@ class RMarkdownPreview extends vscode.Disposable {
 
         const style =
             `<style>
-            * {
-                font-size: ${fontSize}px !important;
-            }
             body {
+                zoom: ${zoom};
                 color: var(--vscode-editor-foreground);
                 background: var(--vscode-editor-background);
             }
-            h1, .h1 {
-                font-size: ${fontSize + 20}px !important;
-            }
-            h2, .h2 {
-                font-size: ${fontSize + 16}px !important;
-            }
-            h3, .h3 {
-                font-size: ${fontSize + 10}px !important;
-            }
-            h4, .h4 {
-                font-size: ${fontSize + 4}px !important;
-            }
-            h5, .h5 {
-                font-size: ${fontSize + 2}px !important;
-            }
-
             .hljs {
                 color: var(--vscode-editor-foreground);
             }