Hacktoberfest 2026:メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

Cannot use a `|` character in table header

オープン
#229 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

まだ誰も着手していません。

評価

難易度
3/5
見積もり時間
1〜2日
初心者へのやさしさ
42/100
issue の種類
バグ
明瞭さ
おおむね明確
活発さ
停滞
技術スタック
typescript
領域
frontend

調査の方向性

提供されたテーブルを作成し、Markdown ビューとプレビュー ビューを切り替えて、エディターで問題を再現します。切り替えるたびに Markdown ソースを比較します。エスケープされたパイプ文字または提供された HTML エンティティがそのまま維持され、テーブルが引き続き正しくレンダリングされれば完了です。

索引モデルが issue の本文から書いたものです。

説明

bug commonmark

Describe the bug
The stacks-editor overwrites/parses markdown when switching between preview and markdown views which is not allowing me to put a | character into a header. Some variations that I've tried:

  • Add \ to escape the pipes. the editor strips out my escapes.
  • Use the HTML character code |. This also gets parsed out and translated to just | which loses the escape
  • Combine the above 2 approaches - I\|Like\|\|Pipes Maybe we can escape the character code and escape the escapes! Toggling between markdown and preview modes progressively modifies the markdown source until the table is broken as in, it renders a proper table but shows I|Like||Pipes and then I|Like|Pipes and then broken table.
  • Try editing in the preview mode instead of the markdown. So build the table and then add the pipes in from the preview mode. Also doesn't work.

To Reproduce

  1. Try to create a table where one of the headers has a | in it. Example:
| Column1 | I\|Like\|Pipes |
| ------- | -------------- |
| tables  | r fun          |
  1. Switch to preview mode to ensure the escapes worked as I'd expect and see I|Like|Pipes in the preview.
  2. Either post or switch back to markdown view and see that the table no longer renders correctly.

Expected behavior
I should be able to put a | character into a table header if I'd like either by escaping them or using |. I'd expect toggling between view modes not to produce different results.

Screenshots
editor-table-pipe-bug

Desktop (please complete the following information):

  • OS: [e.g. iOS] Windows
  • Browser [e.g. chrome, safari] chrome
  • Version [e.g. 22] 107.0.5304.63

Smartphone (please complete the following information):

  • Device: [e.g. iPhone6]
  • OS: [e.g. iOS8.1]
  • Browser [e.g. stock browser, safari]
  • Version [e.g. 22]

Additional context

主要言語
TypeScript
スター
440
フォーク
61
平均マージ
19時間 52分
マージ済み PR(30日)
23

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

StackExchange/Stacks-Editor のほかの issue

StackExchange/Stacks-Editor の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。