# docusaurus-plugin-learn-with-code

> ![demo](./docs/demo.gif)

Latest version **2.0.2** (published 2022-04-26) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install docusaurus-plugin-learn-with-code
pnpm add docusaurus-plugin-learn-with-code
yarn add docusaurus-plugin-learn-with-code
bun add docusaurus-plugin-learn-with-code
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.2 |
| Published | 2022-04-26 |
| First published | 2022-03-29 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 8 |
| Unpacked size | 34.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Palo Alto Networks |
| Maintainers | demistodev |
| Keywords | docusaurus, remark, mdx, plugin, monaco-editor |

## Links

- npm: https://www.npmjs.com/package/docusaurus-plugin-learn-with-code
- Repository: https://github.com/demisto/docusaurus-plugin-learn-with-code
- Homepage: https://github.com/demisto/docusaurus-plugin-learn-with-code#readme
- Issues: https://github.com/demisto/docusaurus-plugin-learn-with-code/issues
- npm.io page: https://npm.io/package/docusaurus-plugin-learn-with-code

## Dependencies (8)

- [css-loader](https://npm.io/package/css-loader.md) ^6.7.1
- [raw-loader](https://npm.io/package/raw-loader.md) ^4.0.2
- [file-loader](https://npm.io/package/file-loader.md) ^6.2.0
- [style-loader](https://npm.io/package/style-loader.md) ^3.3.1
- [monaco-editor](https://npm.io/package/monaco-editor.md) ^0.33.0
- [unist-util-visit](https://npm.io/package/unist-util-visit.md) ^2.0.0
- [react-monaco-editor](https://npm.io/package/react-monaco-editor.md) ^0.47.0
- [monaco-editor-webpack-plugin](https://npm.io/package/monaco-editor-webpack-plugin.md) ^7.0.1

## Alternatives

- [@mdxeditor/editor](https://npm.io/package/@mdxeditor/editor.md) — 962.4K weekly downloads
- [mmdb-lib](https://npm.io/package/mmdb-lib.md) — 680.9K weekly downloads
- [playcanvas](https://npm.io/package/playcanvas.md) — 36.2K weekly downloads
- [@glw907/cairn-cms](https://npm.io/package/@glw907/cairn-cms.md) — 967 weekly downloads
- [markdown-to-confluence](https://npm.io/package/markdown-to-confluence.md) — 103 weekly downloads

## Recent versions

- 2.0.2 (latest) — 2022-04-26
- 2.0.1 — 2022-04-24
- 2.0.0 — 2022-04-20
- 1.0.0 — 2022-03-29

## README

# docusaurus-plugin-learn-with-code

![demo](./docs/demo.gif)

## Install
```bash
npm install docusaurus-plugin-learn-with-code
```
## Configuration
In `docusaurus.config.js`:

```js
 presets: [
    [
      {
        docs: {
          remarkPlugins: [require('docusaurus-plugin-learn-with-code')]
        }
      }
    ]
 ],
 plugins: [
    require('docusaurus-plugin-learn-with-code/lib/monaco-editor')
 ]
```
# Requirments
The plugin is supported for version **2.0.0-beta.1** of docusaurus and up.

## Usage
Input can be either file paths (`.txt`, `.py` etc) or an inline text.

Assuming the Python files exist (e.g. `original.py` and `solution.py`) in the same directory as the document:

Use the component in `.mdx`, `.jsx` or `.tsx` files:

```jsx
import { LearningEditor } from 'docusaurus-plugin-learn-with-code/LearningEditor';
import original from '!!raw-loader!./original.py';
import solution from '!!raw-loader!./solution.py';

<LearningEditor 
    original={original}
    solution={solution}
    language='python'
/>
```    
Use code blocks in `.md` or `.mdx` files.

````md
```LearningEditor
original='original.py'
solution='great solution'
language='python'
```
````

**Notes:**
1. The input for the `original` and `solution` props should be wrapped with `'` chars only.
2. You can use the `language` prop to select your coding language, the default is `python`.

## Contributing
Contributions are welcome and appreciated. If you find a bug or have suggestions for improvements, feel free to open an [Issue](https://github.com/demisto/docusaurus-plugin-learn-with-code/issues) or (better yet) submit a [Pull Request](https://github.com/demisto/docusaurus-plugin-learn-with-code/pulls). 

Before merging any PRs, we need all contributors to sign a contributor license agreement. By signing a contributor license agreement, we ensure that the community is free to use your contributions.

When you open a new pull request, a bot will evaluate whether you have signed the CLA. If required, the bot will comment on the pull request, including a link to accept the agreement. The CLA document is also available for review as a [PDF](https://github.com/demisto/content/blob/master/docs/cla.pdf).

If the `license/cla` status check remains on *Pending*, even though all contributors have accepted the CLA, you can recheck the CLA status by visiting the following link (replace **[PRID]** with the ID of your PR): https://cla-assistant.io/check/demisto/docusaurus-plugin-learn-with-code?pullRequest=[PRID] .

---
_Source: https://npm.io/package/docusaurus-plugin-learn-with-code · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._