[docs] Tables which has a pipe in a code are broken

[Nkzn]

SSIA. The | in the code (`) is recognized as a table separator.

code:

| Name                                    | Type                              | Description                                                                                                                                                         |
| --------------------------------------- | --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [iosClientId][g-creds]                  | `string | undefined`              | The iOS client id registered with Google for use in the Expo client app.                                                                                            |

capture:

page: https://docs.expo.io/versions/v39.0.0/sdk/google/

This was caused by #10177 . MDX v1 is GFM compliant, and GFM has same problem.

Name	Type	Description
[iosClientId][g-creds]	`string	undefined`

this can be solved with escaping the pipe in GFM.

| Name                                    | Type                              | Description                                                                                                                                                         |
| --------------------------------------- | --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [iosClientId][g-creds]                  | `string \| undefined`              | The iOS client id registered with Google for use in the Expo client app.                                                                                            |

Name	Type	Description
[iosClientId][g-creds]	string | undefined	The iOS client id registered with Google for use in the Expo client app.

but, in the MDX v1.6.18, \ is remaining.

This is MDX's issue. mdx-js/mdx#1285

workaround

revert #10177 😢

[ide]

We've merged a partial fix (#10500) but it looks like a bug with MDX still causes botched rendering, it's just less botched now (you can figure out what to do, it just looks broken).

[barthap]

#10311 is related

https://docs.expo.io/versions/v39.0.0/sdk/app-auth/#tokenresponse is also affected

[byCedric]

To fix this issue fully, we probably have to wait until remarkjs/remark#536 is merged and released. It's an issue within remark's internals. Until then, we can do two things:

1. "Cheat" our way around the pipe character (|), by using a similar character like the divisor (∣).

2. Wrap code blocks with <InlineCode>string \| null</InlineCode> to allow character escaping (works around the remark parser).

In the example below, the first line has the divisor character and second line has <InlineCode> wrapped and escaped |.

In code, it looks like:

| `ios.icon ∣ icon`                            | ...
| <InlineCode>web.favicon \| icon</InlineCode> | ...

@ide Which one do you prefer? I think 1 is the simplest solution, but also might be too confusing for people to contribute with. 2 is very expressive and increases the code (decreases readability from markdown). Either way, this would solve our current issue until the fix is released.

---

Edit: talked with Cruzan, option 2 seems like the most sensible one in this case.

[ide]

I agree the second option is better. The issue is non-obvious and needs to be communicated instead of hidden behind a different unicode character since this is text that people type. The divisor character would make sense to me if it were autogenerated on each build and never typed by people, but otherwise no one is going to know they need to type it. Also it presumably breaks copy/pasting from the docs.

[wooorm]

It’s not remark internals. It’s MDX internals