Plain text highlighting in react-markdown

[polcats]

Is it possible to achieve plain text highlighting?

I have seen several issues about syntax highlighting and they seem to work.
But I don't need highlighting for codes, I just need to highlight parts of a plain text. Is this possible?

[wooorm]

Could you spend some more time framing your question? The way it currently is, is unclear to me, which would yield me asking what and why? several times!

[polcats]

Sorry for the confusion. I am looking for a basic highlighting like this (got image from google):

Is this possible?

[wooorm]

Markdown has no such feature. But HTML does: you can use <mark> element there. You could also use a Markdown plugin to add support for syntax extensions: https://github.com/remarkjs/remark-directive, and then handle certain directives (e.g., using a mark title) in certain ways.
However, all these things won’t render nicely in other places that render markdown, so you might also repurpose strong (bold, **) to become mark

[RamanKharchee]

With the same context I have similar requirement.
First Following is the code:

import { Box } from '@mui/material';
import React from 'react';
import Markdown from 'react-markdown';
import remarkGfm from 'remark-gfm';

function MarkDowns({
  data,
  sx = {
    maxHeight: '300px',
    width: '1008px',
    overflow: 'scroll',
  },
}) {
  return (
    <Box sx={sx}>
      <Markdown remarkPlugins={[remarkGfm]}>{data}</Markdown>
    </Box>
  );
}

export default MarkDowns;

import React, { useEffect, useState } from 'react';
import MarkDowns from '@components1/common/MarkDowns';

interface MarkdownLogsProps {
  query: Record<string, any>;
}

const MarkdownLogs: React.FC<MarkdownLogsProps> = ({ query }) => {
  const [text, setText] = useState('');

  useEffect(() => {
    // Calling the API
    setText('```'.concat(some_text_from_api.concat('```')));
  }, []);

  return (
    <div>
    <MarkDowns data={text} sx={{ width: '100%', maxHeight: '600px', overflow: 'scroll' }} />
    </div>
  );
};

export default MarkdownLogs;

The Element structure is:

<div class="MuiBox-root css-lzfig3">
   <pre>
      <code>
          {text or data}
      </code>
   </pre>
</div>

In MarkdownLogs component I am adding search box. Now if the searched text is available any where in text variable then it should be highlighted?

Like it is suggested above to wrap a text within mark tag I tried this by hardcoding some text from text variable The data shown in the display is as is. I wrote like this setText('```'.concat(some_text_from_api.replaceAll("NETWORK", "<mark>NETWORK-WORLD</mark>").concat('```')));

[ChristianMurphy]

@RamanKharchee see the thread above https://github.com/orgs/remarkjs/discussions/607#discussioncomment-292751
You can use directives if you want to handle this in markdown.

If you want to use raw HTML follow the guide on HTML in markdown https://github.com/remarkjs/react-markdown#appendix-a-html-in-markdown and be aware of the security implications https://github.com/remarkjs/react-markdown#security