@nakai1980 (nakai)posted at 2025-01-03

qiitaの記事にCodeSandBoxを埋め込む方法

Q&A

Closed

解決したいこと

Qiitaの記事にCodeSandBoxを埋め込む方法を探しています。
こちらの記事の方法だとCodeSandBox側のUrlが異なるようになって埋め込めないようなので
https://qiita.com/Qiita/items/612e2e149b9f9451c144
方法がわかる方いらっしゃいましたら教えていただけないでしょうか？

発生している問題・エラー

Qiitaの記事では
「URLに/embedが含まれる、Embed urlを入力することで埋め込むことができます。」
となっているのですがCodeSandBox側のEmbed urlは
https://codesandbox.io/p/devbox/xxxxxx?embed=1&...
というアドレスになっており、記事作成時点からCodeSandBox側で何らかの改修があったものと思われます。

自分で試したこと

CodeSandBoxが埋め込まれている記事のソースを確認してみたのですが最近の記事ではCodeSandBoxが埋め込まれた記事はないようです。

1Answer

@uasi posted at 2025-01-03

URL の /p/devbox/ 部分を /embed/ に書き換えれば埋め込めます。

新しい形式の URL は Qiita に問い合わせれば対応してくれるかもしれません。ただ、今 CodeSandbox のプロジェクトを作って embed URL を発行したら https://codesandbox.io/embed/... になっていました。

0Like

Comments

@nakai1980
Questioner
ありがとうございます。
状況が理解できました。
CodeSandboxでVscodeモードで編集すると/p/devbox/のURLになるようです。
Vscodeモードで編集した/p/devbox/のアドレスを/emded/に置き換えてみましたが
CodeSandBoxがうまく機能しないようです。
Qiita に問い合わせて対応してくれるのを待つしかないようです。

Are you sure you want to delete the question?