Styling the Terminal The Way You Want It....

Styling the Terminal The Way You Want It....

Wanna feel like a boss?

Hey bud bud. I hope you are having a good day, if not well maybe I could give you something to help you a bit. My gift for you is when you look at that the balck souless window that is known as the 'Terminal' or in industospeak 'The Command Line'...dont you wish that it looked like something that you idk 'enjoy looking at?'

This is something that we developers(Im using that word loosy to desribe myself), I will rephrase: Us aspiring developers, we seem to find alot of mystery is involved when having to work with the Command Line.

For many of us, we still have some linguring PTSD effect from when we accidentally stubmled onto MS-DOS, we would see that same black souless screen, unless you knew what the commands were and what you are doing, well you were like me, quick to quit the window and pretend that all was well and you didnt seriously brick your computer, you just bricked your pants instead, which was alot cheaper to replace back in those days.

So last night I was working in one of my folders in the terminal and it was really fricken long...like if i types in cd it was broken across two lines. Now you might just say; resize the window, nugluts. Aye I did, often, but there is only so much screen-estate that I am willing to give to it before something had to give.

What that something was was me, I gave in. Not as if the Terminal would intuitively go "Ah, Peter, seems like you're having a problem with the terminal, I know cause you are always resizing me, why dont I make your life easier?"

This got me looking at the internet at everyone elses pretty terminals, and I kinda wanted one aswell...So then I went googlewhacking for ways to style ones own terminal.

I came across two really notable and helpful sites that I would like to share, the rest was a dumpster of articles filled with indusospeak and written by those evangelical-egotisitcal nerd's who spent more time writting scripts for computers than sentences for us pathetic humans.

Now let me share with you how I went about styling my own terminal window and I swear, you do this you will feel like a boss as well.

Context

As with everything context is king so let me quickly explain the background before we get going.

I am currently running a Windows 10 build, with Windows SubSystem for Linux or in industospeak $wsl. This is windows biggest admission that Linux has won, or will win and the next windows release will probably be a linux distribution with a windows skin...It lets windows users install linux envrioments on the computers and lets you work seamlessly between the two operating systems, before this to say it was a major pain in the lateral gluteus maximus was prehaps an understatement.

Why do you need to get some experince with Linux? because like I kinda elluded to in the last paragraph. Linux is a huge fricken deal, its on everything, it practially empowers the internet. For us 'aspiring' developers, its just another [important] thing to learn ontop of all the other things.

On my $wsl I am currently running the lastest Ubuntu distribution, and that is it for the enviroment side of things. This process will work on most 'Bash' based terminals. What is Bash you ask? Well decyphering this [small article] (gnu.org/software/bash/manual/html_node/What..) Bash is a 'command language interpreter' or more colloqually called a 'shell'. Why is it called Bash? Its like with other things in an acronymic industry, its an stands for Bourne-Again Shell like the Jason Bourne films where as it never dies and has the power to do some emotionless ass-kickery. In a techincal computery way. Bash is the near defualt shell on practically most** Unix( if you dont know google it) operating systems. To say its ubiqutious is again another woeful understatement.

Lets Bash something together =)

Okay so bash/shell/terminal/commandLine, is something that we all have in common. There is a couple of tools out there that would make your shell look really and I mean really pretty, the best one out there is "ohmyzzh"...personally its to frilly for me, to many bells and far to many whistles for me to get a tune going. Plus it kinda defeats the purpose of doing it yourself and letting someone else deal with the technical stuff. (ideal but counter intuitive to the overall learning process)

When one would load up the terminal they would see a prompt kinda similar to this:

Breaking down the terminal.png

So my problem was that this string, would keep growing. Now its important to note that this isnt some trival string either, it does contain useful information. But its sure AF conveyed in an awful way.

This string is a programable command prompt, it can in fact be editted to suit any number of connotations. The file that store the instructions for the Bash terminal, how its displyed etc... is all held in a special file in the root directory of the computer. If you type in cd into the terminal it would take you straight to the root of your linux enviroments directories. From here if you ls or list the files in there it wouldnt show you the bash file, although it is there. What we are looking for is a file called .bashrc it is worth to note that before we go anywhere its best to take a backup of this file, best way to do that is to type in: cp .bashrc .bashrc.backup this takes the exact copy of the file and puts an extra extention on the back of it, differentiating it from the actual .bashrc file that the shell needs everytime it opens a new terminal window.

