How can I add an inline code span element that contains an | character inside an inline code span inside a table row. Or in other words how can I make the second row in this table render correctly?
| Operator | Description |
|:---------|:---------------------|
| `&` | bitwise and operator |
| `|` | bitwise or operator | <!-- this doesn't render correctly -->
| `^` | bitwise xor operator |
| `<<` | left shift operator |
| `>>` | right shift operator |
There is no general answer to this question. There are many flavors of Markdown and even more implementations. Few of them follow a strict specification. On top of that, tables are a syntax extension and aren't supported across the board. How the table is rendered depends on the actual Markdown renderer.
Notably, this works as is here on Stack Overflow.
| Operator | Description |
|:---------|:---------------------|
| `|` | bitwise or operator |
is rendered as
| Operator | Description |
|---|---|
| |
bitwise or operator |
To see the result produced by other Markdown renderers, we can use Babelmark 3, a GitHub-hosted tool for comparing the output of various Markdown implementations.
The output for the table above varies. About half the implementations that do support tables render this case correctly, the others don't.
GitHub Flavored Markdown is one example where it fails. The output looks something like this:
| Operator | Description |
|---|---|
| ` | ` |
Fortunately, GitHub Flavored Markdown does have a specification. For the tables extension, it specifically notes:
Include a pipe in a cell’s content by escaping it, including inside other inline spans.
So replacing `|` with `\|` fixes the problem in this case… but does breaks others.