vscode-extension-samples/notebook-renderer-sample/README.md

# notebook-renderer-sample

Demonstrates a custom [notebook renderer](https://code.visualstudio.com/api/extension-guides/notebook#notebook-renderer) in VS Code. This creates a custom renderer called `GitHub Issues Plain Renderer` that renders output in a [GitHub Issues Notebook](https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-github-issue-notebooks).

This starter includes:

- 🖥️ TypeScript code to create a simple `NotebookOutputRenderer`
- 📦 A Webpack build for the renderer
- 🎨 CSS modules support

## Running this Sample

Ensure you have a Python installed to actually run the sample and invoke the renderer.

 1. `cd notebook-renderer-sample`
 1. `code .`: Open the folder in VS Code Insiders
 1. Hit `F5` to build+debug
 1. Run the sample notebook
 1. Switch the output rendering by clicking [...] button next to the cell output and then _Change Presentation_

When you select the `x-application/github-issues`, the custom renderer will be invoked.

![Notebook cell output renderer demo](notebook-renderer-sample.gif)
init 2021-08-01 21:30:26 -07:00			`# notebook-renderer-sample`

Update notebook renderer sample - Removes test related code since there are no tests - Removes client/renderer split since there is only a renderer - Simplify webpack logic to align with our webpack sample - Document in top level readme and improve docs 2022-06-27 16:26:30 -07:00			Demonstrates a custom [notebook renderer](https://code.visualstudio.com/api/extension-guides/notebook#notebook-renderer) in VS Code. This creates a custom renderer called `GitHub Issues Plain Renderer` that renders output in a [GitHub Issues Notebook](https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-github-issue-notebooks).
init 2021-08-01 21:30:26 -07:00
			`This starter includes:`

sample notebook 2022-11-29 20:58:49 +01:00			- 🖥️ TypeScript code to create a simple `NotebookOutputRenderer`
			`- 📦 A Webpack build for the renderer`
			`- 🎨 CSS modules support`
init 2021-08-01 21:30:26 -07:00
sample notebook 2022-11-29 20:58:49 +01:00			`## Running this Sample`

			`Ensure you have a Python installed to actually run the sample and invoke the renderer.`
init 2021-08-01 21:30:26 -07:00
			1. `cd notebook-renderer-sample`
sample notebook 2022-11-29 20:58:49 +01:00			1. `code .`: Open the folder in VS Code Insiders
init 2021-08-01 21:30:26 -07:00			1. Hit `F5` to build+debug
sample notebook 2022-11-29 20:58:49 +01:00			`1. Run the sample notebook`
			`1. Switch the output rendering by clicking [...] button next to the cell output and then _Change Presentation_`

			When you select the `x-application/github-issues`, the custom renderer will be invoked.

			`![Notebook cell output renderer demo](notebook-renderer-sample.gif)`