Correct visual styles for images with captions

getsentry · Mar 25, 2024 · 4a23b07 · 4a23b07
1 parent be168ad
commit 4a23b07
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/app/components/markdown.tsx b/app/components/markdown.tsx
@@ -19,14 +19,14 @@ renderer.code = function (code, lang, escaped) {
 
 // add captions to images
 renderer.image = function (href, title, text) {
- const html = `<figure><img src="${href}" title="${title}" alt="${text}" /></figure>`;
+ const html = `<img src="${href}" title="${title}" alt="${text}" />`;
  if (title) {
- return `<figure>
+ return `<figure class="not-prose markdown-image">
  ${html}
  <figcaption>${title}</figcaption>
  </figure>`;
  }
- return html;
+ return `<figure class="not-prose markdown-image">${html}</figure>`;
 };
 
 const parseMarkdown = (content: string, options = {}): string => {

diff --git a/app/styles/index.css b/app/styles/index.css
@@ -235,3 +235,15 @@ label select {
  @apply pr-0;
  }
 }
+
+.prose figure.markdown-image {
+ @apply flex items-center flex-col my-8;
+}
+
+.prose figure.markdown-image > img {
+ @apply mb-0;
+}
+
+.prose figure.markdown-image > figcaption {
+ @apply text-secondary-light dark:text-secondary-dark text-xs mt-0 text-center;
+}