18

Markdown tables use vertical bars as field separators, but I need to write a vertical bar within some cells. Is this possible? I'm using GFM (GitHub Flavored Markdown).

Can I escape the vertical bar somehow?

This is not on GitHub, it's through Docusaurus. I don't know which parser Docusaurus uses, but none of the following work:

  • | - | just gets displayed (the & is escaped)
  • <code> - Any html is displayed (the < is escaped)
  • \| - | still acts as a table cell delimiter

UPDATE:

&#124; works if I don't have it inside backticks. So, at least for now, I simply un-backtick the vertical bar. For example, a | b becomes a|b

Yangshun Tay
  • 49,270
  • 33
  • 114
  • 141
at.
  • 50,922
  • 104
  • 292
  • 461
  • Possible duplicate of [How to escape a pipe char in a code statement in a markdown table?](https://stackoverflow.com/questions/17319940/how-to-escape-a-pipe-char-in-a-code-statement-in-a-markdown-table) – Waylan Apr 14 '18 at 00:59

3 Answers3

22

Docusaurus maintainer here! Docusaurus uses Remarkable for parsing Markdown.

As you pointed out in your question, you can write this in your table - &#124; and it will render as |.

If you want it to appear with monospaced styling, wrap it in <code>&#124;</code> instead of using backticks. You will have to write HTML and not markdown to get it to work.

Refer to line 30 of Reason Cheatsheet. I recently fixed a similar issue in the Reason docs.

## Boolean

| JavaScript                                            | Reason                                         |
| ----------------------------------------------------- | ---------------------------------------------- |
| `true`, `false`                                       | `true`, `false` \*                             |
| `!true`                                               | Same                                           |
| <code>&#124;&#124;</code>, `&&`, `<=`, `>=`, `<`, `>` | Same                                           |
| `a === b`, `a !== b`                                  | Same                                           |
| No deep equality (recursive compare)                  | `a == b`, `a != b`                             |
| `a == b`                                              | No equality with implicit casting (thankfully) |

becomes:

Reason Table

M--
  • 25,431
  • 8
  • 61
  • 93
Yangshun Tay
  • 49,270
  • 33
  • 114
  • 141
  • Thank you @Yangshun! But I had already tried ``. Docusaurus (apparently Remarkable) just displays `whatever I type here`, angled brackets and all. – at. Apr 14 '18 at 22:14
  • @at Do you have a repository on GitHub I can look at? Would be easier to help you debug there. Let me know which file and line you want to achieve it. – Yangshun Tay Apr 15 '18 at 03:35
  • that would be so helpful! The GitHub repo: https://github.com/ucode/udocs/blob/master/docs/order_of_operations.md The specific page I had some `|`s: https://github.com/ucode/udocs/blob/master/docs/order_of_operations.md The resulting page generated from Docusaurus: https://www.udocs.com/docs/order_of_operations.html – at. Apr 15 '18 at 23:30
  • @at Have made a pull request to your repo – Yangshun Tay Apr 16 '18 at 00:15
  • 1
    Thank you @Yangshun. It seems `` did work. Strange, I tried `` before and the parsed result escaped the `<` character so `` was displayed in the HTML. Maybe I did it inside of backticks or some other mechanism that Remarkable wouldn't parse the expected way... – at. Apr 16 '18 at 00:32
  • I think that might have been the case. Good that it's resolved! (: – Yangshun Tay Apr 16 '18 at 00:34
4

If the usual strategies won't work you should be able to use a Unicode character that looks like a bar, but isn't, e.g. Unicode Character 'INTEGRAL EXTENSION' (U+23AE):

| foo   | bar |
| ----- | --- |
| `a⎮b` | baz |
ChrisGPT was on strike
  • 127,765
  • 105
  • 273
  • 257
  • This would be a problem if people copy the code out from the webpage and paste it in their editor. They will get hard-to-debug compilation errors. – Yangshun Tay Apr 14 '18 at 17:21
  • 3
    @YangshunTay, that's true if the content is literal code, i.e. something that a person would ever want to copy into a code editor. I may have misunderstood, but I thought the content in question was meant for human consumption only. – ChrisGPT was on strike Apr 14 '18 at 17:35
  • 2
    In any case, the `` option is much better than my answer if it works. OP's question said it didn't, but I'll defer to the maintainer :-). – ChrisGPT was on strike Apr 14 '18 at 17:45
4

If you are typing math and $p(x|y)$ breaks the formula, use \vert instead of |.

awct
  • 125
  • 1
  • 5