Merge pull request #670 from mjbvz/notebook-md-renderer

Add extended markdown notebook renderer sample

.scripts/samples.js

@@ -246,6 +246,20 @@ const samples = [
     apis: [],
     contributions: []
   },
+  {
+    description: 'notebook-renderer-sample',
+    path: 'notebook-renderer-sample',
+    guide: "/api/extension-guides/notebook#notebook-renderer",
+    apis: [],
+    contributions: ["notebookRenderer"]
+  },
+  {
+    description: 'notebook-extend-markdown-renderer-sample',
+    path: 'notebook-extend-markdown-renderer-sample',
+    guide: "/api/extension-guides/notebook#notebook-renderer",
+    apis: [],
+    contributions: ["notebookRenderer"]
+  },
   { description: 'configuration-sample', excludeFromReadme: true, path: 'configuration-sample', guide: null, apis: [], contributions: [] },
   { description: 'contentprovider-sample', excludeFromReadme: true, path: 'contentprovider-sample', guide: null, apis: [], contributions: [] },
   { description: 'nodefs-provider-sample', excludeFromReadme: true, path: 'nodefs-provider-sample', guide: null, apis: [], contributions: [] },
@@ -258,7 +272,6 @@ const samples = [
   { description: 'helloworld-test-sample', excludeFromReadme: true, path: 'helloworld-test-sample', guide: null, apis: [], contributions: [] },
   { description: 'helloworld-web-sample', excludeFromReadme: true, path: 'helloworld-web-sample', guide: null, apis: [], contributions: [] },
   { description: 'inline-completions', excludeFromReadme: true, path: 'inline-completions', guide: null, apis: [], contributions: [] },
-  { description: 'notebook-renderer-sample', excludeFromReadme: true, path: 'notebook-renderer-sample', guide: null, apis: [], contributions: [] },
   { description: 'notebook-renderer-react-sample', excludeFromReadme: true, path: 'notebook-renderer-react-sample', guide: null, apis: [], contributions: [] },
   { description: 'proposed-api-sample', excludeFromReadme: true, path: 'proposed-api-sample', guide: null, apis: [], contributions: [] },
   { description: 'virtual-document-sample', excludeFromReadme: true, path: 'virtual-document-sample', guide: null, apis: [], contributions: [] },

README.md

@@ -36,6 +36,7 @@ You need to have [node](https://nodejs.org/en/) and [npm](https://nodejs.org/en/
 | ------ | ----- | --- |
 | [Webview Sample](https://github.com/Microsoft/vscode-extension-samples/tree/main/webview-sample) | [/api/extension-guides/webview](https://code.visualstudio.com/api/extension-guides/webview) | [window.createWebviewPanel](https://code.visualstudio.com/api/references/vscode-api#window.createWebviewPanel)<br>[window.registerWebviewPanelSerializer](https://code.visualstudio.com/api/references/vscode-api#window.registerWebviewPanelSerializer) |
 | [Webview View Sample](https://github.com/Microsoft/vscode-extension-samples/tree/main/webview-view-sample) | N/A | [window.registerWebviewViewProvider](https://code.visualstudio.com/api/references/vscode-api#window.registerWebviewViewProvider) |
+| [Webview Codicons Sample](https://github.com/Microsoft/vscode-extension-samples/tree/main/webview-codicons-sample) | N/A |  |
 | [Status Bar Sample](https://github.com/Microsoft/vscode-extension-samples/tree/main/statusbar-sample) | N/A | [window.createStatusBarItem](https://code.visualstudio.com/api/references/vscode-api#window.createStatusBarItem)<br>[StatusBarItem](https://code.visualstudio.com/api/references/vscode-api#StatusBarItem) |
 | [Tree View Sample](https://github.com/Microsoft/vscode-extension-samples/tree/main/tree-view-sample) | [/api/extension-guides/tree-view](https://code.visualstudio.com/api/extension-guides/tree-view) | [window.createTreeView](https://code.visualstudio.com/api/references/vscode-api#window.createTreeView)<br>[window.registerTreeDataProvider](https://code.visualstudio.com/api/references/vscode-api#window.registerTreeDataProvider)<br>[TreeView](https://code.visualstudio.com/api/references/vscode-api#TreeView)<br>[TreeDataProvider](https://code.visualstudio.com/api/references/vscode-api#TreeDataProvider)<br>[contributes.views](https://code.visualstudio.com/api/references/contribution-points#contributes.views)<br>[contributes.viewsContainers](https://code.visualstudio.com/api/references/contribution-points#contributes.viewsContainers) |
 | [Task Provider Sample](https://github.com/Microsoft/vscode-extension-samples/tree/main/task-provider-sample) | [/api/extension-guides/task-provider](https://code.visualstudio.com/api/extension-guides/task-provider) | [tasks.registerTaskProvider](https://code.visualstudio.com/api/references/vscode-api#tasks.registerTaskProvider)<br>[Task](https://code.visualstudio.com/api/references/vscode-api#Task)<br>[ShellExecution](https://code.visualstudio.com/api/references/vscode-api#ShellExecution)<br>[contributes.taskDefinitions](https://code.visualstudio.com/api/references/contribution-points#contributes.taskDefinitions) |
@@ -59,6 +60,10 @@ You need to have [node](https://nodejs.org/en/) and [npm](https://nodejs.org/en/
 | [Call Hierarchy Sample](https://github.com/Microsoft/vscode-extension-samples/tree/main/call-hierarchy-sample) | N/A | [languages.registerCallHierarchyProvider](https://code.visualstudio.com/api/references/vscode-api#languages.registerCallHierarchyProvider)<br>[CallHierarchyProvider](https://code.visualstudio.com/api/references/vscode-api#CallHierarchyProvider)<br>[CallHierarchyItem](https://code.visualstudio.com/api/references/vscode-api#CallHierarchyItem)<br>[CallHierarchyOutgoingCall](https://code.visualstudio.com/api/references/vscode-api#CallHierarchyOutgoingCall)<br>[CallHierarchyIncomingCall](https://code.visualstudio.com/api/references/vscode-api#CallHierarchyIncomingCall) |
 | [Custom Editors Sample](https://github.com/Microsoft/vscode-extension-samples/tree/main/custom-editor-sample) | [/api/extension-guides/custom-editors](https://code.visualstudio.com/api/extension-guides/custom-editors) | [window.registerCustomEditorProvider](https://code.visualstudio.com/api/references/vscode-api#window.registerCustomEditorProvider)<br>[CustomTextEditorProvider](https://code.visualstudio.com/api/references/vscode-api#CustomTextEditorProvider)<br>[contributes.customEditors](https://code.visualstudio.com/api/references/contribution-points#contributes.customEditors) |
 | [Semantic tokens](https://github.com/Microsoft/vscode-extension-samples/tree/main/semantic-tokens-sample) | [/api/language-extensions/semantic-highlight-guide](https://code.visualstudio.com/api/language-extensions/semantic-highlight-guide) | [languages.registerDocumentSemanticTokensProvider](https://code.visualstudio.com/api/references/vscode-api#languages.registerDocumentSemanticTokensProvider)<br>[vscode.DocumentSemanticTokensProvider](https://code.visualstudio.com/api/references/vscode-api#vscode.DocumentSemanticTokensProvider) |
+| [Test Provider Sample](https://github.com/Microsoft/vscode-extension-samples/tree/main/test-provider-sample) | N/A |  |
+| [Getting Started Sample](https://github.com/Microsoft/vscode-extension-samples/tree/main/getting-started-sample) | N/A |  |
+| [notebook-renderer-sample](https://github.com/Microsoft/vscode-extension-samples/tree/main/notebook-renderer-sample) | [/api/extension-guides/notebook#notebook-renderer](https://code.visualstudio.com/api/extension-guides/notebook#notebook-renderer) | [contributes.notebookRenderer](https://code.visualstudio.com/api/references/contribution-points#contributes.notebookRenderer) |
+| [notebook-extend-markdown-renderer-sample](https://github.com/Microsoft/vscode-extension-samples/tree/main/notebook-extend-markdown-renderer-sample) | [/api/extension-guides/notebook#notebook-renderer](https://code.visualstudio.com/api/extension-guides/notebook#notebook-renderer) | [contributes.notebookRenderer](https://code.visualstudio.com/api/references/contribution-points#contributes.notebookRenderer) |
 <!-- SAMPLES_END -->
 
 ### Language Server Protocol Samples
@@ -71,6 +76,7 @@ You need to have [node](https://nodejs.org/en/) and [npm](https://nodejs.org/en/
 | [LSP Sample](https://github.com/Microsoft/vscode-extension-samples/tree/main/lsp-sample) | [/api/language-extensions/language-server-extension-guide](https://code.visualstudio.com/api/language-extensions/language-server-extension-guide) |  |
 | [LSP Log Streaming Sample](https://github.com/Microsoft/vscode-extension-samples/tree/main/lsp-log-streaming-sample) | N/A |  |
 | [LSP Multi Root Server Sample](https://github.com/Microsoft/vscode-extension-samples/tree/main/lsp-multi-server-sample) | https://github.com/Microsoft/vscode/wiki/Extension-Authoring:-Adopting-Multi-Root-Workspace-APIs#language-client--language-server |  |
+| [LSP Web Extension Sample](https://github.com/Microsoft/vscode-extension-samples/tree/main/lsp-web-extension-sample) | [/api/language-extensions/language-server-extension-guide](https://code.visualstudio.com/api/language-extensions/language-server-extension-guide) |  |
 <!-- LSP_SAMPLES_END -->
 
 ## License

notebook-extend-markdown-renderer-sample/.eslintrc.json

@@ -0,0 +1,17 @@
+{
+    "root": true,
+    "parser": "@typescript-eslint/parser",
+    "plugins": [
+        "@typescript-eslint"
+    ],
+    "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended"
+    ],
+    "ignorePatterns": [
+        "webpack.config.js"
+    ],
+    "rules": {
+        "@typescript-eslint/no-var-requires": 0
+    }
+}

notebook-extend-markdown-renderer-sample/.vscode/extensions.json

@@ -0,0 +1,8 @@
+{
+  // See http://go.microsoft.com/fwlink/?LinkId=827846
+  // for the documentation about the extensions.json format
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "eamodio.tsl-problem-matcher"
+  ]
+}

notebook-extend-markdown-renderer-sample/.vscode/launch.json

@@ -0,0 +1,19 @@
+// A launch configuration that compiles the extension and then opens it inside a new window
+{
+  "version": "0.2.0",
+  "configurations": [
+      {
+          "name": "Launch Extension",
+          "type": "extensionHost",
+          "request": "launch",
+          "runtimeExecutable": "${execPath}",
+          "args": [
+              "--extensionDevelopmentPath=${workspaceFolder}"
+          ],
+          "outFiles": [
+              "${workspaceFolder}/dist/**/*.js"
+          ],
+          "preLaunchTask": "npm: webpack"
+      }
+  ]
+}

notebook-extend-markdown-renderer-sample/.vscode/settings.json

@@ -0,0 +1,11 @@
+// Place your settings in this file to overwrite default and user settings.
+{
+  "files.exclude": {
+    "out": false // set this to true to hide the "out" folder with the compiled JS files
+  },
+  "search.exclude": {
+    "out": true // set this to false to include "out" folder in search results
+  },
+  // Turn off tsc task auto detection since we have the necessary tasks as npm scripts
+  "typescript.tsc.autoDetect": "off"
+}

notebook-extend-markdown-renderer-sample/.vscodeignore

@@ -0,0 +1,12 @@
+.vscode/**
+.vscode-test/**
+out/test/**
+src/**
+.gitignore
+.yarnrc
+vsc-extension-quickstart.md
+**/tsconfig.json
+**/.eslintrc.json
+**/*.map
+**/*.ts
+**/*.tsbuildinfo

notebook-extend-markdown-renderer-sample/README.md

@@ -0,0 +1,11 @@
+# Notebook Extend Markdown Renderer Sample
+
+Demonstrates a how a custom [notebook renderer](https://code.visualstudio.com/api/extension-guides/notebook#notebook-renderer) can extend VS Code's built-in notebook markdown renderer (similar approaches can be used to extend other notebook renderers).
+
+This extension adds `:emoji:` rendering support to the built-in markdown renderer used for notebooks. Try it out by writing: `:cat:` or `:smile:` in a markdown cell.
+
+### Running this Sample
+
+ 1. `cd notebook-extend-markdown-renderer-sample`
+ 1. `code-insiders .`: Open the folder in VS Code Insiders
+ 1. Hit `F5` to build+debug

notebook-extend-markdown-renderer-sample/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "notebook-extend-markdown-renderer-sample",
+  "displayName": "notebook-extend-markdown-renderer-sample",
+  "description": "Example of a Notebook renderer that extends VS Code's built-in notebook markdown rendering with :emoji: support.",
+  "version": "0.0.1",
+  "private": true,
+  "license": "MIT",
+  "engines": {
+    "vscode": "^1.69.0"
+  },
+  "categories": [
+    "Other"
+  ],
+  "contributes": {
+    "notebookRenderer": [
+      {
+        "id": "markdownItRenderer-emoji",
+        "displayName": "Markdown it Emoji renderer",
+        "entrypoint": {
+          "extends": "markdownItRenderer",
+          "path": "./out/emoji.js"
+        }
+      }
+    ]
+  },
+  "scripts": {
+    "vscode:prepublish": "webpack --mode production",
+    "webpack": "webpack --mode development",
+    "webpack-dev": "webpack --mode development --watch",
+    "test-compile": "tsc -p ./",
+    "lint": "eslint src --ext .ts"
+  },
+  "devDependencies": {
+    "@types/markdown-it": "^12.2.3",
+    "@types/vscode-notebook-renderer": "^1.57.8",
+    "@types/webpack-env": "^1.17.0",
+    "@typescript-eslint/eslint-plugin": "^5.19.0",
+    "@typescript-eslint/parser": "^5.19.0",
+    "eslint": "^8.13.0",
+    "markdown-it-emoji": "^2.0.2",
+    "ts-loader": "^9.2.2",
+    "typescript": "^4.7.2",
+    "webpack": "^5.38.1",
+    "webpack-cli": "^4.7.0"
+  }
+}

notebook-extend-markdown-renderer-sample/src/emoji.ts

@@ -0,0 +1,23 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+import type * as MarkdownIt from 'markdown-it';
+import type { RendererContext } from 'vscode-notebook-renderer';
+
+interface MarkdownItRenderer {
+    extendMarkdownIt(fn: (md: MarkdownIt) => void): void;
+}
+
+export async function activate(ctx: RendererContext<void>) {
+    const markdownItRenderer = await ctx.getRenderer('markdownItRenderer') as MarkdownItRenderer | undefined;
+    if (!markdownItRenderer) {
+        throw new Error('Could not load markdownItRenderer');
+    }
+
+    const emoji = require('markdown-it-emoji');
+    markdownItRenderer.extendMarkdownIt((md: MarkdownIt) => {
+        return md.use(emoji, {});
+    })
+}
+ 

notebook-extend-markdown-renderer-sample/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "out",
+    "module": "esnext",
+    "target": "es2020",
+    "lib": [
+      "es2020",
+      "dom"
+    ],
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "strict": true
+  }
+}

notebook-extend-markdown-renderer-sample/webpack.config.js

@@ -0,0 +1,39 @@
+const path = require('path');
+
+const outputFilename = 'emoji.js';
+
+module.exports = (env, argv) => ({
+  mode: argv.mode,
+  devtool: argv.mode === 'production' ? false : 'inline-source-map',
+  entry: './src/emoji.ts',
+  output: {
+    path: path.join(__dirname, 'out'),
+    filename: outputFilename,
+    publicPath: '',
+    libraryTarget: 'module',
+  },
+  resolve: {
+    extensions: ['.ts', '.tsx', '.js', '.jsx'],
+  },
+  experiments: {
+      outputModule: true,
+  },
+  module: {
+    rules: [
+      // Allow importing ts(x) files:
+      {
+        test: /\.tsx?$/,
+        loader: 'ts-loader',
+        options: {
+          configFile: path.join(__dirname, 'tsconfig.json'),
+          // transpileOnly enables hot-module-replacement
+          transpileOnly: true,
+          compilerOptions: {
+            // Overwrite the noEmit from the client's tsconfig
+            noEmit: false,
+          },
+        },
+      },
+    ],
+  },
+});