Add/fix some styles of the code blocks

FreeFeed · Jul 14, 2024 · 6d162d1 · 6d162d1
1 parent 9e4438b
commit 6d162d1
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 21 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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 @@ [email protected]
 ^ 
 
 &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 [email protected] #hashtag ^ &lt;spoiler&gt;https://example.com\`
+        <span
+          class="code--backticks"
+        >
+          \`
+        </span>
+        1+1=2; foo(); @mention [email protected] #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
@@ -111,17 +111,20 @@ describe('<PieceOfText>', () => {
   });
 
   it('should correctly process texts with inline code', () => {
-    const code =
-      '`1+1=2; foo(); @mention [email protected] #hashtag ^ <spoiler>https://example.com`';
-    const text = `Here is the code ${code}. </spoiler> Read it carefully`;
+    const code = '1+1=2; foo(); @mention [email protected] #hashtag ^ <spoiler>https://example.com';
+    const text = `Here is the code \`${code}\`. </spoiler> Read it carefully`;
     expect(
       <Linkify>{text}</Linkify>,
       'when rendered',
       'to have rendered with all children',
       <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>,