From 58c4a78be1390cb103f945c9d5f85f377f5252a5 Mon Sep 17 00:00:00 2001
From: Baptiste Augrain <daiyam@zokugun.org>
Date: Mon, 14 Dec 2020 19:50:34 +0100
Subject: [PATCH] avoids conflicting styles between inline codes and code
 blocks

---
 browser/lib/markdown.js                | 12 +++++-
 browser/main/lib/ConfigManager.js      |  6 +--
 browser/main/lib/dataApi/formatHTML.js | 54 +++++++++++++-------------
 3 files changed, 41 insertions(+), 31 deletions(-)

diff --git a/browser/lib/markdown.js b/browser/lib/markdown.js
index b7fda847..edb33261 100644
--- a/browser/lib/markdown.js
+++ b/browser/lib/markdown.js
@@ -8,7 +8,7 @@ import markdownItTocAndAnchor from '@hikerpig/markdown-it-toc-and-anchor'
 import _ from 'lodash'
 import ConfigManager from 'browser/main/lib/ConfigManager'
 import katex from 'katex'
-import { lastFindInArray } from './utils'
+import { escapeHtmlCharacters, lastFindInArray } from './utils'
 
 function createGutter(str, firstLineNumber) {
   if (Number.isNaN(firstLineNumber)) firstLineNumber = 1
@@ -479,6 +479,16 @@ class Markdown {
       return true
     })
 
+    this.md.renderer.rules.code_inline = function(tokens, idx) {
+      const token = tokens[idx]
+
+      return (
+        '<code class="inline">' +
+        escapeHtmlCharacters(token.content) +
+        '</code>'
+      )
+    }
+
     if (config.preview.smartArrows) {
       this.md.use(smartArrows)
     }
diff --git a/browser/main/lib/ConfigManager.js b/browser/main/lib/ConfigManager.js
index 4356fd01..d11c71ad 100644
--- a/browser/main/lib/ConfigManager.js
+++ b/browser/main/lib/ConfigManager.js
@@ -18,9 +18,9 @@ const DEFAULT_MARKDOWN_LINT_CONFIG = `{
 
 const DEFAULT_CSS_CONFIG = `
 /* Drop Your Custom CSS Code Here */
-[data-theme="default"] p code,
-[data-theme="default"] li code,
-[data-theme="default"] td code
+[data-theme="default"] p code.inline,
+[data-theme="default"] li code.inline,
+[data-theme="default"] td code.inline
 {
   padding: 2px;
   border-width: 1px;
diff --git a/browser/main/lib/dataApi/formatHTML.js b/browser/main/lib/dataApi/formatHTML.js
index 37c3756c..2b766eec 100644
--- a/browser/main/lib/dataApi/formatHTML.js
+++ b/browser/main/lib/dataApi/formatHTML.js
@@ -638,74 +638,74 @@ code {
   direction: ltr;
 }
 
-p code,
-li code,
-td code
+p code.inline,
+li code.inline,
+td code.inline
 {
   padding: 2px;
   border-width: 1px;
   border-style: solid;
   border-radius: 5px;
 }
-[data-theme="default"] p code,
-[data-theme="default"] li code,
-[data-theme="default"] td code
+[data-theme="default"] p code.inline,
+[data-theme="default"] li code.inline,
+[data-theme="default"] td code.inline
 {
   background-color: #F4F4F4;
   border-color: #d9d9d9;
   color: inherit;
 }
-[data-theme="white"] p code,
-[data-theme="white"] li code,
-[data-theme="white"] td code
+[data-theme="white"] p code.inline,
+[data-theme="white"] li code.inline,
+[data-theme="white"] td code.inline
 {
   background-color: #F4F4F4;
   border-color: #d9d9d9;
   color: inherit;
 }
-[data-theme="dark"] p code,
-[data-theme="dark"] li code,
-[data-theme="dark"] td code
+[data-theme="dark"] p code.inline,
+[data-theme="dark"] li code.inline,
+[data-theme="dark"] td code.inline
 {
   background-color: #444444;
   border-color: #555;
   color: #FFFFFF;
 }
-[data-theme="dracula"] p code,
-[data-theme="dracula"] li code,
-[data-theme="dracula"] td code
+[data-theme="dracula"] p code.inline,
+[data-theme="dracula"] li code.inline,
+[data-theme="dracula"] td code.inline
 {
   background-color: #444444;
   border-color: #555;
   color: #FFFFFF;
 }
-[data-theme="monokai"] p code,
-[data-theme="monokai"] li code,
-[data-theme="monokai"] td code
+[data-theme="monokai"] p code.inline,
+[data-theme="monokai"] li code.inline,
+[data-theme="monokai"] td code.inline
 {
   background-color: #444444;
   border-color: #555;
   color: #FFFFFF;
 }
-[data-theme="nord"] p code,
-[data-theme="nord"] li code,
-[data-theme="nord"] td code
+[data-theme="nord"] p code.inline,
+[data-theme="nord"] li code.inline,
+[data-theme="nord"] td code.inline
 {
   background-color: #444444;
   border-color: #555;
   color: #FFFFFF;
 }
-[data-theme="solarized-dark"] p code,
-[data-theme="solarized-dark"] li code,
-[data-theme="solarized-dark"] td code
+[data-theme="solarized-dark"] p code.inline,
+[data-theme="solarized-dark"] li code.inline,
+[data-theme="solarized-dark"] td code.inline
 {
   background-color: #444444;
   border-color: #555;
   color: #FFFFFF;
 }
-[data-theme="vulcan"] p code,
-[data-theme="vulcan"] li code,
-[data-theme="vulcan"] td code
+[data-theme="vulcan"] p code.inline,
+[data-theme="vulcan"] li code.inline,
+[data-theme="vulcan"] td code.inline
 {
   background-color: #444444;
   border-color: #555;