DEV Community

Cover image for How to Configure Starship to Look Exactly Like P10K (zsh + Warp + MacOS)
Jessica Wang
Jessica Wang

Posted on • Updated on

How to Configure Starship to Look Exactly Like P10K (zsh + Warp + MacOS)

Intro

In this blog, I’m going to be showing you step-by-step how to configure your Starship prompt to look as close as possible to powerlevel10k.

If you don't like reading, check out the Youtube video instead:

Step-by-step setup

First of all, if you don't have Warp installed, you can install it by running:

brew install warp

You're also going to want a Nerd Font, which will allow you to see all the cool icons & glyphs included in the prompt. I'm using DroidSanMono, which you can download here.

Once you download this, open up the zip folder. Extract the files. Then type CMD + Space, and search up "Font Book". Paste your files into your Font Book directory.

Once you do that, open up your Warp terminal.

Go to Settings > Appearance > Text > Terminal Font, and set your font to DroidSansMono Nerd Font.

Let’s starting with setting up Starship. The first thing you’re gonna do is download Starship by running this command:

curl -sS [https://starship.rs/install.sh](https://starship.rs/install.sh) | sh

Once that’s done, you want to run:

vi ~/.zshrc

This is so that we can edit the ~/.zshrc file. Feel free to do this in whatever code editor you like (e.g. VS Code).

And scroll to the bottom, and add this line to the end of your ~/.zshrc file:

eval "$(starship init zsh)"

In Warp, you’ll need to go to:

Settings > Features > Session > Honor user’s custom prompt

Which will override Warp’s default out-of-box prompt with your Starship prompt.

Once you do that, you’ll see that Starship prompt is now your prompt. But it doesn’t look great, yet.

Image description

To customize Starship to look like p10k, you’re going to run this command:

mkdir -p ~/.config && touch ~/.config/starship.toml

Then you’re going to run:

vi ~/.config/starship.toml

and go to this link and copy paste the contents of this file into your starship.toml file.

Don't forget to save your changes!

You’ll see that now our prompt is looking fantastic.

To pull it all together, let’s download the theme that goes really well with this setup!

To do this, run:

cd ~/.warp/themes/

And then run:

vi coolnight.yaml

and go to this link and copy paste the contents of this file into your coolnight.yaml file.

Shoutout to Josean for the original creation of this theme for iTerm2

In Warp, go into Settings > Appearance, Theme, and type in “coolnight”. Click the theme that appears.

And there you have it! You now have a perfectly awesome powershell10k dupe in your terminal!

Conclusion

Here's a comparison of the end result.

Image description

On the left is what my P10k setup looks like running on iTerm2. On the right is what my Starship setup looks like running on my Warp terminal.

Top comments (30)

Collapse
 
sandaun profile image
Oriol Carbó

Hi Jessica,

Thanks for the step-by-step guide :D

I'm having an issue though. Don't know why icons are not showing. The font is correctly installed. Any ideas?
Image description

Collapse
 
jandiee profile image
Jandiee • Edited

I had to edit the starship.toml file myself to include the correct icons. When copy pasting the content from the github, it pasted the symbols as some kind of unknown thingy.

Open the detail of the Nerd Font - Font Book -> My Fonts -> double-click Nerd Font, find the appropriate icons, copy them and paste them into the .toml file. You can edit the "format" variables in the appropriate sections. Specifically I had to manually edit the Apple logo, time icon, cmd duration icon and folder icon. Other icons were fine :)

Collapse
 
therubberduckiee profile image
Jessica Wang

Thanks for the reply here! Yeah, it's weird. When I copy it myself, I can see the icons, but I do see it shows up as gibberish for other people. I'm not sure how to fix this issue, but I will look into it when I have some free time.

Thread Thread
 
pmorelli profile image
Peter Morelli

i think there's some subtle rendering issues, too. i had to set my font size to 15 to get it to line up. What are your font size and line spacing?

Even with the font size, every other line seemed rendered slightly off.
Image description

Collapse
 
siriguppa_aditya_c6bf1267 profile image
Siriguppa Aditya

Even I am facing the same issue can somebody post the screenshot of toml file so that it would be easy to paste which icons

Thread Thread
 
stephencatano profile image
Stephen Cataño • Edited

Sure!

Image description

I can't identify where appears the CMD Duration Icon, but I put a Tux.

Thread Thread
 
sajmo profile image
Saj S

Hey @stephencatano would you able to share this file?

Thread Thread
 
sajmo profile image
Saj S

Hey, would you able to share this file?

Collapse
 
sandaun profile image
Oriol Carbó

That's true! I just noticed now. Thanks a lot!

Collapse
 
pratikcodes profile image
Pratik Tiwari

I am having same issue. There are some issues with warp and fonts use Menlo NF

Collapse
 
rallanvila profile image
Allan Vila

For some reason whenever I copy and save the starship.toml file, I'm not getting the powerline theme? Warp is set to custom shell prompt and the starship theme seems to be applied.

However, it's not taking the changes from the saved starship.toml located in ~/.config

It doesn't look like anyone has had this issue in here, any ideas?

Collapse
 
rallanvila profile image
Allan Vila

nvm, I went through all my homebrew installs in **/homebrew/optand deleted the spaceship directory and now it's working as expected.

Collapse
 
edgarmc100 profile image
EdgarMC100

Thanks Jessica, I just had to install the Nerd font because the icons weren't showing.

Collapse
 
therubberduckiee profile image
Jessica Wang

Oh right! I forgot to mention that. I'll add that to the blog.

Which Nerd font did you end up installing?

Collapse
 
pridapablo profile image
Pablo Banzo

Hey Jessica! Thanks for the great article.
Here's an easy nerd font installation (I'm using "Hack"):
app.warp.dev/block/IB2w9s22avfh3Ef...

Then i just swapped the terminal font in Warp>Apperance>Text>Terminal font.

Quick question. Is there a way to put the cursor next to the prompt instead of under it? hahahhah i'm new to Warp and i'm too used to the mac terminal setup.

Thread Thread
 
therubberduckiee profile image
Jessica Wang

The short answer for if it's possible to put the cursor next to the prompt: no.

Unlike other terminal editors, Warp treats the prompt and the input box as two different UI elements. So it's currently not possible to configure Warp to have the cursor next to the prompt :/

Collapse
 
therubberduckiee profile image
Jessica Wang

Ok! Just added the installation steps for the Nerd Font I use into the blog.

Collapse
 
eihab profile image
Eihab Khan • Edited

Thanks Jessica, what font are you using in Warp?

Collapse
 
therubberduckiee profile image
Jessica Wang

I'm using the DroidSansMono Nerdfont!

eng.m.fontke.com/font/24637081/

Image description

Collapse
 
therubberduckiee profile image
Jessica Wang

I've updated the blog to include the installation steps for this font now!

Collapse
 
pratikcodes profile image
Pratik Tiwari

Really helped set it up. Thank you!

Collapse
 
thoroc profile image
thoroc

Nice! Just recreated the agnoster theme from p9k :)

Collapse
 
hafiztayab profile image
hafiztayab

Thanks Jessica, I have installed fonts but my fonts are not loading.

Screenshot

Collapse
 
jandiee profile image
Jandiee
Collapse
 
codeyy profile image
Yuto Yoshino

Great article! Thank you!

Collapse
 
therubberduckiee profile image
Jessica Wang

No problem! Thanks for giving it a read :)

Collapse
 
gentlewalker profile image
Luka Stankovic

Hi people, I am not sure this is right anymore (Settings > Features > Session > Honor user’s custom prompt). Where can I enable this now?

Collapse
 
jais99 profile image
Jaisal Srivastava • Edited

@therubberduckiee I'm sorry, but you might wanna add this to your TODO: update tutorial, to incorporate changes in warp settings!

Hey Luka!, its now under the appearance menu, inside the prompt settings, change the prompt from warp to PS1

New Location for setting

Select PS1

Collapse
 
itzadetunji profile image
Adetunji Adeyinka • Edited

I have found the solution here but only to the folder icon @therubberduckiee
github.com/theRubberDuckiee/dev-en...