"markdown-alert-title" class missing and other styling questions

[1chooo]

My Setting:

import React from 'react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import rehypeRaw from 'rehype-raw';
+ import { rehypeGithubAlerts } from 'rehype-github-alerts'

import Anchor from './anchor';
import BlockQuote from './block-quote';
import CodeBlock from './code-block';
import MarkdownImage from './markdown-image';

interface MarkdownRendererProps {
  className?: string;
  content: string;
}

const isImageNode = (node: any): node is Element => {
  return node && node.type === 'element' && node.tagName === 'img';
};

const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({
  className,
  content
}) => (
  <ReactMarkdown
    className={className}
    remarkPlugins={[remarkGfm]}
+     rehypePlugins={[rehypeRaw, rehypeGithubAlerts]}

And also paste the css code from your post GitHub-like alerts using the rehype-github-alerts plugin#styling-rehype-github-alerts

Here is my next.config.mjs:

/**
 * For a detailed explanation regarding each configuration property, visit:
 * https://nextjs.org/docs/app/api-reference/next-config-js
 */

/**
 * @type {import('next').NextConfig}
 */

const nextConfig = {
  /* config options here */
  images: {
    domains: ['skillicons.dev', 'blog.1chooo.com'], // Use domains instead of remotePatterns
    dangerouslyAllowSVG: true, // Enable SVG support for remote SVG images
    unoptimized: true, // Disable image optimization to avoid issues with remote images
  },
  // https://nextjs.org/docs/architecture/nextjs-compiler
  compiler: {
    styledComponents: true,
  },
  // https://nextjs.org/docs/pages/building-your-application/configuring/mdx
  // Configure `pageExtensions` to include markdown and MDX files
  pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],
  transpilePackages: ['next-mdx-remote'],
}
 
export default nextConfig

Screenshots

Here is the rendered HTML:

<div class="markdown-alert markdown-alert-note">
  <p>
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"></path><path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0"></path>
    </svg>
    Note</p>
  <p>Highlights information that users should take into account, even when skimming.</p>
</div>

We can find that markdown-alert-title is loss; therefore, it didn't render the color.

Expected:

<div class="markdown-alert markdown-alert-note">
  <p class="markdown-alert-title">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"></path><path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0"></path>
    </svg>
    Note</p>
  <p>Highlights information that users should take into account, even when skimming.</p>
</div>

We should find that markdown-alert-title is contain in the markdown-alert markdown-alert-note, or maybe we don't contain <p> under the markdown-alert markdown-alert-note

[1chooo]

• Demo: https://www.1chooo.com/mock/todam-tw
• Code Base: https://github.com/1chooo/1chooo.com/tree/a82494f9a1d33acf55765b99a83a408ffd8969f2

[chrisweb]

@1chooo Thank you for the detailed description and reproduction

I first thought the problem might be the combination of Rehype-raw with the alerts plugin, so I removed it from your example but the class was still missing, then I removed your configuration and the title class was back, that's when I noticed that one of your MDX components was removing paragraphs around images, and that code did not give the paragraph its props back:

        p: (props) => {
            const { node, children, ...rest } = props;
            const hasImage = node && node.children && node.children.some(isImageNode);
            if (hasImage) {
                return <>{children}</>;
            }
            return <p {...rest}>{children}</p>;
        },

if you change the code to something like this, where the "rest" props get passed back to the parapraph, then your problem should be fixed

[1chooo]

Hi @chrisweb

Thank you so much for your help with this bug! This issue was caused by the logic I previously wrote for rendering. I've now implemented a solution, and I'd like to credit your efforts in this commit. Could you share your GitHub username and the email associated with your account?

Thanks again for all your support—it means a lot!

[chrisweb]

@1chooo glad I could help :)

I converted this issue to a discussion as this is more of a Q&A now then a real issue

About crediting me, I have often trouble with spam so I rarely share my email, but actually you know, it already makes me happy when I see that other devs use this library, it feels like I'm giving back to the opensource community that gave me so much over the years ;)

[1chooo]

I'm also facing another issue with the styling of markdown-alert-title. The rendering looks correct overall, but the title and SVG appear too thin. Additionally, the "IMPORTANT" SVG differs from GitHub's version. Perhaps we need to update the SVG file we're using?

Here's a screenshot for reference:

To improve the title styling, I suggest adding the following effect to markdown-alert-title:

.markdown-alert-title {
  display: flex;
  margin-bottom: 4px;
  align-items: center;
+  font-weight: 600;
}

Here's a screenshot after I modified:

I'm still experimenting with the SVG styling. Do you have any suggestions for improving it?

Thanks again for your help!

[chrisweb]

Hmmm yeah, I see what you mean and you are right this css might work better for you:

.markdown-alert-title {
  display: flex;
  margin-bottom: 4px;
  align-items: center;
  font-weight: 600;
}

There is nothing wrong with it

The reason why there is no CSS file in the package itself is because I did not want the library to be too opinated, I mean a bunch of projects probably use tailwind, others will use styleX or even a library like MUI... (I use the alerts quite a lot on my blog

But because this plugin is called rehype-github-alerts and not just rehype-alerts, I do agree that one can assume devs will expect it to look like github, this is why I added hints about styling in the readme and also included examples which use an opensource icons library (so yes they are not exactly the same as the ones github uses, but similar, the reason I chose those icons is that they were opensource, which meant that I could add them to this package and redistribute them)

Haha, while writing my response I searched for official github icons and actually found them, until today I didn't know they exist. Github has a project called "Primer Design System" which includes octicons and those seem to be MIT licensed, they seem to have different packages with just the icons, like styled-octicons and another one for react

So for the CSS, I think what is currently in the readme is good to get people started, adding the font-weight to it is not something I would do, because for example look at github https://github.com/orgs/community/discussions/16925, they have the font-weight set to 500, so I guess it just depends on what font the developer / designer is using for the overall theme of their project

I'm not sure what to do about the icons though? I mean, we could replace the current icons with octicons (which would mean releasing a new version). The main problem I see here is that octicons have different packages, so I think it is best to let the dev chose which octicons package they want to use (depending on their tech stack), so maybe it would be better to just remove the icons from the package completly and instead add a chapter in the readme and maybe an example in the examples section that uses an octicons package. The good thing about having the icons in the package is that when devs try out the package it works out of the box, without first having to set icons somewhere, which is why I intially decided to include the svg files as elements in the code itself. So yeah, I'm not sure what would be best, I think I need to sleep a night over it. If you want, let me know what you think of all this ;)

[chrisweb]

@1chooo I'm still not sure if it would be best to remove / replace or keep the icons as, but I have updated the readme and added two new chapters, github-font-family is the first chapter and it is about making the alert font look like the one that GitHub uses and github-octicons is the second chapter and it is about creating a custom configuration that uses the octicons (as replacement for the twbs icons that rehype-github-alert uses by default), hope this brings you closer to what you want to achieve

[1chooo]

Hi @chrisweb, thank you for actively discussing this issue with me. After understanding your explanation, I agree with your initial goal. Providing developers with the flexibility to define their own styles is indeed a great approach. Including a guideline in the README is an excellent choice. Therefore, I believe the current solution is the better option, we don't need to remove or replace anything. Thank you again!