From a4cb72bbee80ee62fe04c4a8cd20a4609b5a89be Mon Sep 17 00:00:00 2001
From: Samuel Fang <samuelfangjw@gmail.com>
Date: Wed, 28 Jul 2021 13:07:03 +0800
Subject: [PATCH 1/2] Fix output not appearing in snippets which are not
 evaluated

---
 src/features/sicp/parser/ParseJson.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/features/sicp/parser/ParseJson.tsx b/src/features/sicp/parser/ParseJson.tsx
index 57e0fdf438..ce85ebc7ff 100644
--- a/src/features/sicp/parser/ParseJson.tsx
+++ b/src/features/sicp/parser/ParseJson.tsx
@@ -123,7 +123,12 @@ const handleSnippet = (obj: JsonType) => {
   if (obj['latex']) {
     return <Pre>{handleLatex(obj['body']!)}</Pre>;
   } else if (typeof obj['eval'] === 'boolean' && !obj['eval']) {
-    return <Pre>{obj['body']}</Pre>;
+    return (
+      <>
+        {obj['body'] && <Pre>{obj['body']}</Pre>}
+        {obj['output'] && <Pre>{obj['output']}</Pre>}
+      </>
+    );
   } else {
     if (!obj['body']) {
       return;

From d824f99a43b74fd386ff11d55ad6c3a3c43acbbc Mon Sep 17 00:00:00 2001
From: Samuel Fang <samuelfangjw@gmail.com>
Date: Wed, 28 Jul 2021 13:43:31 +0800
Subject: [PATCH 2/2] Italicise output snippets

---
 src/features/sicp/parser/ParseJson.tsx                    | 6 +++++-
 src/pages/sicp/subcomponents/CodeSnippet.tsx              | 6 +++++-
 .../__tests__/__snapshots__/CodeSnippet.tsx.snap          | 8 ++++++--
 src/styles/_sicp.scss                                     | 6 +++---
 4 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/features/sicp/parser/ParseJson.tsx b/src/features/sicp/parser/ParseJson.tsx
index ce85ebc7ff..fe373987f9 100644
--- a/src/features/sicp/parser/ParseJson.tsx
+++ b/src/features/sicp/parser/ParseJson.tsx
@@ -126,7 +126,11 @@ const handleSnippet = (obj: JsonType) => {
     return (
       <>
         {obj['body'] && <Pre>{obj['body']}</Pre>}
-        {obj['output'] && <Pre>{obj['output']}</Pre>}
+        {obj['output'] && (
+          <Pre>
+            <em>{obj['output']}</em>
+          </Pre>
+        )}
       </>
     );
   } else {
diff --git a/src/pages/sicp/subcomponents/CodeSnippet.tsx b/src/pages/sicp/subcomponents/CodeSnippet.tsx
index de871d9c38..f149f88cbd 100644
--- a/src/pages/sicp/subcomponents/CodeSnippet.tsx
+++ b/src/pages/sicp/subcomponents/CodeSnippet.tsx
@@ -101,7 +101,11 @@ const CodeSnippet: React.FC<CodeSnippetProps> = props => {
           </SyntaxHighlighter>
         </Card>
       )}
-      {output && <Pre>{output}</Pre>}
+      {output && (
+        <Pre>
+          <em>{output}</em>
+        </Pre>
+      )}
     </div>
   );
 };
diff --git a/src/pages/sicp/subcomponents/__tests__/__snapshots__/CodeSnippet.tsx.snap b/src/pages/sicp/subcomponents/__tests__/__snapshots__/CodeSnippet.tsx.snap
index eb7240091b..0b5e784418 100644
--- a/src/pages/sicp/subcomponents/__tests__/__snapshots__/CodeSnippet.tsx.snap
+++ b/src/pages/sicp/subcomponents/__tests__/__snapshots__/CodeSnippet.tsx.snap
@@ -9,7 +9,9 @@ exports[`Sicp Code Snippet renders correctly with prepend 1`] = `
     </SyntaxHighlighter>
   </Blueprint3.Card>
   <Component>
-    2
+    <em>
+      2
+    </em>
   </Component>
 </div>"
 `;
@@ -23,7 +25,9 @@ exports[`Sicp Code Snippet renders correctly without prepend 1`] = `
     </SyntaxHighlighter>
   </Blueprint3.Card>
   <Component>
-    2
+    <em>
+      2
+    </em>
   </Component>
 </div>"
 `;
diff --git a/src/styles/_sicp.scss b/src/styles/_sicp.scss
index 6e46f4cd0c..3a32a64ccc 100644
--- a/src/styles/_sicp.scss
+++ b/src/styles/_sicp.scss
@@ -42,9 +42,9 @@ $sicp-content-lr-padding: 6em;
   }
 
   .bp3-code-block {
-    font-size: 15pt;
-    padding: 0 15px;
-    margin: 0;
+    font-size: 14pt;
+    padding: 0;
+    margin: 10px 0;
     box-shadow: none;
     color: $sicp-text-color;
     background-color: inherit;