CODEWITHSUNDEEP
reactjsgatsby
Martin
Martin

Reputation: 641

Escaping "import" and react/html to display as text in MDX?

I am just starting with MDX inside of gatsby/react and I want to be able to escape things to display as normal text i.e.

For example, I want to display this as a standard text?

here is some info

 import {test} from "test"

ffdg

<text>dddd</text>

The import line complains in the playground (https://mdxjs.com/playground/) but if I start it with space it seems fine

but the line that starts with HTML angular brackets, space doesn't help. I have surrounded it with ticks but then its rendered with a grey background.

What is the correct way of escaping or telling MDX to ignore certain content?

Does anybody know

Upvotes: 3

Views: 1202

Answers (3)

ecoologic
ecoologic

Reputation: 10420

From here:

If you want the word import or export, make sure it’s not at the start of a paragraph.

Turns out import (starting with a space) is just enough, and then HTML won't render that space.

Upvotes: 1

revelt
revelt

Reputation: 2420

If it's a code block, three back ticks solution is best, but if you want to escape the regular word "import", it's enough to HTML-encode its first letter "i", &#x69;:

enter image description here

Upvotes: 0

Alexander Cherednichenko
Alexander Cherednichenko

Reputation: 567

Just wrap everything with ```

```
here is some info

import {test} from "test"

ffdg

<text>dddd</text>
```

Upvotes: 1

Related Questions