Merge pull request #13 from vvbbnn00/dev

fix: Correct the default display of elements like img in Markdown preview to be inline-block
vvbbnn00 · Mar 18, 2024 · 86c689f · 86c689f
2 parents 3f53b04 + d71f285
commit 86c689f
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 12 deletions.
diff --git a/app/package-lock.json b/app/package-lock.json
diff --git a/app/pnpm-lock.yaml b/app/pnpm-lock.yaml
diff --git a/app/src/components/previews/MarkdownPreview.tsx b/app/src/components/previews/MarkdownPreview.tsx
@@ -116,7 +116,7 @@ const MarkdownPreview: FC<{
   return (
     <div>
       {standalone && <BasicInfoPanel file={file}></BasicInfoPanel>}
-      <div className="border-t border-gray-900/10 bg-white bg-opacity-80 p-2 shadow-sm backdrop-blur-md dark:border-gray-500/30 dark:bg-gray-900 rounded !bg-opacity-50">
+      <div className="border-t border-gray-900/10 bg-white p-2 shadow-sm backdrop-blur-md dark:border-gray-500/30 dark:bg-gray-900 rounded !bg-opacity-50">
         <div className="markdown-body">
           {/* Using rehypeRaw to render HTML inside Markdown is potentially dangerous, use under safe environments. (#18) */}
           <ReactMarkdown

diff --git a/app/src/styles/markdown-github.css b/app/src/styles/markdown-github.css
@@ -87,7 +87,6 @@
 
 .markdown-body strong {
   font-weight: inherit;
-  font-weight: bolder;
 }
 
 .markdown-body h1 {
@@ -778,7 +777,6 @@
 .markdown-body img {
   max-width: 100%;
   box-sizing: initial;
-  background-color: #fff;
 }
 
 .markdown-body img[align='right'] {
@@ -988,6 +986,11 @@
   vertical-align: middle;
 }
 
+.markdown-body img, svg, video, canvas, audio, iframe, embed, object {
+    display: inline-block;
+    vertical-align: middle;
+}
+
 @media (prefers-color-scheme: dark) {
   .markdown-body {
     /* color: #c9d1d9; */
@@ -1139,9 +1142,6 @@
   .markdown-body table tr:nth-child(2n) {
     background-color: #161b22;
   }
-  .markdown-body img {
-    background-color: #0d1117;
-  }
   .markdown-body code {
     background-color: rgba(240, 246, 252, 0.15);
   }