Problem trying to make it work

[flazouh]

Hi, I'm having troubles making your plugin work, here is a screenshot of what's the result:

As you can see it gets rendered as a blockquote

Where the markdown code is the following:

Explanation:

In the given sentence, унитазу refers to toilet.

Transliteration:

Type	Transliteration
Cyrillic	унитаз
Latin	unitazu

Possible Meanings:

The word унитаз generally means toilet or lavatory. It specifically refers to the fixture used for urination and defecation.

Examples of Usage:

1. Я купил новый унитаз для ванной комнаты.
   I bought a new toilet for the bathroom.

2. Унитаз засорился, и нам пришлось вызвать сантехника.
   The toilet got clogged, and we had to call a plumber.

3. Перед тем как покрасить ванную комнату, нам нужно снять крышку унитаза.
   Before painting the bathroom, we need to remove the toilet seat.

Note

In Russian, nouns have cases. The word "унитаз" in this context is in the Dative case due to its prepositional use with "к" (to, towards), indicating direction or proximity.

Cas	Singular
Nominative	унитаз (unitaz)
Accusative	унитаз (unitaz)
Genitive	унитаза (unitaza)
Dative	унитазу (unitazu)
Instrumental	унитазом (unitazom)
Prepositional	об унитазе (o unitaze)

Here is the tsx code:

import type { TranslationPopoverProps } from '@common/components/word/translation-popover.component'
import { useExplanationRequestStore } from '@common/stores/explanation-request.store'
import Markdown from 'react-markdown'
import remarkGfm from 'remark-gfm'
import { rehypeGithubAlerts } from 'rehype-github-alerts'

export function ExplanationComponent(props: TranslationPopoverProps) {
  const explanationRequest = useExplanationRequestStore((state) =>
    state.requests.get(props.requestID),
  )
  const explanation = explanationRequest?.explanation
  if (explanation?.length === 0 || !explanation) {
    return null
  }
  return (
    <div className="markdown-body size-full overflow-y-auto rounded-md p-1  px-2.5 text-left font-fluent text-base text-white">
      <Markdown remarkPlugins={[rehypeGithubAlerts, remarkGfm]}>
        {explanation}
      </Markdown>
    </div>
  )
}

and my style.css:

@import 'github-markdown-css/github-markdown.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer Components {

    :root {
        --blue: #4285f4;
        --purple: #9b72cb;
        --red: #d96570;
        --input: 214.3 31.8% 91.4%;
        --ring: 215 20.2% 65.1%;
        --github-alert-default-color: rgb(175, 184, 193);
        --github-alert-note-color: rgb(9, 105, 218);
        --github-alert-important-color: rgb(130, 80, 223);
        --github-alert-warning-color: rgb(154, 103, 0);
    }


    .markdown-alert {
        padding: 0 1em;
        margin-bottom: 16px;
        border-left: 0.25em solid var(--github-alert-default-color);
    }

    .markdown-alert-note {
        border-left-color: var(--github-alert-note-color);
    }

    .markdown-alert-important {
        border-left-color: var(--github-alert-important-color);
    }

    .markdown-alert-warning {
        border-left-color: var(--github-alert-warning-color);
    }

    .markdown-alert-header {
        display: inline-flex;
        margin-bottom: 4px;
        align-items: center;
    }

    .markdown-alert-header > svg {
        margin-right: 8px;
    }
    ```
    

Thanks a lot in advance for your help !!

[chrisweb]

@flazouh, you have passed the rehype plugin to the remark plugins list, I see you use react-markdown so this updated code snippet should work (note though: I’m currently not home, writing this on my iPad, did not actually test the code):

return (
    <div className="markdown-body size-full overflow-y-auto rounded-md p-1  px-2.5 text-left font-fluent text-base text-white">
      <Markdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeGithubAlerts]}>
        {explanation}
      </Markdown>
    </div>
)

Some related info: rehype != remark

Remark is used to transform markdown, rehype to transform HTML (after markdown got turned into HTML)

(It this is not a bug, I will turn this into a discussion, just waiting few days to make sure you have seen my answer)

[flazouh]

@chrisweb Thanks for your quick answer, it seems to display better now, but not totally:

Do you have any idea what's happening here ? Thanks !