Markdown: Enable wrapping in code blocks and a color tweak (#13894)

- Enable wrapping of long lines in code blocks like already done in code
  view.
- Slightly lighten the background of code blocks on default theme
- Darken the background on inline code and kbd elements on arc-green

Co-authored-by: 6543 <6543@obermui.de>

diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index 0e555daf9f1fd2fc561796e70df0a8191ab72fa6..be43bfbe36fb7b909a92e3fa50af258cae2df15a 100644 (file)
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -96,7 +96,7 @@
   --color-menu: #ffffff;
   --color-card: #ffffff;
   --color-markdown-table-row: #00000008;
-  --color-markdown-code-block: #00000010;
+  --color-markdown-code-block: #00000008;
   --color-button: #ffffff;
   --color-code-bg: #ffffff;
   --color-shadow: #00000024;

diff --git a/web_src/less/_markdown.less b/web_src/less/_markdown.less
index 2261733503332ed29b7226eb09b3639e835df0c3..4c8ed77cb8c0f59cea7dd123aa134249ae98cdbe 100644 (file)
--- a/web_src/less/_markdown.less
+++ b/web_src/less/_markdown.less
@@ -343,7 +343,7 @@
     padding: .2em .3em;
     margin: 0;
     font-size: 85%;
-    background-color: var(--color-label);
+    background-color: var(--color-markdown-code-block);
     border-radius: 3px;
   }
 
@@ -360,8 +360,9 @@
     padding: 0;
     margin: 0;
     font-size: 100%;
-    word-break: normal;
-    white-space: pre;
+    white-space: pre-wrap;
+    word-break: break-all;
+    overflow-wrap: break-word;
     background: transparent;
     border: 0;
   }
@@ -373,7 +374,6 @@
   .highlight pre,
   pre {
     padding: 16px;
-    overflow: auto;
     font-size: 85%;
     line-height: 1.45;
     background-color: var(--color-markdown-code-block);
@@ -416,7 +416,7 @@
     line-height: 10px;
     color: var(--color-text-light);
     vertical-align: middle;
-    background-color: var(--color-label);
+    background-color: var(--color-markdown-code-block);
     border: 1px solid var(--color-secondary);
     border-radius: 3px;
     box-shadow: inset 0 -1px 0 var(--color-secondary);