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 !

[chrisweb]

@flazouh it seems like the .markdown-alert css is not getting applied or maybe it gets overwritten by other css you inject

The css I recommend in the readme and which you seem to have added is this:

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

the padding here is the part that should create some space between the content and the vertical line on the left

maybe try to use !important just to make sure the padding gets applied, like this:

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

[chrisweb]

I have just now updated the css example in the readme, to now also include the colors for new caution and tip alerts, I also added a colors example for dark mode, maybe you want to adjust the colors accordingly, as I see that you seem to use darkmode in your project

Readme styling chapter

[flazouh]

It seems to work now, awesome, thanks for the tip @chrisweb !

[chrisweb]

Great, you welcome 🙂