From 6d162d115a4600b6f5dbfaed54409c5a3798d5e1 Mon Sep 17 00:00:00 2001
From: David Mzareulyan <david@hiero.ru>
Date: Sun, 14 Jul 2024 22:48:12 +0300
Subject: [PATCH] Add/fix some styles of the code blocks

---
 src/components/code-block.jsx                 | 11 ++++---
 src/components/code-block.module.scss         |  3 +-
 src/components/linkify-elements.jsx           |  8 +++--
 styles/shared/post.scss                       |  9 +++++
 .../__snapshots__/piece-of-text.test.jsx.snap | 33 +++++++++++++------
 test/unit/components/piece-of-text.jsx        | 11 ++++---
 6 files changed, 54 insertions(+), 21 deletions(-)

diff --git a/src/components/code-block.jsx b/src/components/code-block.jsx
index 4e5c72cd9..bc28b3e1b 100644
--- a/src/components/code-block.jsx
+++ b/src/components/code-block.jsx
@@ -6,17 +6,20 @@ import styles from './code-block.module.scss';
 export default function CodeBlock({ text, className = '' }) {
   const clsName = cn(styles.codeBlock, className);
 
+  const [, start, body, end] = /^([^\n]+)(.*?)([^\n]+)$/s.exec(text);
+
   return (
     <>
       <span className="p-break">
         <br /> <br />
       </span>
       <pre className={clsName}>
-        <code>{text}</code>
+        <code>
+          <span className="code--backticks">{start}</span>
+          {body}
+          <span className="code--backticks">{end}</span>
+        </code>
       </pre>
-      <span className="p-break">
-        <br /> <br />
-      </span>
     </>
   );
 }
diff --git a/src/components/code-block.module.scss b/src/components/code-block.module.scss
index 9fd2e3672..cb8b29986 100644
--- a/src/components/code-block.module.scss
+++ b/src/components/code-block.module.scss
@@ -1,13 +1,14 @@
 .codeBlock {
   display: inline;
   padding: unset;
-  font-size: 90%;
   word-break: auto-phrase;
   white-space: pre-wrap;
   background-color: transparent;
   border: none;
   position: relative;
   margin: unset;
+  color: inherit;
+  font-size: 100%; // Compensate the Bootstrap font size
 
   :global(.dark-theme) & code {
     background-color: unset;
diff --git a/src/components/linkify-elements.jsx b/src/components/linkify-elements.jsx
index 5313e268e..96dedecde 100644
--- a/src/components/linkify-elements.jsx
+++ b/src/components/linkify-elements.jsx
@@ -140,12 +140,16 @@ export function tokenToElement(token, key, params) {
     case INITIAL_CHECKBOX:
       return <InitialCheckbox key={key} checked={isChecked(token.text)} />;
 
-    case CODE_INLINE:
+    case CODE_INLINE: {
+      const [, start, text, end] = /^(`+)(.*)(\1)$/.exec(token.text);
       return (
         <code key={key} className="inline-code">
-          {token.text}
+          <span className="code--backticks">{start}</span>
+          {text}
+          <span className="code--backticks">{end}</span>
         </code>
       );
+    }
 
     case CODE_BLOCK:
       return <CodeBlock key={key} text={token.text} />;
diff --git a/styles/shared/post.scss b/styles/shared/post.scss
index 3c08bd02e..ba28d40d9 100644
--- a/styles/shared/post.scss
+++ b/styles/shared/post.scss
@@ -266,12 +266,21 @@ code.inline-code {
   color: unset;
   background-color: unset;
   padding: unset;
+  font-size: 100%; // Compensate the Bootstrap font size
 
   .dark-theme & {
     background-color: unset;
   }
 }
 
+.code--backticks {
+  color: #999;
+
+  .dark-theme & {
+    color: $text-color-darker;
+  }
+}
+
 .text-no-breaks br {
   display: none;
 }
diff --git a/test/jest/__snapshots__/piece-of-text.test.jsx.snap b/test/jest/__snapshots__/piece-of-text.test.jsx.snap
index 74683f5b0..4a63b8e28 100644
--- a/test/jest/__snapshots__/piece-of-text.test.jsx.snap
+++ b/test/jest/__snapshots__/piece-of-text.test.jsx.snap
@@ -112,7 +112,12 @@ exports[`PieceOfText > Renders text with code block 1`] = `
       class="codeBlock"
     >
       <code>
-        \`\`\`
+        <span
+          class="code--backticks"
+        >
+          \`\`\`
+        </span>
+        
 1+1=2;
 foo();
 @mention 
@@ -122,16 +127,14 @@ user@example.com
 ^ 
 
 &lt;spoiler&gt;https://example.com
-\`\`\`
+
+        <span
+          class="code--backticks"
+        >
+          \`\`\`
+        </span>
       </code>
     </pre>
-    <span
-      class="p-break"
-    >
-      <br />
-       
-      <br />
-    </span>
   </span>
 </DocumentFragment>
 `;
@@ -149,7 +152,17 @@ exports[`PieceOfText > Renders text with inline code 1`] = `
       <code
         class="inline-code"
       >
-        \`1+1=2; foo(); @mention user@example.com #hashtag ^ &lt;spoiler&gt;https://example.com\`
+        <span
+          class="code--backticks"
+        >
+          \`
+        </span>
+        1+1=2; foo(); @mention user@example.com #hashtag ^ &lt;spoiler&gt;https://example.com
+        <span
+          class="code--backticks"
+        >
+          \`
+        </span>
       </code>
     </span>
      
diff --git a/test/unit/components/piece-of-text.jsx b/test/unit/components/piece-of-text.jsx
index aeb5878cb..1d62708e7 100644
--- a/test/unit/components/piece-of-text.jsx
+++ b/test/unit/components/piece-of-text.jsx
@@ -111,9 +111,8 @@ describe('<PieceOfText>', () => {
   });
 
   it('should correctly process texts with inline code', () => {
-    const code =
-      '`1+1=2; foo(); @mention user@example.com #hashtag ^ <spoiler>https://example.com`';
-    const text = `Here is the code ${code}. </spoiler> Read it carefully`;
+    const code = '1+1=2; foo(); @mention user@example.com #hashtag ^ <spoiler>https://example.com';
+    const text = `Here is the code \`${code}\`. </spoiler> Read it carefully`;
     expect(
       <Linkify>{text}</Linkify>,
       'when rendered',
@@ -121,7 +120,11 @@ describe('<PieceOfText>', () => {
       <span>
         <ErrorBoundary>
           {'Here is the code '}
-          <code>{code}</code>
+          <code>
+            <span className="code--backticks">`</span>
+            {code}
+            <span className="code--backticks">`</span>
+          </code>
           {'. </spoiler> Read it carefully'}
         </ErrorBoundary>
       </span>,