From f9e54bcbfc9f2108eb081643c983b2d990d50781 Mon Sep 17 00:00:00 2001
From: Arcturus <arcturus98@outlook.com>
Date: Fri, 14 Feb 2020 21:44:46 +0000
Subject: [PATCH] add styling for code

---
 browser/components/MarkdownPreview.js | 83 +++++++++++++++++++++++++
 browser/main/lib/ConfigManager.js     | 88 ++++++++++++++++++++++++++-
 2 files changed, 168 insertions(+), 3 deletions(-)

diff --git a/browser/components/MarkdownPreview.js b/browser/components/MarkdownPreview.js
index d75d8f6f..0ff6a1e8 100755
--- a/browser/components/MarkdownPreview.js
+++ b/browser/components/MarkdownPreview.js
@@ -130,6 +130,89 @@ code {
   text-align: left;
   direction: ltr;
 }
+[data-theme="default"] p code,
+[data-theme="default"] li code{
+  padding: 2px;
+  background-color: #F4F4F4;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #d9d9d9;
+  border-radius: 5px;
+  color: #03C588;
+}
+[data-theme="white"] p code,
+[data-theme="white"] li code{
+  padding: 2px;
+  background-color: #F4F4F4;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #03C588;
+  border-radius: 5px;
+  color: #03C588;
+}
+[data-theme="dark"] p code,
+[data-theme="dark"] li code{
+  padding: 2px;
+  background-color: #444444;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #555;
+  border-radius: 5px;
+  color: #FFFFFF;
+}
+[data-theme="dracula"] p code,
+[data-theme="dracula"] li code{
+  padding: 2px;
+  background-color: #282a36;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #bd93f9;
+  border-radius: 5px;
+  color: #bd93f9;
+}
+[data-theme="monokai"] p code,
+[data-theme="monokai"] li code{
+  padding: 2px;
+  background-color: #272822;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #f92672;
+  border-radius: 5px;
+  color: #f92672;
+}
+[data-theme="nord"] p code,
+[data-theme="nord"] li code{
+  padding: 2px;
+  background-color: #2e3440;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #5e81ac;
+  border-radius: 5px;
+  color: #5e81ac;
+}
+[data-theme="solarized-dark"] p code,
+[data-theme="solarized-dark"] li code{
+  padding: 2px;
+  background-color: #073642;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #36abe3;
+  border-radius: 5px;
+  color: #36abe3;
+}
+[data-theme="vulcan"] p code,
+[data-theme="vulcan"] li code{
+  padding: 2px;
+  background-color: #161719;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #ffffff;
+  border-radius: 5px;
+  color: #ffffff;
+}
+
+
+
 .lineNumber {
   ${lineNumber && 'display: block !important;'}
   font-family: '${codeBlockFontFamily.join("','")}';
diff --git a/browser/main/lib/ConfigManager.js b/browser/main/lib/ConfigManager.js
index 8516a7fc..68fbc341 100644
--- a/browser/main/lib/ConfigManager.js
+++ b/browser/main/lib/ConfigManager.js
@@ -16,6 +16,89 @@ const DEFAULT_MARKDOWN_LINT_CONFIG = `{
   "default": true
 }`
 
+const DEFAULT_CSS_CONFIG = `
+/* Drop Your Custom CSS Code Here */
+[data-theme="default"] p code,
+[data-theme="default"] li code{
+  padding: 2px;
+  background-color: #F4F4F4;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #d9d9d9;
+  border-radius: 5px;
+  color: #03C588;
+}
+[data-theme="white"] p code,
+[data-theme="white"] li code{
+  padding: 2px;
+  background-color: #F4F4F4;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #03C588;
+  border-radius: 5px;
+  color: #03C588;
+}
+[data-theme="dark"] p code,
+[data-theme="dark"] li code{
+  padding: 2px;
+  background-color: #444444;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #555;
+  border-radius: 5px;
+  color: #FFFFFF;
+}
+[data-theme="dracula"] p code,
+[data-theme="dracula"] li code{
+  padding: 2px;
+  background-color: #282a36;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #bd93f9;
+  border-radius: 5px;
+  color: #bd93f9;
+}
+[data-theme="monokai"] p code,
+[data-theme="monokai"] li code{
+  padding: 2px;
+  background-color: #272822;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #f92672;
+  border-radius: 5px;
+  color: #f92672;
+}
+[data-theme="nord"] p code,
+[data-theme="nord"] li code{
+  padding: 2px;
+  background-color: #2e3440;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #5e81ac;
+  border-radius: 5px;
+  color: #5e81ac;
+}
+[data-theme="solarized-dark"] p code,
+[data-theme="solarized-dark"] li code{
+  padding: 2px;
+  background-color: #073642;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #36abe3;
+  border-radius: 5px;
+  color: #36abe3;
+}
+[data-theme="vulcan"] p code,
+[data-theme="vulcan"] li code{
+  padding: 2px;
+  background-color: #161719;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #ffffff;
+  border-radius: 5px;
+  color: #ffffff;
+}`
+
 export const DEFAULT_CONFIG = {
   zoom: 1,
   isSideNavFolded: false,
@@ -83,7 +166,7 @@ export const DEFAULT_CONFIG = {
     enableSmartPaste: false,
     enableMarkdownLint: false,
     customMarkdownLintConfig: DEFAULT_MARKDOWN_LINT_CONFIG,
-    prettierConfig: ` {
+    prettierConfig: `{
       "trailingComma": "es5",
       "tabWidth": 2,
       "semi": false,
@@ -108,8 +191,7 @@ export const DEFAULT_CONFIG = {
     breaks: true,
     smartArrows: false,
     allowCustomCSS: false,
-
-    customCSS: '/* Drop Your Custom CSS Code Here */',
+    customCSS: DEFAULT_CSS_CONFIG,
     sanitize: 'STRICT', // 'STRICT', 'ALLOW_STYLES', 'NONE'
     mermaidHTMLLabel: false,
     lineThroughCheckbox: true