@leptosia/docute-run-code
Run code fences in your markdown.
Last updated 2 years ago by egoist .
MIT · Original npm · Tarball · package.json
$ cnpm install @leptosia/docute-run-code 
SYNC missed versions from official npm registry.

@leptosia/docute-run-code

Run code fences in your markdown.

Usage

First load this plugin via <script> tag:

<!-- Load these after docute.js -->
<script src="https://cdn.jsdelivr.net/npm/@leptosia/docute-run-code@1/dist/index.min.js"></script>

This plugin is exposed as window.docuteRunCode:

new Docute({
  // ...
  plugins: [
    docuteRunCode()
  ]
})

Then in code fences, you can use // @run-code comment to indicate that it's runnable:

Here's a demo for [HTM](https://github.com/developit/htm):

```js
// @run-code
import { html, Component, render } from 'https://unpkg.com/htm/preact/standalone.mjs';

class App extends Component {
  addTodo() {
    const { todos = [] } = this.state;
    this.setState({ todos: todos.concat(`Item ${todos.length}`) });
  }
  render({ page }, { todos = [] }) {
    return html`
      <div class="app">
        <${Header} name="ToDo's (${page})" />
        <ul>
          ${todos.map(todo => html`
            <li>${todo}</li>
          `)}
        </ul>
        <button onClick=${this.addTodo.bind(this)}>Add Todo</button>
        <${Footer}>footer content here<//>
      </div>
    `;
  }
}
  
const Header = ({ name }) => html`<header><h1>${name} List</h1></header>`

const Footer = props => html`<footer ...${props} />`

render(html`<${App} page="All" />`, document.body);
```

Supported Languages

  • js: with // @run-code comment
  • javascript: with // @run-code comment
  • html: with <!-- @run-code --> comment

Options

options.noModules

  • Type: boolean
  • Default: undefined

For js or javascript code fences, the code will be wrapped in <script type="module"> tag by default, if you're targeting some browsers that do not support JavaScript modules, pass true here to disable this feature.

options.keepCode

  • Type: boolean
  • Default: false

Remove original code fences.

options.sandbox

  • Type: string
  • Default: 'allow-modals allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts'

The iframe's sanbox attribute.

options.autoResize

  • Type: boolean
  • Default: true

Auto-resize iframe when content height changes.

License

MIT © LEPTOSIA

Current Tags

  • 1.0.2                                ...           latest (2 years ago)

3 Versions

  • 1.0.2                                ...           2 years ago
  • 1.0.1                                ...           2 years ago
  • 1.0.0                                ...           2 years ago
Maintainers (2)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 1
Dependencies (1)
Dev Dependencies (1)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |