Change behavior of "__"

[Luna-devv]

Hey,

When you use __ (aka i.e.: __text__) to make a text bold, but I want to change it's behavior to make a text underlined using <ReactMarkdown />. Is that possible, and if it is, how could I do that?

Thanks!

[notunderctrl]

I don't think react markdown supports underlining using markdown. Here's a workaround you could use:

import ReactMarkdown from "react-markdown";
import rehypeRaw from "rehype-raw";

const content = "this is an __underlined__ text";

function parseUnderline(content) {
  return content.replace(/__(.*?)__/g, "<u>$1</u>");
}

export default function App() {
  return (
    <ReactMarkdown rehypePlugins={[rehypeRaw]}>
      {parseUnderline(content)}
    </ReactMarkdown>
  );
}

This makes use of the rehype-raw plugin which allows HTML as input.
The parseUnderline function will convert all the "__" to "u" HTML tags

[ChristianMurphy]

This may work in some circumstances.
I'd add some caution, regex replacing will produce incorrect results.
How emphasis and strong text are parsed in markdown is rather nuanced this doesn't capture any of the edge cases. (see https://spec.commonmark.org/0.30/#emphasis-and-strong-emphasis)

In general it would be better to work with the parsed abstract syntax tree.
https://unifiedjs.com/learn/ introduces working with ASTs, and @wooorm's solution in https://github.com/orgs/remarkjs/discussions/1182#discussioncomment-6359551 shows one of several ways it could be applied for more robust results.

[puopg]

@wooorm @ChristianMurphy Question regarding this suggestion to handle this at the AST level.

I decided to just try this for fun, and one thing I ran into was that at the time md has been parsed to a tree, the text __underlinedtext__, is converted to a text node inside of a strong node. The string value only includes the "underlinedtext" portion of the original markdown string.

Is there a way to discern something like "how" the strong node was created? To differentiate from coming from a ** or a __ for example.

In my exploration, my goal was to see if I could preserve the original md syntax of *, ** and _, but only change what the tree would ultimately look like when __ was seen.

[puopg]

Oh wait, would it be ok to use the position information on the node to map it back to the original md string?

[puopg]

Haha, well i might have answered my own question!

Heres a codesandbox with a simple plugin that operates on the AST level. I wonder if theres some edgecases im not thinking about here since this seems way too simple haha.

https://codesandbox.io/s/bold-pond-4ypph4?file=/src/App.js

[wooorm]

Pass {strong: 'u'} in components to turn markdown strong emphasis into u.

In markdown, there is a slight difference in how * vs _ work, but otherwise they can be used interchangeable: they don’t differentiate.