Observable JavaScript | Markdown

VS Code extension for Observable "JavaScript" and "Markdown". This extension would not have been possible without the following:

Quick Start with Observable JavaScript | Markdown

Create a new file with either the .ojs or .omd extension.
Select "OJS: Import Notebook" from command palette.
Enter https://observablehq.com/@observablehq/a-taste-of-observable for the import URL.
Press Ctrl+K V to preview notebook.
Select "OJS: Export to HTML" from the command palette.
Double click the exported HTML file to view in browser (Note: You may need to host the file on a webserver if it is importing other libraries).

Commands

All commands are prefixed with "OJS" and are available via the command palette or by default shortcut key mappings

Command	Shortcut	Description
OJS: Check Syntax	F7	Syntax Check
OJS: Preview Web Page	Ctrl+K V	Preview notebook in an embedded Web Page
OJS: Import Notebook		Import published or shared notebook cells into current document
OJS: Export to HTML		Export as a self contained HTML file

Settings

All settings are prefixed with "ojs." and are available via file -> preferneces -> settings menu

Setting	Default	Description
ojs.refreshPreviewOnSave	true	Refresh preview (if visible) when OJS document is saved
ojs.showRuntimeValues	false	Show runtime values as diagnostic info

Sample OJS File (myfile.ojs)

md`# Generator Test`;

function* range(n) {
  for (let i = 0; i < n; ++i) {
    yield i;
  }
}

{
  for (const i of range(Infinity)) {
    yield Promises.tick(1000, i + 1);
  }
}

md`# Import Test`;

import {viewof selection as cars} from "@d3/brushable-scatterplot";
viewof cars;

md`### Selection:
~~~json
${JSON.stringify(cars, undefined, 2)}
~~~
`;

Sample OMD File (myfile.omd)

# Generator Test
_Simple Generator test_

```
function* range(n) {
  for (let i = 0; i < n; ++i) {
    yield i;
  }
}

{
  for (const i of range(Infinity)) {
    yield Promises.tick(1000, i + 1);
  }
}
```

# Import Test
_Simple Import Test_

```
import {viewof selection as cars} from "@d3/brushable-scatterplot";
viewof cars;
```

### Selection:

```json 
${JSON.stringify(cars, undefined, 2)}
```

Recommended Extensions

Other recommended extensions for working with Observable notebooks formats in VSCode:

Extension	Description
Observable JS Notebook Inspector	VSCode extension for Interactive Preview of Observable JS Notebooks, Notebook Nodes, Cells and source code

joaomoreno / vscode-ojs