Put colour to your terminal prompt
Tags: terminal, bash, colours
Published: 2020-11-25 13:16:32

---
title: Put colour to your terminal prompt
published: true
description: Use colours and show the project's git branch in your prompt.
tags: terminal, bash, colours 
cover_image: https://images.pexels.com/photos/207580/pexels-photo-207580.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260
---

If you live in the terminal, you may as well be comfortable in it.

<div class="success">
In this article you will learn:
	<ul>
		<li>How to set colours to your prompt terminal.</li>
		<li>How to show the current git branch.</li>
	</ul>
</div>

What you'll get:

<img src="https://sespinoza.me/files/images/terminal.png" alt="terminal">

One of the things that I really wanted was to have a customized terminal, there are a handful of shells out there, one of the most popular begin [zhs](https://www.zsh.org/) popularized by [oh my zsh](https://ohmyz.sh/). For some, these are great tools, but for me, that I only want to have some colour and display the git branch... It felt like hitting a tiny nail with Thor's hammer. I knew this could be achieved just by using bash, so I did some digging, here is how to achieve it.

</br>
## Where is the prompt?

Like many things in bash, everything is inside a configuration variable, in this case, the prompt is stored in the `PS1` variable, check it out:

```
$ echo $PS1
${debian_chroot:+($debian_chroot)}\u@\h:\w\$
```

The most simplistic structure of the above is the following:

```bash
\u@\h:\w\$
```

- `\u` : username
- `@` : at symbol
- `\h` : hostname
- `W` : working directory
- `$` : # sign if is root or $ sign if normal user.

We can change this variable however we want. Let's say that we only want to have the working directory in the prompt, we could do that like this:

```bash
export PS1="\w\$ "
~/
```

As it happens, this change won't be permanent, if you open a new terminal you'll see that it's just like when you started.

Now that we have the bones, lets put some colour, shall we?

</br>
## Colours and styles

The way a terminal access colour and style is by using sequences like `\e[92m` for light_green, for example. We could print something with `echo -e "\e[92m This text is green"`.

<img src="https://sespinoza.me/files/images/green_text_terminal.png" alt="terminal">

The `-e` option in *echo* it just "enable interpretation of backslash escapes" (man page).

Let's look a bit closer to this sequence: `\e[92m`. This is composed of the **Escape character** which can be accessed with `\e`, `\033` or `\x1B`, then a `[` the *format code* (92) and `m`.

Here are just a few colours you can choose from:

- `\e[0m`: Reset, removes styles and colours.
- `\e[30m`: Black
- `\e[31m`: Red.
- `\e[32m`: Green.
- `\e[33m`: Yellow.
- `\e[34m`: Blue.
- `\e[35m`: Magenta.
- `\e[36m`: Cyan.

So now we could use these in combination with the previous section to have styled our prompt. Let's make the *user* and *host* blue.

```
export PS1="\e[34m\u@\h\e[0m:\w\$"
```

<img src="https://sespinoza.me/files/images/terminal_color_blue.png" alt="terminal">

</br>
## The .bashrc configuration file

Alright, now that you know how things work, we can make this our permanent configuration. To do this, we have to write to the `~/.bashrc` configuration file.

Open the file with your favourite editor (vim of course...) and paste the following:

```bash
bold="\e[1m"
light_green="\e[92m"
blue="\e[34m"
yellow="\e[33m"
reset_formating="\e[0m"
get_branch() {
   git symbolic-ref --short HEAD 2>/dev/null
}
export PS1="\[${bold}${light_green}\]\u@\h \[${blue}\]\W\[${yellow}\] [\$(get_branch)]\[${reset_formating}\]\$ "
```

At this point is pretty clear what we are doing here, so let's go through it: In the first lines, we are just declaring string variables. Then we defined `get_branch` which is a function that will execute every time you change from one directory to another and extract the current git branch of that project.

Note: `\[` and `\]` don't affect here, just keep the blocks organized.

Note: `"In bash, this is how we access the value of the variable: ${variable_name}"`

And that's it! if you run `source .bashrc` or you open a new terminal, you will see your changes. Try to test it by `cd` to a directory that has a git repository.

I hope this was helpful to you. If you find it useful or if you find an issue, just send me a quick email and I'll respond to you as soon as possible.

All the best!

</br>
## References

- [Git](https://git-scm.com/)
- [zhs](https://www.zsh.org/)
- [oh my zsh](https://ohmyz.sh/)

Originally published in my personal web page:

https://sespinoza.me/#/articles/5fbc6e4d9a9e50c1b04d09ab

</br>
## About me

I’m a Software Engineer, writer, tech enthusiast, pianist, origami lover, amateur photographer. In my spare time, I go trekking, play the piano and learn history.

My tech: JavaScript, Node.js, React, Ruby, Crystal, Bash, Docker.

You can follow me on [Twitter](https://twitter.com/sespinoza_dev), [LinkedIn](https://www.linkedin.com/in/espinoza-jimenez/) or visit my page to contact [me](https://sespinoza.me/#/contact/).