Customize Mac Terminal with ZSH and Powerlevel10k

In this article, I will explain how to customize the MAC terminal, iTerm2, Visual Studio Code terminal, and IntelliJ IDEA terminal with ZSH and powerlevel10k. Let’s get started!

First, I want to share with you the tool installation links. Please download and install them all. The installation of these tools is pretty straightforward. Also, I suggest you install brew if you did not install it before.

iTerm2: https://iterm2.com/

Visual Studio Code: https://code.visualstudio.com/

IntelliJ IDEA: https://www.jetbrains.com/idea/download/#section=mac

Git: https://git-scm.com/download/mac

We will first do all operations on the iTerm2 terminal. Then, we will do some tweaks for other terminals. 

We will continue with installing “Oh My Zsh“. In order to install it, please run the below command in your terminal, and for more info, you can go to its official website.

sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

After this installation, let go of the root folder level by typing “cd” and then click enter. Then, type the below command to open the Zsh’s config file in Visual Studio Code (VS Code).

code ~/.zshrc

After this command, VS Code will be opened. When it is opened, change the ZSH_THEME to agnoster and save the file.

ZSH_THEME="agnoster"

Close the iTerm2 terminal completely but quit and then reopen it. To quit, right-click the terminal icon and then click to quit.

Then, re-open the iTerm2 again, and you will see a different view.

If you want, you can change the color theme with flat colors, you can go to Quentin Watt’s GitHub repo and download the “flat-clolors.itermcolors” file.

Then go back to iTerm, and go to Preferences -> Profiles -> Colors -> Color Presets Drop Down -> Import and then select the downloaded “flat-colors.itermcolors” file.

Also, you can check other color profiles by visiting the online gallery as shown below screenshot.

We will continue with Powerlevel10k installation. For this, we should run the below command on the iTerm terminal. Before make sure that the .zshrc file is readable and writeable.

git clone https://github.com/romkatv/powerlevel10k.git $ZSH_CUSTOM/themes/powerlevel10k

Then, again open the ~/.zshrc file with VS Code or any editor and change the ZHS_THEME value to “powerlevel10k/powerlevel10k“.

ZSH_THEME="powerlevel10k/powerlevel10k"

Then save the file, quit iTerm2, and re-open it. You will see the Powerlevel10k configuration wizard.

For the below question, enter the “y” and continue.

For the below question, enter the “y” and continue.

For the below question, enter the “y” and continue.

For the below question, enter the “y” and continue.

For the below question, enter the “3” and continue.

For the below question, enter the “1” and continue.

For the below question, enter the “1” and continue.

For the below question, enter the “1” and continue.

For the below question, enter the “1” and continue.

For the below question, enter the “1” and continue.

For the below question, enter the “1” and continue.

For the below question, enter the “1” and continue.

For the below question, enter the “2” and continue. If you want, you can go with “1”. It depends on your taste. :)

For the below question, enter the “1” and continue.

For the below question, enter the “y” and continue. If you want, you can go with “no“. It depends on your taste.

For the below question enter the “1” and continue.

For the below question, enter the “y” and continue.

After all of these settings, close the iTerm and re-open it, and you will see something like the below screen.

If you don’t like this configuration, you can update it by typing the below command on iTerm.

pk10 configure

For syntax highlighting, we should run the below command.

brew install zsh-syntax-highlighting

After syntax highlighting installation, run the below command.

source /usr/local/share/zsh-syntax-highlighting/zsh-syntax-highlighting.zsh

For auto-completion, you can follow these steps.

Visual Code Terminal Settings

Open the Visual Code and then go to the Code -> Preferences -> Settings

Then, on the settings page, type “settings.json” and then click the JSON and then click the “Edit in settings.json“

After this step, add the below line to your settings.json file and save it.

"terminal.integrated.fontFamily": "MesloLGS NF",


After this step, close and re-open the VS Code. You will see the terminal like the below screen. Even it should work without closing and opening the VS Code. 

Mac’s Default Terminal Settings

Go to Preferences -> Profiles -> Change and then change the font to “MesloLGS NL“. 

This will solve the problems on your terminal.

IntelliJ Terminal Settings

Before starting the IntelliJ terminal settings, we will download the MesloLGS fonts and install them by double-clicking each font file.

Link: https://github.com/romkatv/powerlevel10k/blob/master/font.md

Then go to Open IDE → Edit → Preferences → Editor → Color Scheme → Console Font. Select Use console font instead of the default and set the font name to MesloLGS NF.

After this setting, re-start the IntelliJ IDEA or close completely and re-open it. 

Finally, you will see the below terminal screen. :)

References

[1] https://www.youtube.com/watch?v=D2PSsnqgBiw

[2] https://gist.github.com/kevin-smets/8568070 

[3] https://github.com/QuentinWatt/dark-flat-iterm-colors

[4] https://github.com/magicdude4eva/iterm-oh-my-zsh-powerlevel10k

[5] https://code.visualstudio.com/docs/getstarted/settings#_settings-editor

[6] https://stackoverflow.com/questions/43056684/oh-my-zsh-theme-not-rendering-properly-in-intellij

[7] https://github.com/romkatv/powerlevel10k/blob/master/font.md

Thanks for reading!
Onur Baskirt