Python tutorial 6: Customize the Output console of Script Plugin in Atom Editor by Manish Sharma

Key Takeaways

possible ahead i am manish from rebellionrider.com in this tutorial we will learn how to customize the script console in atom editor in case you don't know what is a script then let me quickly tell you but before that hit the thumbs up button and like the video also this year I'm wishing for one lakh subscribers so please subscribe to the channel if you haven't already now let's start a script is a plugin which lets you execute a program and see its output in the atom editor itself such functionalities are hard to find in a text editor but comes bundled with various IDE s such IDE like features can easily be used in atom editor using plugins I have demonstrated how to install the aforementioned plugin in the previous video I suggest you to go and check it out if you haven't already now the question here is why do we need to customize the script plugins output console to answer this question we will use the same script which we created in the last tutorial this script has only one executable statement for the demonstration this will be enough let's execute and see the output here is our output everything looks perfect except this output console there are two problems here first is the font size we cannot increase or decrease the font size of the output and the second is the height of the console although it allows us to decrease the height as well as collapse it completely but it won't let us increase it both these problems combined make the output less appealing from the readers point of view let's see how to solve these problems that is increase the font size of the output and adjust the height of the console of this script plug-in in atom editor in order to solve these problems we need to write a few lines of CSS code let's do that first go to the file menu and select stylesheet this will open up your style doubtless file here we will do a very simple styling for our output console let's do it let's first increase the font size for the output for that go to the end of the file and write this code to increase the font size we will target two classes of the script plug-in these two class is our script - view and line here I have set the font size to 24 pixels and margin at 2.5 pixel I have 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 let's do that I think our output is looking much better now so our font size problem is solved now let's move on to the second problem which is the height of the output panel let's fix it once again to fix this problem we will have to write some CSS code and that code will be this time in this code we will target script view and panel body class of our output console the first attribute which we will be styling is displaying as we want that our console must take the entire width of the available space and start with a new line thus we have to make sure that it will be treated as a block and not as an inline element the next attribute of which we will be styling is height using this attribute you can set the height of your output console for example I have found that a height of 25 pixels is perfectly suitable for recording these tutorials for me so I will set the height to 25 pixels you can adjust the height of your console according to your preference if you will save these changes you will see that nothing has changed to see these changes we just need to add one more thing to our CSS and that is an empty line to add that empty line we will use the pseudo element of CSS so we want that empty line gets added after all the content gets printed in the console thus first we need to add the indicator after right after the name of the classes next we will add the attribute content this attribute will let us specify the content which we want to add to our element this whole attribute will add an empty line after the entire output gets printed inside the output console now let's save and see the changes now this output is looking great here you can see the before and after comparison of our output console that's it for today hope you enjoyed watching if so then give it a thumbs up and share it with your friends on your social media most importantly subscribe if you haven't already this was a quick video on how to customize the output console of atom editor for Python programming thanks for watching this is manish from rebellionrider.com