# ghostkit/2.25.0/gutenberg/components/code-editor/index.js

Block Animations, Motion & Scroll Effects – Ghost Kit, version 2.25.0. 51 lines.

- Page: https://pluginprobe.com/plugins/ghostkit/2.25.0/code/gutenberg/components/code-editor/index.js
- Raw: https://pluginprobe.com/plugins/ghostkit/2.25.0/raw/gutenberg/components/code-editor/index.js
- Modified: 2022-02-07T14:32:38+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/ghostkit/2.25.0/code/gutenberg/components/code-editor/index.js#L10-L20`.

```javascript
/**
 * External dependencies
 */
import AceEditor from 'react-ace';
import 'ace-builds/src-noconflict/mode-css';
import 'ace-builds/src-noconflict/mode-javascript';
import 'ace-builds/src-noconflict/snippets/css';
import 'ace-builds/src-noconflict/snippets/javascript';
import 'ace-builds/src-noconflict/snippets/text';
import 'ace-builds/src-noconflict/ext-language_tools';

/**
 * WordPress dependencies
 */
const { Component } = wp.element;

/**
 * Component Class
 */
export default class CodeEditor extends Component {
  render() {
    return (
      <AceEditor
        className="ghostkit-component-code-editor"
        theme="textmate"
        onLoad={(editor) => {
          editor.renderer.setScrollMargin(16, 16, 16, 16);
          editor.renderer.setPadding(16);
        }}
        fontSize={12}
        showPrintMargin
        showGutter
        highlightActiveLine={false}
        width="100%"
        setOptions={{
          enableBasicAutocompletion: true,
          enableLiveAutocompletion: true,
          enableSnippets: true,
          showLineNumbers: true,
          printMargin: false,
          tabSize: 2,
        }}
        editorProps={{
          $blockScrolling: Infinity,
        }}
        {...this.props}
      />
    );
  }
}

```