How to change the font and size of script plugin in atom editor

Customizing Script Console Of Atom Editor

Atom is one of the most used open source editor for Python Programming. Its ability to provide IDE like features through the use of Plugins makes it even more desirable choice for programmers. One such IDE like feature is, launching Python Shell to see the output of Python program in the editor itself. The name of the plugin which provide this feature is “Script”.

Script is a plugin which lets you execute a program and see its output in the atom editor itself. Though it is a very useful plugin it has some limitations such as:

  1. Fixed font size

The font size of the output is fixed and there is no easy way to increase or decrease it, though you don’t want to decrease it as it’s already quite small, to the point of being almost unreadable.

  1. Non-adjustable Console Height.

Although we can decrease the height as well as collapse the console completely but we cannot increase it.

Both these problems combined make the output less appealing from the reader’s point of view.

Though there is no easy way to solve both these problems but that doesn’t mean we can’t. In this tutorial, we will configure the console and learn how to set the font size and the height of the console.

How are we going to solve these problems?

To set the font size and the height of the console we need to write some CSS styling code.

Where to access the Stylesheet of Atom Editor?

In order to do the CSS styling we first need to open the stylesheet of the Atom Editor. We can do so through File Menu.

Go to “File” and select “Stylesheet”.

That will open up a file with name “style.less”. That is the file where we will be writing our CSS code.

How to increase the Font Size of the Output?

In order to increase the font size of the output we will target two HTML classes and these two classes are “Script-View” and “Line”.

.script-view .line {
  font-size: 24px;
  margin: 2.5px;
}

Here I’ve set the font size to 24 pixels and margin at 2.5px. I’ve set these values according to my preference. You can set them according to yours. You can see these changes as soon as we will save the file.

How to adjust the console height?

Similar to font size, to adjust the height of the console we will again target two HTML classes, but this time these two classes will be, “Script-view” and “panel-body”.

.script-view .panel-body:after {
  display: block;
  height:35px; 
  content: "";
}

Here in this CSS style block we have used the concepts of pseudo columns and other which I have already explained in the video in detail so I won’t waste your time here. But still, if you want to learn how exactly this CSS is working then I suggest you to go and watch the video, which you can find here.

But for now copy this code into your “style.less” file and save it. If you want you can change the value of the height attribute according to your preference.

Script Console Of Atom Editor Customized

That’s all you have to do, now if you compare the before and after of your output console then you will find out that your output and the console both are looking way more appealing than before.

That’s it for this tutorial. Thanks for reading please make sure to share this blog on your Social Media.

Thanks and have a great day!