Markdown Rendering Issue in Copilot Chat

[iancarv]

Type: Bug

When I ask GitHub Copilot to generate a markdown file, Copilot Chat only partially renders the markdown in the code text box. The remaining content is wrongly rendered as part of the Copilot response rather than as markdown.

Steps to Reproduce:

Open Visual Studio Code.
Activate GitHub Copilot Chat.
Request Copilot to generate a markdown file (e.g., a README.md file).
Observe the output in the Copilot Chat response.
Expected Behavior: The entire markdown content should be rendered within a single code text box.

Extension version: 0.20.0
VS Code version: Code 1.93.0 (4849ca9bdf9666755eb463db297b69e5385090e3, 2024-09-04T13:02:38.431Z)
OS version: Linux x64 5.4.0-193-generic snap
Modes:

System Info

Item	Value
CPUs	AMD Ryzen 9 3900X 12-Core Processor (24 x 2195)
GPU Status	2d_canvas: enabled canvas_oop_rasterization: enabled_on direct_rendering_display_compositor: disabled_off_ok gpu_compositing: enabled multiple_raster_threads: enabled_on opengl: enabled_on rasterization: enabled raw_draw: disabled_off_ok skia_graphite: disabled_off video_decode: enabled video_encode: disabled_software vulkan: disabled_off webgl: enabled webgl2: enabled webgpu: disabled_off webnn: disabled_off
Load (avg)	1, 2, 2
Memory (System)	31.35GB (25.26GB free)
Process Argv	--no-sandbox --force-user-env --crash-reporter-id 757b6cd4-29eb-46cc-9866-40d049335b55
Screen Reader	no
VM	0%
DESKTOP_SESSION	ubuntu
XDG_CURRENT_DESKTOP	Unity
XDG_SESSION_DESKTOP	ubuntu
XDG_SESSION_TYPE	x11

A/B Experiments

vsliv368:30146709
vspor879:30202332
vspor708:30202333
vspor363:30204092
vscod805cf:30301675
binariesv615:30325510
vsaa593:30376534
py29gd2263:31024239
c4g48928:30535728
azure-dev_surveyone:30548225
2i9eh265:30646982
962ge761:30959799
pythongtdpath:30769146
welcomedialog:30910333
pythonnoceb:30805159
asynctok:30898717
pythonmypyd1:30879173
h48ei257:31000450
pythontbext0:30879054
accentitlementsc:30995553
dsvsc016:30899300
dsvsc017:30899301
dsvsc018:30899302
cppperfnew:31000557
dsvsc020:30976470
pythonait:31006305
dsvsc021:30996838
01bff139:31013167
a69g1124:31058053
dvdeprecation:31068756
dwnewjupyter:31046869
2f103344:31071589
impr_priority:31102340
nativerepl1:31104043
refactort:31108082
pythonrstrctxt:31112756
flightc:31119335
wkspc-onlycs-t:31132770
wkspc-ranged-t:31125599
ei213698:31121563

[roblourens]

Can you give a specific example? Screenshot and the chat response (right click > copy) would help

[iancarv]

I would expect 2. Set up a virtual environment: and everything below to bet inside the Code block.
It may be an issue closing ``` after the sh block

This is the actual response

Plan

1. Title and Description: Provide a brief description of the Flask application.
2. Table of Contents: List the sections included in the README.
3. Installation: Provide steps to clone the repository, set up a virtual environment, and install dependencies.
4. Running the App: Instructions to run the Flask application.
5. Testing: Instructions to run tests.
6. Deployment: Basic instructions for deploying the Flask app.

Code

# Flask App

This is a Flask application designed to [briefly describe the purpose of your app]. This project uses Flask for backend services and supports various deployment options.

## Table of Contents

- [Installation](#installation)
- [Running the App](#running-the-app)
- [Testing](#testing)
- [Deployment](#deployment)

## Installation

1. **Clone the repository:**
   ```sh
   git clone https://github.com/yourusername/flask_app.git
   cd flask_app

2. Set up a virtual environment:

   python3 -m venv venv
   source venv/bin/activate

3. Install dependencies:

   pip install -r requirements.txt

Running the App

1. Set environment variables:

   export FLASK_APP=app.py
   export FLASK_ENV=development

2. Run the application:

   flask run

Testing

To run tests, use the following command:

pytest

Deployment

To deploy the Flask application, follow these steps:

1. Set up a production environment (e.g., using Gunicorn and Nginx).
2. Configure environment variables for production.
3. Run the application with Gunicorn:

   gunicorn -w 4 -b 0.0.0.0:8000 app:app

For detailed deployment instructions, refer to the Flask documentation or your hosting provider's guidelines.

[iancarv]

The expected response should look something like this.

Plan

1. Title and Description: Provide a brief description of the Flask application.
2. Table of Contents: List the sections included in the README.
3. Installation: Provide steps to clone the repository, set up a virtual environment, and install dependencies.
4. Running the App: Instructions to run the Flask application.
5. Testing: Instructions to run tests.
6. Deployment: Basic instructions for deploying the Flask app.

Code

# Flask App

This is a Flask application designed to [briefly describe the purpose of your app]. This project uses Flask for backend services and supports various deployment options.

## Table of Contents

- [Installation](#installation)
- [Running the App](#running-the-app)
- [Testing](#testing)
- [Deployment](#deployment)

## Installation

1. **Clone the repository:**
   ```sh
   git clone https://github.com/yourusername/flask_app.git
   cd flask_app
   ```

2. **Set up a virtual environment:**
   ```sh
   python3 -m venv venv
   source venv/bin/activate
   ```

3. **Install dependencies:**
   ```sh
   pip install -r requirements.txt
   ```

## Running the App

1. **Set environment variables:**
   ```sh
   export FLASK_APP=app.py
   export FLASK_ENV=development
   ```

2. **Run the application:**
   ```sh
   flask run
   ```

## Testing

To run tests, use the following command:
```sh
pytest
```

## Deployment

To deploy the Flask application, follow these steps:

1. **Set up a production environment** (e.g., using Gunicorn and Nginx).
2. **Configure environment variables** for production.
3. **Run the application with Gunicorn:**
   ```sh
   gunicorn -w 4 -b 0.0.0.0:8000 app:app
   ```

For detailed deployment instructions, refer to the Flask documentation or your hosting provider's guidelines.
```

[iancarv]

After trying to write the expected response in here, I got a pretty go sense that it is an issue with the 3-backticks within the 3-backtick block.
Maybe using tildes as the wrapper of the response would be a good idea to prevent this

[roblourens]

Thanks for sharing that. Yeah, it doesn't really know how to do nested codeblocks. Adding this to #793, it struggles with some markdown patterns.