To get the full experience, it is recommended to install this extension as part of the JavsaScript Notebook extension pack.
https://observablehq.com/@observablehq/five-minute-introduction
.ojs
or .omd
extension (optional).https://observablehq.com/@observablehq/a-taste-of-observable
for the import URL.Ctrl+K V
to preview notebook.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: Download Notebook | Download notebook from ObservableHQ | |
OJS: Import Notebook Cells | Import published or shared notebook cells into current document | |
OJS: Export to HTML | Export as a self contained HTML file | |
OJS: Export to ECL | Export as a self contained ECL attribute |
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 |
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)}
~~~
`;
# 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)}
## Credits
This extension would not have been possible without the following:
- [ObservableHQ/parser](https://github.com/observablehq/parser)
- [ObservableHQ/runtime](https://github.com/observablehq/runtime)
- [ObservableHQ/inspector](https://github.com/observablehq/inspector)
- [ObservableHQ/stdlib](https://github.com/observablehq/stdlib)
- [@hpcc-js/observable-md](https://github.com/hpcc-systems/Visualization/tree/master/packages/observable-md)
## Recommended Extensions
Other recommended extensions for working with Observable notebooks formats in [VS Code](https://code.visualstudio.com/):
| Extension | Description |
| ------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
| [Observable JS Notebook Inspector](https://marketplace.visualstudio.com/items?itemName=RandomFractalsInc.js-notebook-inspector) | VS Code extension for Interactive Preview of Observable JS Notebooks, Notebook Nodes, Cells and source code |