How to render a url as text without an anchor?

[jmwielandt]

Hi, my markdown states something like...

# Title

Hi, for help you can visit www.example.com

I DO NOT want it to be an anchor on the html, but the tag is automatically added on render. It is transformed to:

[...]Hi, for help you can visit <a href="www.example.com">www.example.com</a>[...]

How can I fix it?

[jmwielandt]

i did it!

fix: add disallowedElements={["a"]} unwrapDisallowed.

<Markdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]} disallowedElements={["a"]} unwrapDisallowed>
  { content }
</Markdown>

[jmwielandt]

Here it is: https://stackblitz.com/~/github.com/jmwielandt/sdsdf?file=src/app.tsx
i didn't have to add a lot.

[ChristianMurphy]

A few questions, is intentional that you are using HTML inside markdown here?
You can attach attributes to markdown ones as well, and they tend to be more intuitive to authors.
In addition HTML is more risky both from a brand perspective (people and add off brand colors) and security perspective (you need to sanitize to prevent JS injection).

The second is how does iframe factor in? Your example doesn't include iframe.

---

I think you're looking for something more similar to the following

import Markdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import { visit } from 'unist-util-visit'
import type { Root } from 'hast'

const markdown = `
www.example.com

I need to put a table too...
|a|b|
|-|-|
|1|2|
`;

function rehypeChangeTargetForIframeLinks() {
  return (tree: Root) => {
    visit(tree, "element", (node) => {
      if (node.tagName === 'a') {
        node.properties.target = "_top"
      }
    })
  }
}

function App() {
  return <>
    <Markdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeChangeTargetForIframeLinks]}>
      {markdown}
    </Markdown>
  </>
}

export default App;

runnable: https://stackblitz.com/edit/github-drwxgy-nhlxsf?file=src%2Fapp.tsx

Where markdown and inline links are supported, but are handled outside the iframe context thanks to the target="_top"

[jmwielandt]

is intentional that you are using HTML inside markdown here?

Yes. In my real code I even have css inside ^^u

You can attach attributes to markdown ones as well, and they tend to be more intuitive to authors.

How can I set the target="_blank" to a md link? i've been searching about it but couldn't find anything.

In addition HTML is more risky both from a brand perspective (people and add off brand colors) and security perspective (you need to sanitize to prevent JS injection).

Yeah, but in this case is a static markdown file versioned on the same repository.

The second is how does iframe factor in? Your example doesn't include iframe.

oh, sorry. i thought you were just asking about the anchor issue.

Now i have a full example with the iframe:

https://stackblitz.com/~/github.com/jmwielandt/sdsdf?file=index.html

Your rehypeChangeTargetForIframeLinks function works like a charm! thanks! i only changed the "_top" for "_blank".

BUT: the issue of the anchor duplication still exists while creating it with html 🤔 (use case: imagine wanting to have a div with certain style (margins, background-color, etc) inside the anchor, for example).

[ChristianMurphy]

How can I set the target="_blank" to a md link? i've been searching about it but couldn't find anything.

By using the rehype plugin shared above.
The same one you reference in

Your rehypeChangeTargetForIframeLinks function works like a charm! thanks! i only changed the "_top" for "_blank".

Yeah, but in this case is a static markdown file versioned on the same repository

For a fully static file, have you considered using a site generator https://mdxjs.com/docs/getting-started/#site-generators or build tool https://mdxjs.com/docs/getting-started/#build-systems ?
To generate the HTML one time, so the browser doesn't need to:

1. download a markdown parser
2. parse and transform all the content
3. render a dynamic react component

on every page load?

BUT: the issue of the anchor duplication still exists while creating it with html

/cc @wooorm this looks like a conflict between GFM autolinks and HTML, what is the intended behavior for this.

[wooorm]

This is expected. This is how GFM works. It conflicts. Both work: <a href="https://example.org">https://example.com</a> turns into <a href="https://example.org"><a href="https://example.com">https://example.com</a></a> at first, and then, because as are not allowed to be in each other, into <a href="https://example.org"></a><a href="https://example.com">https://example.com</a>

See what URL shows if you hover over this (or inspect the DOM):

<a href="https://example.org">https://example.com</a>

https://example.com

The solution is to change your content: people don’t need to read that http:// and such:

<a href="https://example.org" and-other-attributes>example.com</a>

Or even better, use descriptive text:

<a href="https://example.org" and-other-attributes>some useful label</a>

If you want people to read those protocols, or otherwise include raw URLs, use code for that:

<a href="https://example.org" and-other-attributes>`https://example.com`</a>