質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
Gatsby

Gatsbyとは、Reactベースの静的サイトジェネレータ。最新のフロントエンド技術を活かし、機能豊富なWebサイトやアプリケーションを作ることが可能です。GraphQLを用いてあらゆるソースからサイトのデータを取得。指定した設定に基づいて静的サイトを構築することができます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

受付中

【React】マークダウン「」かっこが消えてしまう

tarotarotarotar
tarotarotarotar

総合スコア35

Gatsby

Gatsbyとは、Reactベースの静的サイトジェネレータ。最新のフロントエンド技術を活かし、機能豊富なWebサイトやアプリケーションを作ることが可能です。GraphQLを用いてあらゆるソースからサイトのデータを取得。指定した設定に基づいて静的サイトを構築することができます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0回答

0リアクション

0クリップ

412閲覧

投稿2021/09/25 00:53

編集2021/09/25 03:06
gatsby-remark-autolink-headers gatsby-remark-table-of-contents

上記2つのgatsbyのライブラリを使って、アンカーリンク付きの目次自動生成機能を実装しています。

参考記事
https://kakkiii-blog.dev/posts/486/

生成自体はできたのですが、idの自動付与の際、 「, 」(かっこ)が削除されてしまいます。

下記のように、h2タグ内のテキストをidとして自動で付与するのですが、その際に、上記の記号だけ切り抜かれてidに変換されてしまうため、アンカーリンクが機能しない状態です。

イメージ説明

なぜこのようなことがおきてしまうのでしょうか?

マークダウンファイルを使っているので、そこで変換されてしまうのかな?と思ったのですが、同じ事象は調査しても出なかったので、違うのかな?とも思ったりしてます。。。

\を使ってエスケープしてもだめのようです。

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

hoshi-takanori

2021/09/25 06:44

括弧が消えるのは gatsby-remark-autolink-headers が使っている github-slugger の仕様みたいですね。
tarotarotarotar

2021/09/26 00:47

ありがとうございます! これは防ぐ方法はないのでしょうか??
hoshi-takanori

2021/09/26 00:58

github-slugger としては github の挙動と全く同じにしていて、設定変更とかは考えてないようです。 ご自分で gatsby-remark-autolink-headers のソースをいじってカスタマイズするしかないのでは…。
tarotarotarotar

2021/09/26 00:59

承知いたしました! github-sluggerは今回初耳だったのでカスタマイズはコストがかかりそうなので括弧のかわりにダブルクォーテーションを使うようにしたいと思います。 ありがとうございます!
hoshi-takanori

2021/09/26 01:07

github-slugger 引用符とかも消す気がしますが…。というか、そもそも id の括弧が消えるのに、アンカーリンクには括弧が残るとしたら何かが間違ってると思うんですが、私はそこまで追いかける気はないので、ごめんなさい。
tarotarotarotar

2021/09/26 01:16 編集

とんでもございません。 アドバイスありがとうございます! ちなみにですが これは"目次"です というh2タグを設置すると自動生成された目次のテキストではそのままダブルクォーテーション付きで表示されますが、アンカーリンクでは #これは目次です と、ダブルクォーテーションが省略されます。 ただ、h2のidにも同様にダブルクォーテーションが省略されたidが格納されるので正常に動作はするみたいです。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Gatsby

Gatsbyとは、Reactベースの静的サイトジェネレータ。最新のフロントエンド技術を活かし、機能豊富なWebサイトやアプリケーションを作ることが可能です。GraphQLを用いてあらゆるソースからサイトのデータを取得。指定した設定に基づいて静的サイトを構築することができます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。