応用編① - aw-furuta/ai-chat-app GitHub Wiki

コードブロックにシンタックスハイライトを付けてみよう

完成イメージ

これを
2025-03-22 13 34 21

このように表示されるようにする
2025-03-22 13 09 19

事前準備

react-syntax-highlighterの導入

npm install react-syntax-highlighter @types/react-syntax-highlighter

Claudeに修正版ソースコードを作成してもらう

  • https://claude.ai/new へアクセス
  • app/page.tsxのコードの修正するプロンプトを作成し実行
    • react-syntax-highlighterを使うことを明記すること
  • Claudeのコード生成が完了したら提示されたソースコードをコピーしてapp/page.tsxに貼り付ける
プロンプトの例 
<prompt>
    <system>
        The following source code is for an AI chat app.
        If the AI ​​response contains a code block, I would like it to support syntax highlighting.
    </system>
    
    <features>
        - Use react-syntax-highlighter
    </features>

    <target_source>
     ※※※ここにapp/page.tsxのソースコードを貼り付ける※※※
    </target_source>
</prompt>

動作確認

AIの返答にコードブロックが含まれるような質問を投げかけてみる

例）Javaのサンプルコードを書いてみてください。

下記のように表示されたら成功

2025-03-22 13 39 45

⚠️ **GitHub.com Fallback** ⚠️