'how to get the text-underline from strapi articles to my gatsby frontend

I'm working on a support site with strapi(backend) and gatsbyjs/react (frontend). I am trying to retrieve from my admin strapi the text I have underlined and display it in my frontend but it is not retrieving the <u> tag correctly and is displaying the <u> tag instead of the underlined text. Is it because of my react-markdown?

here is my webview: when I look at the element inspector I see inverted commas before my tag which is why it doesn't work enter image description here

and here is my code:

import React from "react";
import { graphql, PageProps } from "gatsby";
import ReactMarkdown from "react-markdown";

import { ArticleT } from "@faq/types";

import Layout from "@faq/components/Layout";

import * as s from "./Article.module.css";
import { toArticle, toCategory } from "@faq/utils/routes";

type ArticlePageProps = {
  strapiArticle: ArticleT;
  file: {
    publicURL: string;
  };
};

const Article: React.FC<PageProps<ArticlePageProps>> = ({
  data: { strapiArticle },
}) => {
  const { title, content, category, slug } = strapiArticle;

  return (
    <Layout
      seo={{ pageTitle: title, pageUrl: toArticle(category.slug, slug) }}
      breadcrumb={[
        { to: toCategory(category.slug), label: category.title },
        { label: title },
      ]}
    >
      <div className={s.wrapper}>
        <h1 className={s.title}>{title}</h1>
        <div className={s.author}>
          <div className={s.texts}>
            <div>
              <span className={s.light}>Écrit par</span> Nicolas
            </div>
          </div>
        </div>
        <ReactMarkdown children={content}
          className={s.content}
          transformImageUri={uri => uri.startsWith("http") ? uri : `${process.env.GATSBY_IMAGE_BASE_URL}${uri}`} />
      </div>
    </Layout>
  );
};

export default Article;

export const query = graphql`
  query ArticleQuery($id: Int!) {
    strapiArticle(strapiId: { eq: $id }) {
      title
      content
      slug
      category {
        title
        slug
      }
    }
  }
`;
htmlreactjsgatsbystrapireact-markdown


Solution 1:[1]

Have you tried using your own rendering component (components)?

  <ReactMarkdown 
    children={content}
    components={{
      u: ({node, ...props}) => <u style={{textDecoration: 'underline'}} {...props} />
    }}
   className={s.content}
   transformImageUri={uri => uri.startsWith("http") ? uri : `${process.env.GATSBY_IMAGE_BASE_URL}${uri}`} 
  />

More details about components property: https://github.com/remarkjs/react-markdown#appendix-b-components

You can even use a custom-styled <p> instead of <u> if needed. The idea relies on parsing the <u> tag to add your own underlined component.

Apparently, it is needed to install rehype-raw plugin to allow ReactMarkdown to understand and interpret underlined tags (<u>)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions