diff --git a/packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.js b/packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.js
index 1118177f14..de669e0a80 100644
--- a/packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.js
+++ b/packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.js
@@ -25,7 +25,7 @@ function Playground({children, theme, transformCode, ...props}) {
         )}>
         Live Editor
       </div>
-      <LiveEditor />
+      <LiveEditor className={styles.playgroundEditor} />
       <div
         className={classnames(
           styles.playgroundHeader,
diff --git a/packages/docusaurus-theme-live-codeblock/src/theme/Playground/styles.module.css b/packages/docusaurus-theme-live-codeblock/src/theme/Playground/styles.module.css
index 36a521621a..41a73324dc 100644
--- a/packages/docusaurus-theme-live-codeblock/src/theme/Playground/styles.module.css
+++ b/packages/docusaurus-theme-live-codeblock/src/theme/Playground/styles.module.css
@@ -22,6 +22,10 @@
   color: var(--ifm-color-content);
 }
 
+.playgroundEditor {
+  font-family: var(--ifm-font-family-monospace) !important;
+}
+
 .playgroundPreview {
   border: 1px solid var(--ifm-color-emphasis-200);
   border-bottom-left-radius: var(--ifm-global-radius);