diff --git a/erpnext/utilities/page/markdown_reference/markdown_reference.html b/erpnext/utilities/page/markdown_reference/markdown_reference.html
index 5af414f275f..cdf646cad3c 100644
--- a/erpnext/utilities/page/markdown_reference/markdown_reference.html
+++ b/erpnext/utilities/page/markdown_reference/markdown_reference.html
@@ -6,7 +6,7 @@
 		</div>
 	</div>
 	<div class="layout-main">
-		<div style="width: 60%">
+		<div style="width: 60%" class="markdown">
 <h3>Phrase Emphasis</h3>
 <pre><code>*italic*   **bold**
 _italic_   __bold__
diff --git a/public/css/all-app.css b/public/css/all-app.css
index f120a8bd73e..19b550c7070 100644
--- a/public/css/all-app.css
+++ b/public/css/all-app.css
@@ -1969,7 +1969,7 @@ span, div, td, input, textarea, button, select {
 }
 
 
-pre {
+.markdwon pre {
     background-color: #F5F5F5;
     border: 1px solid rgba(0, 0, 0, 0.15);
     border-radius: 4px 4px 4px 4px;
@@ -1982,7 +1982,7 @@ pre {
     word-wrap: break-word;
 }
 
-code, pre {
+.markdown code, .markdown pre {
     border-radius: 3px 3px 3px 3px;
     color: #333333;
     font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
diff --git a/public/css/all-web.css b/public/css/all-web.css
index b27a7dac47e..8673c1f1f6c 100644
--- a/public/css/all-web.css
+++ b/public/css/all-web.css
@@ -1830,7 +1830,7 @@ span, div, td, input, textarea, button, select {
 }
 
 
-pre {
+.markdwon pre {
     background-color: #F5F5F5;
     border: 1px solid rgba(0, 0, 0, 0.15);
     border-radius: 4px 4px 4px 4px;
@@ -1843,7 +1843,7 @@ pre {
     word-wrap: break-word;
 }
 
-code, pre {
+.markdown code, .markdown pre {
     border-radius: 3px 3px 3px 3px;
     color: #333333;
     font-family: Menlo,Monaco,Consolas,"Courier New",monospace;