How do i get rid of the vertical line appearing in the AceEditor component?

Question

I am using react-ace in my react component

This is the example they provide at npmjs (plus a little bit of costumisation):

import React from "react";
import AceEditor from "react-ace";

import "brace/mode/python";
import "brace/theme/github";

function onChange(newValue) {
  console.log("change", newValue);
}

function CustomAceEditor() {
  return (
    <AceEditor
      mode="python"
      theme="github"
      onChange={onChange}
      name="UNIQUE_ID_OF_DIV"
      editorProps={{ $blockScrolling: true }}
      width="100%"
    />
  );
}

export default CustomAceEditor;

When i compile and execute this code i get the result in the following picture

But as you can see there is vertical line in the view.. how do i get rid of it?

score 2 · Answer 1 · answered Oct 04 '19 at 10:23

I think that line is the Print Margin for the editor. There is a flag to remove it:

showPrintMargin={false}

In your case:

<AceEditor
  mode="python"
  theme="github"
  onChange={onChange}
  showPrintMargin={false}
  name="UNIQUE_ID_OF_DIV"
  editorProps={{ $blockScrolling: true }}
  width="100%"
/>

How do i get rid of the vertical line appearing in the AceEditor component?

1 Answers1