https://github.com/zingchart/gitbook-plugin-code-editor
Plugin for Gitbook that displays and runs code from external file. Code is displayed in an Ace editor.
https://github.com/zingchart/gitbook-plugin-code-editor
Last synced: 7 months ago
JSON representation
Plugin for Gitbook that displays and runs code from external file. Code is displayed in an Ace editor.
- Host: GitHub
- URL: https://github.com/zingchart/gitbook-plugin-code-editor
- Owner: zingchart
- License: mit
- Created: 2016-07-06T19:27:34.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2021-02-22T18:40:14.000Z (about 5 years ago)
- Last Synced: 2025-08-09T07:07:30.467Z (9 months ago)
- Language: JavaScript
- Size: 108 KB
- Stars: 13
- Watchers: 12
- Forks: 1
- Open Issues: 4
-
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.
==============
### View/Edit Code in ACE Editor
### Run code in Page
### 1. You can use install it via **NPM** and save it to package.json:
```
$ npm install gitbook-plugin-code-editor --save
```
### 2. Add the plugin to `book.json` config
```
{
"plugins": [ "code-editor"]
}
```
### 3. Include codeeditor blocks in your markdown files.
```
{% codeeditor src='../HTML/4Elements/forms/select.html' %}
{% endcodeeditor %}
```
```
{% codeeditor src='../HTML/4Elements/forms/input.html',
language='javascript', readOnly='true', theme='github' %}
{% endcodeeditor %}
```
```
{% codeeditor src='../HTML/4Elements/forms/meter.html' %}
{% endcodeeditor %}
```
#### General Attributes
* `src` *required* - The relative path to the file that will be displayed in the editor and run in page.
* `singleTab` *optional* - Can be set to `false`, `html`, `result`. If `html` or `result`, only that tab will be shown.
* default: `false`
#### 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
---
# License
MIT License
© 2016 ZingChart, Inc.