https://github.com/zingchart/gitbook-plugin-include-display-run
Plugin for Gitbook that displays and runs code from external file.
https://github.com/zingchart/gitbook-plugin-include-display-run
Last synced: 6 months ago
JSON representation
Plugin for Gitbook that displays and runs code from external file.
- Host: GitHub
- URL: https://github.com/zingchart/gitbook-plugin-include-display-run
- Owner: zingchart
- License: mit
- Created: 2016-07-06T20:52:03.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2021-02-22T18:39:40.000Z (about 5 years ago)
- Last Synced: 2025-01-28T05:15:23.261Z (about 1 year ago)
- Language: JavaScript
- Size: 4.88 KB
- Stars: 0
- Watchers: 9
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 2021 UPDATE:
**This plugin is no longer maintained. It will not work with newer versions of GitBook. This repository exists purely for historical reasons. No further updates will be made.**
GitBook Plugin to display and run included files.
==============
### 1. You can use install it via **NPM** and save it to package.json:
```
$ npm install gitbook-plugin-include-display-run --save
```
### 2. Add the plugin to `book.json` config
```
{
"plugins": [ "include-display-run"]
}
```
### 3. Include displayrun block in your markdown files.
```
{% displayrun src='../HTML/4Elements/forms/select.html' %}
{% enddisplayrun %}
```
```
{% displayrun src='../HTML/4Elements/forms/input.html', display='editor',
language='javascript', readOnly='true', theme='github' %}
{% enddisplayrun %}
```
```
{% displayrun src='../HTML/4Elements/forms/meter.html', display='run' %}
{% enddisplayrun %}
```
#### General Attributes
* `src` *required* - The relative path to the file that will be displayed in the editor and run in page.
* `display` *optional* - Indicates how the code is included in the page. Options are: `['both', 'editor', 'run']`
* default: `both`
* `separator` *optional* - Any text/HTML that should be used between the editor and the executed code if the `display` option is set to `both`
* default: `
`
#### Editor Attributes
We are using an ACE editor for the editor. We currently support the following attributes.
* `language` *optional* - Sets the programming language mode to be used in the syntax highlighter. The full list of supported languages can be found in the [Ace Editor Repository](https://github.com/ajaxorg/ace-builds/tree/master/src-min-noconflict).
* default: `html`
* `theme` *optional* - Sets the Ace Editor Theme. The full list of supported themes can be found in the [Ace Editor Repository](https://github.com/ajaxorg/ace/tree/master/lib/ace/theme).
* default: `chrome`
* `readOnly` *optional* - If set to `true`, the editor will not be editable.
* default: `false`
* `maxLines` *optional* - Sets the maximum number of lines that will be visible in the editor.
* default: 25
#### Executed Code Attributes
The executed code displays in an iframe in order to preserve any items in the `` that may be necessary for the example.
* `height` *optional* - Sets the height of the iframe
* default: 300
* `runStyle` *optional* - Sets the style of the iframe element
* default: `border:0`
---
# License
MIT License
© 2016 ZingChart, Inc.