<palign="center">

<ahref="https://coderoad.github.io/">

</a>

</p>

<h1align="center">

CodeRoad VSCode

</h1>

This website is built using[Docusaurus 2](https://v2.docusaurus.io/), a modern static website generator.

<palign="center">

<ahref="#"alt="Version"><imgsrc="https://vsmarketplacebadge.apphb.com/version/Coderoad.coderoad.svg" /></a>

<ahref="#"alt="Installs"><imgsrc="https://vsmarketplacebadge.apphb.com/installs/Coderoad.coderoad.svg" /></a>

<ahref="#"alt="Downloads"><imgsrc="https://vsmarketplacebadge.apphb.com/downloads/Coderoad.coderoad.svg" /></a>

</p>


Interactive learning is the most effective way to gain new skills and knowledge. CodeRoad aims to help tutorial creators develop and share interactive content with the community.

This command starts a local development server and open up a browser window. Most changes are reflected live without havingtorestart the server.

For learners, there are a number of advantagestorunning tutorials inside VSCode:

- learn in a real world coding environment

- get rapid feedback on save and helpful error messages

- users own the code, and can build a Git timeline and deploy a portfolio

- open an empty VSCode workspace (an empty folder)

- launch the app from the VSCode command palette:

- select “View” > “Command Palette” from the top panel OR press`cmd/ctrl + shift + P`

- in the command palette, search for and run`CodeRoad:Start`

- a webview should appear on the right side of your editor. Click "Start"

If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the`gh-pages` branch.

Install CodeRoad from[this link in the VSCode Marketplace](https://marketplace.visualstudio.com/items?itemName=CodeRoad.coderoad).

- You may need to reload the window (`ctrl/cmd + R`)

- See["Start"](#start) to get started.

- OS: MacOS, Windows, Linux

- VSCode 1.39.2+

- Node.js 10+

- Git

Read more in the docs about[how CodeRoad works](https://coderoad.github.io/docs/how-coderoad-works).

Build and share your own interactive tutorials.

Learn more about[how tutorials area created](https://coderoad.github.io/docs/build-tutorial).

Tutorials can be edited directly as markdown on Github.

To run the extension locally:

- copy environmental variables from`/web-app/.env.example` as`/web-app/.env`

- install dependencies with`yarn install-all`

- build the extension with`yarn build`

- open the extension with the vscode extension debugger by pressing F5. In the new window, open CodeRoad.

To test a packaged build locally:

- if on Mac, ensure you have[VSCode command line tools](https://code.visualstudio.com/docs/setup/mac#_launching-from-the-command-line) installed

- run`yarn package`. It will build the extension and install it locally.

- open a new vscode window and launch the new version of CodeRoad

CodeRoad is an ambitious project, we're always looking for contributors :)

See[CONTRIBUTING.md](./CONTRIBUTING.md).

[AGPL v3](./LICENSE.md)

navbar:{

title:'CodeRoad',

logo:{

alt:'My Site Logo',

alt:'CodeRoad Logo',

src:'img/logo.svg',

links:[

:root {

--ifm-color-primary:#25c2a0;

--ifm-color-primary:#33a5f1;

--ifm-color-primary-dark:rgb(33,175,144);

--ifm-color-primary-darker:rgb(31,165,136);

--ifm-color-primary-darkest:rgb(26,136,112);

title:<>Your Editor</>,

imageUrl:'img/undraw_docusaurus_mountain.svg',

imageUrl:'img/undraw_editor.svg',

description:<>Playing tutorials in a real-world setting: within your coding editor.</>,

title:<>Your Code</>,

imageUrl:'img/undraw_docusaurus_tree.svg',

imageUrl:'img/undraw_code.svg',

description:<>You own your progress. Save with Git to build your timeline. Deploy to build your portfolio.</>,

title:<>Free&Open</>,

imageUrl:'img/undraw_docusaurus_react.svg',

imageUrl:'img/undraw_open_source.svg',

description:<>CodeRoad is open-source. Build your own tutorials. Contribute to the tooling.</>,