https://github.com/egoist/docute-iframe
A docute plugin to run code in docs with an iframe.
https://github.com/egoist/docute-iframe
docute
Last synced: about 1 year ago
JSON representation
A docute plugin to run code in docs with an iframe.
- Host: GitHub
- URL: https://github.com/egoist/docute-iframe
- Owner: egoist
- License: mit
- Created: 2017-03-09T14:25:42.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2021-12-25T13:53:51.000Z (over 4 years ago)
- Last Synced: 2025-04-18T19:20:12.528Z (about 1 year ago)
- Topics: docute
- Language: JavaScript
- Homepage: https://docute.js.org
- Size: 37.1 KB
- Stars: 15
- Watchers: 2
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# docute-iframe
[](https://npmjs.com/package/docute-iframe) [](https://npmjs.com/package/docute-iframe) [](https://circleci.com/gh/egoist/docute-iframe) [](https://github.com/egoist/donate)
A docute plugin to run code in docs with an iframe.
## Usage
*This plugin requires docute^2.9.0*
Include the scripts before running `docute.init`:
```html
```
Then activate the plugin:
```js
docute.init({
plugins: [
docuteIframe()
]
})
```
Finally, you can write some fancy code examples which are `runnable`:
This is a **markdown** file, here it to demonstrate some code:
````html
document.getElementById('example').innerHTML = '<strong>it works</strong>'
````
**Note:** It's similar to gfm code blocks, which use triple backticks, but here you need to use **4 backticks** to mark it as runnable code while still have syntax highlight in your editor.
If the `language` of code block is `js` or `javascript`, it will be automatically wrapped in `` tag and inserted into iframe body, you can [customize it](#parsecontent) though.
## API
### docuteIframe([options])
#### options
##### match
Type: `RegExp`<br>
Default: <code>/^\`{4}(.\*?)[\n\r]+([\s\S]\*?)[\n\r]+\`{4}/gm</code>
The regular expression we use to find runnable code.
##### showSourceCode
Type: `boolean`<br>
Default: `true`
Show highlighted source code before iframe.
##### prepend
Type: `string`
Prepend string to iframe body, eg:
```js
docuteIframe({
prepend: '<script src="https://unpkg.com/vue@2.2.2/dist/vue.min.js">'
})
```
Then you can use `Vue` in your code.
##### append
Same as `prepend` but append to iframe body.
##### sandbox
Type: `string`
Default: `allow-modals allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts`
The `sandbox` attribute of `iframe` element.
##### surfaceAPI
Type: `Array`
Default: `['Prism', 'fetch']`
Deliver some global variables of parent window to iframe, don't deliver variables that rely on `window.document`, since the parent window and iframe have different `document.`
##### parseContent
Type: `function`
Default:
```js
function defaultParseContent(lang, content) {
if (lang === 'js' || lang === 'javascript') {
return `${content}`
}
return content
}
```
## Contributing
1. Fork it!
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -am 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D
## Author
**docute-iframe** © [egoist](https://github.com/egoist), Released under the [MIT](./LICENSE) License.
Authored and maintained by egoist with help from contributors ([list](https://github.com/egoist/docute-iframe/contributors)).
> [egoistian.com](https://egoistian.com) · GitHub [@egoist](https://github.com/egoist) · Twitter [@rem_rin_rin](https://twitter.com/rem_rin_rin)