Best way to open and edit the .bashrc file is by using VS Code which if you have installed on the Linux enviroment can be opened by typing code .bashrc which should open you up with a very serious and complicated looking file.

It is in here lies the power to control the bash enviroment. Here we are looking for this particular bit of code:

Bash-prompt string.png

Dont worry about how this looks, I will quickly explain whats happening here

PS1='${debian_chroot:+($debian_chroot)}

This we can forget about, just dont edit this part, we really arnt intrested in it. We are intersted in that eyesore that comes after.

\[\033[01;32m\]\u@\h\[\033[00m\]:\[\033[01;34m\]\w\[\033[00m\]\$

Like I said, its a real eye-sore. Lets break it down some parts. First the most intrusive bit is this[\033[01;3(0-4)m\] This is the code for a colour block. This is in part what we would be editing. The \033 is the colour prefix for bash, within the acutal block is the attribute and colour code[Attribute ; ColourCode] The next part of this is the \u@\h\w\$ noise. This is split into two parts, the \u\h\w are commands for the shell to follow, the \u represents the User part of the String that was shown earlier (Peter) the @ symbol is just that an @ character, it has no special powers, infact you can write full strings of sentences filled with all the various special characters in here if you wished, but we would come to that in a few mins. \h represents the hostname\w represents the Path or 'working directory'. Now there is a few more commands that we can make use of but there is an even better site that lets you build out your own prompt using a drag and drop interface, which I highly recommend using for this part as it can get nippy to get right. Link to Bashrc Generator

Styling the Prompt

Once you have your string literal from the the Bashrc Generator we need to add some colour to this, best thing to do is take this following block of code: \[\033[AT;(Text (3)/Background(4)ColourCode m\] and insert it before the commands as shown above. This would make it 100x easier to place the colours and attributes in and make small modifications till you get it right.

The 'AT' represents the Attributes you want the text to display, this could be like if you wish for a part of it to be bold, underlines, blinking at you or even dimmed in relation to the other text.

The next part is a mess, however you can change not only the colour of the actual text but the background colour of that string itself. Which is really cool, now text colours is represented by the number 3, followed by the code for the colour you wish to make it. Same thing for the Background colour. Now dont mix these together, set one block for the text and one block for the background side by side in front of the shell commandes that you want to style

Now you must be wondering what the colour and attribute codes are, well here is a table for you: For your reference, here are the foreground and background color codes. Foreground colors are in the 30 range, while background colors are in the 40 range:

ColorForegroundBackground
Black\033[30m\033[40m
Red\033[31m\033[41m
Green\033[32m\033[42m
Orange\033[33m\033[43m
Blue\033[34m\033[44m
Magenta\033[35m\033[45m
Cyan\033[36m\033[46m
Light gray\033[37m\033[47m
Fallback to distro's default\033[39m\033[49m

There are some additional colors available for the background:

ColorBackground
Dark gray\033[100m
Light red\033[101m
Light green\033[102m
Yellow\033[103m
Light blue\033[104m
Light purple\033[105m
Teal\033[106m
White\033[107m

The Attributes are as Follows:

AttributeCode
No Attribute00
Bold01
underscore04
Blink05
Reverse07
Hidden/conceled08

This was taken from the really helpful site:[How to change the color of your Linux terminal by Seth Kenlon] (opensource.com/article/19/9/linux-terminal-..)

To test it as you go, best thing to do is save and open a new terminal window and you will see the effects take place. But please please becarefull not messing about with anything else in the .bashrc file. With great power and all that jazz....

Putting it all together

Now here is my final output:

PS1='${debian_chroot:+($debian_chroot)}\[\033[34m\]\[\033[105m\]\u @ \H \[\033[37m\]- \[\033[02;32m\]\[\033[106m\]\d \@\n\[\033[04;36m\]\[\033[104m\]Working Directory: \w\n\[\033[05;33m\]\[\033[40m\]Enter Command \\$\[$(tput sgr0)'

I hope you can see the patterns and can now be able to follow along with the bloated eyesore taht is infornt of you. Here is the final Output aswell

Final Terminal.png

If you have followed along by now you will have this feeling, I know that feeling well my friend. Its the feeling of being a BOSS. Now, go and strut down the street a couple of times and cherrish this felleting moment. For the others who just read through this, I hope you found it informative, if there is anything that I have missed please do let me know.

Hope you have a great weekend mate, and enjoy your new styled terminal....