diff --git a/src/resources/themes/v_detorte/v_detorte.css b/src/resources/themes/v_detorte/v_detorte.css
index 2ef0a337..af2290f7 100644
--- a/src/resources/themes/v_detorte/v_detorte.css
+++ b/src/resources/themes/v_detorte/v_detorte.css
@@ -90,6 +90,9 @@ pre {
     display: block;
     overflow-y: hidden;
     overflow-x: auto;
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
 }
 
 code {
@@ -108,6 +111,9 @@ pre code {
     line-height: 1.5;
     font-family: Consolas, Monaco, Monospace, Courier;
     white-space: pre;
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
 }
 
 pre code.markdown-metadata {
@@ -337,6 +343,6 @@ table.hljs-ln tr td.hljs-ln-code {
 }
 
 ::selection {
-  background: #1976D2;
+  background: #8CBAE8;
   color: #DADADA;
 }
diff --git a/src/resources/themes/v_detorte/v_detorte.palette b/src/resources/themes/v_detorte/v_detorte.palette
index 7183c501..e9331af9 100644
--- a/src/resources/themes/v_detorte/v_detorte.palette
+++ b/src/resources/themes/v_detorte/v_detorte.palette
@@ -9,7 +9,7 @@ mdhl_file=v_detorte.mdhl
 css_file=v_detorte.css
 codeblock_css_file=v_detorte_codeblock.css
 mermaid_css_file=v_detorte_mermaid.css
-version=13
+version=14
 
 ; This mapping will be used to translate colors when the content of HTML is copied
 ; without background. You could just specify the foreground colors mapping here.
diff --git a/src/resources/themes/v_moonlight/v_moonlight.css b/src/resources/themes/v_moonlight/v_moonlight.css
index 8fb4f0a7..7908f727 100644
--- a/src/resources/themes/v_moonlight/v_moonlight.css
+++ b/src/resources/themes/v_moonlight/v_moonlight.css
@@ -90,6 +90,9 @@ pre {
     display: block;
     overflow-y: hidden;
     overflow-x: auto;
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
 }
 
 code {
@@ -107,6 +110,9 @@ pre code {
     line-height: 1.5;
     font-family: Consolas, Monaco, Monospace, Courier;
     white-space: pre;
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
 }
 
 pre code.markdown-metadata {
@@ -335,6 +341,6 @@ table.hljs-ln tr td.hljs-ln-code {
 }
 
 ::selection {
-  background: #1976D2;
-  color: #BCBCBC;
+  background: #8CBAE8;
+  color: #D0D0D0;
 }
diff --git a/src/resources/themes/v_moonlight/v_moonlight.palette b/src/resources/themes/v_moonlight/v_moonlight.palette
index 30d9a542..2287c957 100644
--- a/src/resources/themes/v_moonlight/v_moonlight.palette
+++ b/src/resources/themes/v_moonlight/v_moonlight.palette
@@ -7,7 +7,7 @@ mdhl_file=v_moonlight.mdhl
 css_file=v_moonlight.css
 codeblock_css_file=v_moonlight_codeblock.css
 mermaid_css_file=v_moonlight_mermaid.css
-version=24
+version=25
 
 ; This mapping will be used to translate colors when the content of HTML is copied
 ; without background. You could just specify the foreground colors mapping here.
diff --git a/src/resources/themes/v_native/v_native.css b/src/resources/themes/v_native/v_native.css
index 81e5be68..adc9f118 100644
--- a/src/resources/themes/v_native/v_native.css
+++ b/src/resources/themes/v_native/v_native.css
@@ -85,6 +85,9 @@ pre {
     display: block;
     overflow-y: hidden;
     overflow-x: auto;
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
 }
 
 code {
@@ -102,6 +105,9 @@ pre code {
     line-height: 1.5;
     font-family: Consolas, Monaco, Monospace, Courier;
     white-space: pre;
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
 }
 
 pre code.markdown-metadata {
diff --git a/src/resources/themes/v_native/v_native.palette b/src/resources/themes/v_native/v_native.palette
index 2c4b86c8..aed7551e 100644
--- a/src/resources/themes/v_native/v_native.palette
+++ b/src/resources/themes/v_native/v_native.palette
@@ -7,7 +7,7 @@ mdhl_file=v_native.mdhl
 css_file=v_native.css
 codeblock_css_file=v_native_codeblock.css
 mermaid_css_file=v_native_mermaid.css
-version=22
+version=23
 
 [phony]
 ; Abstract color attributes.
diff --git a/src/resources/themes/v_pure/v_pure.css b/src/resources/themes/v_pure/v_pure.css
index fbcae58d..267fec12 100644
--- a/src/resources/themes/v_pure/v_pure.css
+++ b/src/resources/themes/v_pure/v_pure.css
@@ -86,6 +86,9 @@ pre {
     display: block;
     overflow-y: hidden;
     overflow-x: auto;
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
 }
 
 code {
@@ -104,6 +107,9 @@ pre code {
     line-height: 1.5;
     font-family: Consolas, Monaco, Monospace, Courier;
     white-space: pre;
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
 }
 
 pre code.markdown-metadata {
diff --git a/src/resources/themes/v_pure/v_pure.palette b/src/resources/themes/v_pure/v_pure.palette
index c81a8611..b44a5d87 100644
--- a/src/resources/themes/v_pure/v_pure.palette
+++ b/src/resources/themes/v_pure/v_pure.palette
@@ -7,7 +7,7 @@ mdhl_file=v_pure.mdhl
 css_file=v_pure.css
 codeblock_css_file=v_pure_codeblock.css
 mermaid_css_file=v_pure_mermaid.css
-version=24
+version=25
 
 [phony]
 ; Abstract color attributes.
diff --git a/src/veditor.cpp b/src/veditor.cpp
index c91c217c..afdc1854 100644
--- a/src/veditor.cpp
+++ b/src/veditor.cpp
@@ -10,6 +10,7 @@
 #include "dialog/vinsertlinkdialog.h"
 #include "utils/vmetawordmanager.h"
 #include "utils/vvim.h"
+#include "vnote.h"
 
 extern VConfigManager *g_config;
 
@@ -217,7 +218,10 @@ void VEditor::doUpdateTrailingSpaceAndTabHighlights()
 
 void VEditor::updateEditConfig()
 {
-    m_config.update(QFontMetrics(m_editor->font()));
+    // FIXME: we need to use font of the code block here.
+    QFont font(m_editor->font());
+    font.setFamily(VNote::getMonospaceFont());
+    m_config.update(QFontMetrics(font));
 
     if (m_config.m_tabStopWidth > 0) {
         setTabStopWidthW(m_config.m_tabStopWidth);
diff --git a/src/vnote.cpp b/src/vnote.cpp
index cea92b4d..66527dc3 100644
--- a/src/vnote.cpp
+++ b/src/vnote.cpp
@@ -222,7 +222,7 @@ QString VNote::getNavigationLabelStyle(const QString &p_str, bool p_small) const
     static int pxHeight = 24;
     const int fontPt = p_small ? 12 : 15;
 
-    QString fontFamily = getMonospacedFont();
+    QString fontFamily = getMonospaceFont();
 
     if (p_str.size() != lastLen) {
         QFont font(fontFamily, fontPt);
@@ -261,7 +261,7 @@ QString VNote::getNavigationLabelStyle(const QString &p_str, bool p_small) const
     return style;
 }
 
-const QString &VNote::getMonospacedFont() const
+const QString &VNote::getMonospaceFont()
 {
     static QString font;
     if (font.isNull()) {
diff --git a/src/vnote.h b/src/vnote.h
index 2dfaf239..beb3e2c5 100644
--- a/src/vnote.h
+++ b/src/vnote.h
@@ -120,14 +120,14 @@ public:
 
     static QString generateMathJaxPreviewTemplate();
 
+    static const QString &getMonospaceFont();
+
 public slots:
     void updateTemplate();
 
     void updateSimpletHtmlTemplate();
 
 private:
-    const QString &getMonospacedFont() const;
-
     // Given the path of an external file, create a VOrphanFile struct.
     VOrphanFile *getOrphanFile(const QString &p_path,
                                bool p_modifiable,