{"id":1033,"date":"2018-11-23T00:43:26","date_gmt":"2018-11-23T00:43:26","guid":{"rendered":"https:\/\/blog.hassler.ec\/wp\/?p=1033"},"modified":"2018-11-16T03:07:18","modified_gmt":"2018-11-16T03:07:18","slug":"powerlevel9k-personalise-your-terminal-prompt-for-any-programming-language","status":"publish","type":"post","link":"https:\/\/blog.hassler.ec\/wp\/2018\/11\/23\/powerlevel9k-personalise-your-terminal-prompt-for-any-programming-language\/","title":{"rendered":"Powerlevel9k: personalise your terminal prompt for any programming language"},"content":{"rendered":"<figure id=\"e63c\" class=\"graf graf--figure graf-after--h3\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded\" data-image-id=\"1*ZOI_mTjgj8Lbo4OHF4QWRQ.png\" data-width=\"2352\" data-height=\"1498\" data-action=\"zoom\" data-action-value=\"1*ZOI_mTjgj8Lbo4OHF4QWRQ.png\" data-scroll=\"native\"><canvas class=\"progressiveMedia-canvas js-progressiveMedia-canvas\" width=\"75\" height=\"47\"><\/canvas><img decoding=\"async\" class=\"progressiveMedia-image js-progressiveMedia-image\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*ZOI_mTjgj8Lbo4OHF4QWRQ.png\" data-src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*ZOI_mTjgj8Lbo4OHF4QWRQ.png\" \/><\/div>\n<\/div>\n<\/figure>\n<p id=\"d81d\" class=\"graf graf--p graf-after--figure\"><strong class=\"markup--strong markup--p-strong\">JavaScript, Python, Ruby\u200a\u2014\u200ayou name it\u200a\u2014\u200ayou can create a prompt to display\u00a0<em class=\"markup--em markup--p-em\">any<\/em>\u00a0programming language using Powerlevel9k, a highly customisable terminal framework for the Zsh shell.<\/strong><\/p>\n<p id=\"d026\" class=\"graf graf--p graf-after--p\">This tutorial will provide examples and a step-by-step guide to configure custom prompt sections for\u00a0<a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/github.com\/bhilburn\/powerlevel9k\" target=\"_blank\" rel=\"nofollow noopener\" data-href=\"https:\/\/github.com\/bhilburn\/powerlevel9k\">Powerlevel9k<\/a>\u00a0with programming language icons and your choice of text and colors.<\/p>\n<ul class=\"postList\">\n<li id=\"c5d8\" class=\"graf graf--li graf-after--p\"><a class=\"markup--anchor markup--li-anchor\" href=\"https:\/\/medium.com\/the-code-review\/powerlevel9k-personalise-your-prompt-for-any-programming-language-68974c127c63#bf90\" data-href=\"#bf90\">Screenshots<\/a><\/li>\n<li id=\"0d2d\" class=\"graf graf--li graf-after--li\"><a class=\"markup--anchor markup--li-anchor\" href=\"https:\/\/medium.com\/the-code-review\/powerlevel9k-personalise-your-prompt-for-any-programming-language-68974c127c63#cc58\" data-href=\"#cc58\">Powerlevel9k setup<\/a><\/li>\n<li id=\"c951\" class=\"graf graf--li graf-after--li\"><a class=\"markup--anchor markup--li-anchor\" href=\"https:\/\/medium.com\/the-code-review\/powerlevel9k-personalise-your-prompt-for-any-programming-language-68974c127c63#af12\" data-href=\"#af12\">Configure a prompt section<\/a><\/li>\n<li id=\"5de8\" class=\"graf graf--li graf-after--li\"><a class=\"markup--anchor markup--li-anchor\" href=\"https:\/\/medium.com\/the-code-review\/powerlevel9k-personalise-your-prompt-for-any-programming-language-68974c127c63#0fad\" data-href=\"#0fad\">Example\u00a0.zshrc<\/a><\/li>\n<li id=\"a4a0\" class=\"graf graf--li graf-after--li\"><a class=\"markup--anchor markup--li-anchor\" href=\"https:\/\/medium.com\/the-code-review\/powerlevel9k-personalise-your-prompt-for-any-programming-language-68974c127c63#1724\" data-href=\"#1724\">JavaScript prompt<\/a><\/li>\n<li id=\"e2a8\" class=\"graf graf--li graf-after--li\"><a class=\"markup--anchor markup--li-anchor\" href=\"https:\/\/medium.com\/the-code-review\/powerlevel9k-personalise-your-prompt-for-any-programming-language-68974c127c63#f10f\" data-href=\"#f10f\">Python prompt<\/a><\/li>\n<li id=\"c7f7\" class=\"graf graf--li graf-after--li\"><a class=\"markup--anchor markup--li-anchor\" href=\"https:\/\/medium.com\/the-code-review\/powerlevel9k-personalise-your-prompt-for-any-programming-language-68974c127c63#bca2\" data-href=\"#bca2\">Ruby prompt<\/a><\/li>\n<li id=\"9f69\" class=\"graf graf--li graf-after--li\"><a class=\"markup--anchor markup--li-anchor\" href=\"https:\/\/medium.com\/the-code-review\/powerlevel9k-personalise-your-prompt-for-any-programming-language-68974c127c63#1244\" data-href=\"#1244\">Find out more<\/a><\/li>\n<\/ul>\n<h3 id=\"bf90\" class=\"graf graf--h3 graf-after--li\">Screenshots<\/h3>\n<p id=\"c138\" class=\"graf graf--p graf-after--h3\">These screenshots give you an idea of what programming prompt sections could look like once you have set this up. The first image below shows examples of JavaScript, Python and Ruby prompt segments.<\/p>\n<figure id=\"c748\" class=\"graf graf--figure graf-after--p\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspectRatioPlaceholder-fill\"><\/div>\n<div class=\"progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded\" data-image-id=\"1*Lxqva2mHuI1_qF98vAKzIg.png\" data-width=\"1894\" data-height=\"950\" data-action=\"zoom\" data-action-value=\"1*Lxqva2mHuI1_qF98vAKzIg.png\" data-scroll=\"native\"><canvas class=\"progressiveMedia-canvas js-progressiveMedia-canvas\" width=\"75\" height=\"37\"><\/canvas><img decoding=\"async\" class=\"progressiveMedia-image js-progressiveMedia-image\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*Lxqva2mHuI1_qF98vAKzIg.png\" data-src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*Lxqva2mHuI1_qF98vAKzIg.png\" \/><\/div>\n<\/div>\n<\/figure>\n<p id=\"9843\" class=\"graf graf--p graf-after--figure\">Below is the\u00a0<a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/www.ruby-lang.org\/en\/\" target=\"_blank\" rel=\"nofollow noopener\" data-href=\"https:\/\/www.ruby-lang.org\/en\/\">Ruby<\/a>\u00a0prompt displayed along with the directory, in this case the\u00a0<a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/rubyonrails.org\/\" target=\"_blank\" rel=\"nofollow noopener\" data-href=\"https:\/\/rubyonrails.org\/\">Ruby on Rails<\/a>\u00a0<a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/github.com\/rails\/rails\" target=\"_blank\" rel=\"nofollow noopener\" data-href=\"https:\/\/github.com\/rails\/rails\">repository<\/a>, along with the\u00a0<a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/git-scm.com\/\" target=\"_blank\" rel=\"nofollow noopener\" data-href=\"https:\/\/git-scm.com\/\">git<\/a>\u00a0<a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/git-scm.com\/book\/en\/v1\/Git-Branching-What-a-Branch-Is\" target=\"_blank\" rel=\"nofollow noopener\" data-href=\"https:\/\/git-scm.com\/book\/en\/v1\/Git-Branching-What-a-Branch-Is\">branch<\/a>\u00a0and\u00a0<a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/git-scm.com\/docs\/git-status\" target=\"_blank\" rel=\"nofollow noopener\" data-href=\"https:\/\/git-scm.com\/docs\/git-status\">status<\/a>\u00a0. This is how you might apply a programming language prompt for a specific project you are working on.<\/p>\n<figure id=\"06cd\" class=\"graf graf--figure graf-after--p\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspectRatioPlaceholder-fill\"><\/div>\n<div class=\"progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded\" data-image-id=\"1*-OFo8QElUuk4W6-LtNJwcQ.png\" data-width=\"1410\" data-height=\"1076\" data-action=\"zoom\" data-action-value=\"1*-OFo8QElUuk4W6-LtNJwcQ.png\" data-scroll=\"native\"><canvas class=\"progressiveMedia-canvas js-progressiveMedia-canvas\" width=\"75\" height=\"55\"><\/canvas><img decoding=\"async\" class=\"progressiveMedia-image js-progressiveMedia-image\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*-OFo8QElUuk4W6-LtNJwcQ.png\" data-src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*-OFo8QElUuk4W6-LtNJwcQ.png\" \/><\/div>\n<\/div>\n<\/figure>\n<h3 id=\"cc58\" class=\"graf graf--h3 graf-after--figure\">Powerlevel9k setup<\/h3>\n<p id=\"e938\" class=\"graf graf--p graf-after--h3\">This tutorial extends from the setup of Powerlevel9k with Nerd Fonts, Zsh and iTerm2 that I covered in:\u00a0<a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/medium.freecodecamp.org\/how-you-can-style-your-terminal-like-medium-freecodecamp-or-any-way-you-want-f499234d48bc\" target=\"_blank\" rel=\"noopener nofollow nofollow noopener\" data-href=\"https:\/\/medium.freecodecamp.org\/how-you-can-style-your-terminal-like-medium-freecodecamp-or-any-way-you-want-f499234d48bc\">How you can style your terminal like Medium, freeCodeCamp, or any way you want<\/a>.<\/p>\n<figure id=\"a535\" class=\"graf graf--figure graf-after--p\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspectRatioPlaceholder-fill\"><\/div>\n<div class=\"progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded\" data-image-id=\"1*E9mlpcr5EIaImtOaJC5tPg.png\" data-width=\"2000\" data-height=\"409\" data-scroll=\"native\"><canvas class=\"progressiveMedia-canvas js-progressiveMedia-canvas\" width=\"75\" height=\"15\"><\/canvas><img decoding=\"async\" class=\"progressiveMedia-image js-progressiveMedia-image\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*E9mlpcr5EIaImtOaJC5tPg.png\" data-src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*E9mlpcr5EIaImtOaJC5tPg.png\" \/><\/div>\n<\/div>\n<\/figure>\n<p id=\"90d5\" class=\"graf graf--p graf-after--figure\">In that article I also explained how to choose a color scheme\u200a\u2014\u200aso check it out if you are looking for more guidance on setting your own colors for your terminal prompt.<\/p>\n<p id=\"67c6\" class=\"graf graf--p graf-after--p\"><em class=\"markup--em markup--p-em\">Assuming that you have now set up your terminal with Powerlevel9k, here is a guide to show you how to configure prompt sections that you can use for your favourite programming language.<\/em><\/p>\n<h3 id=\"af12\" class=\"graf graf--h3 graf-after--p\">Configure a prompt\u00a0section<\/h3>\n<p id=\"f631\" class=\"graf graf--p graf-after--h3\">I will show you step-by-step how to set up a custom prompt section, that you can use to create your own custom prompt for the programming language of your choice.<\/p>\n<p id=\"32fd\" class=\"graf graf--p graf-after--p\">This will use an example of how to create a custom JavaScript prompt section. Here is a screenshot of the prompt that you will learn to make.<\/p>\n<figure id=\"2b79\" class=\"graf graf--figure graf-after--p\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspectRatioPlaceholder-fill\"><\/div>\n<div class=\"progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded\" data-image-id=\"1*LnHcUGih2oF4F1giTNc2RA.png\" data-width=\"1388\" data-height=\"866\" data-action=\"zoom\" data-action-value=\"1*LnHcUGih2oF4F1giTNc2RA.png\" data-scroll=\"native\"><canvas class=\"progressiveMedia-canvas js-progressiveMedia-canvas\" width=\"75\" height=\"45\"><\/canvas><img decoding=\"async\" class=\"progressiveMedia-image js-progressiveMedia-image\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*LnHcUGih2oF4F1giTNc2RA.png\" data-src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*LnHcUGih2oF4F1giTNc2RA.png\" \/><\/div>\n<\/div><figcaption class=\"imageCaption\">A Powerlevel9k prompt with sections for the directory (dir), JavaScript (custom), and git status (vcs). The color scheme is\u00a0<a class=\"markup--anchor markup--figure-anchor\" href=\"https:\/\/draculatheme.com\/iterm\/\" target=\"_blank\" rel=\"nofollow noopener\" data-href=\"https:\/\/draculatheme.com\/iterm\/\">Dracula<\/a>\u00a0with the background color set to\u00a0#000000.<\/figcaption><\/figure>\n<h4 id=\"0957\" class=\"graf graf--h4 graf-after--figure\">Add your custom section to your\u00a0setup<\/h4>\n<p id=\"0598\" class=\"graf graf--p graf-after--h4\">Powerlevel9k has some default settings for the\u00a0<a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/github.com\/bhilburn\/powerlevel9k#prompt-customization\" target=\"_blank\" rel=\"nofollow noopener\" data-href=\"https:\/\/github.com\/bhilburn\/powerlevel9k#prompt-customization\">prompt configuration<\/a>. In this part of the tutorial, I will show you how to override them with your own choice of prompt sections and layout.<\/p>\n<p id=\"f3ae\" class=\"graf graf--p graf-after--p\">You need to add this configuration to your\u00a0<code class=\"markup--code markup--p-code\">.zshrc<\/code>\u00a0file, which is normally located in your home directory after you install Zsh.<\/p>\n<p id=\"80f9\" class=\"graf graf--p graf-after--p\">Powerlevel9k uses environment variables to determine what to display in your prompt. The first one,\u00a0<code class=\"markup--code markup--p-code\">POWERLEVEL9K_LEFT_PROMPT_ELEMENTS<\/code>, contains a list of the sections you want on the left hand side of your prompt. You can add\/remove sections or change them here.<\/p>\n<pre id=\"1272\" class=\"graf graf--pre graf-after--p\"># Customise the Powerlevel9k prompts\r\nPOWERLEVEL9K_LEFT_PROMPT_ELEMENTS=(\r\n  dir\r\n  custom_javascript \r\n  vcs\r\n  newline\r\n  status\r\n)\r\nPOWERLEVEL9K_RIGHT_PROMPT_ELEMENTS=()\r\nPOWERLEVEL9K_PROMPT_ADD_NEWLINE=true<\/pre>\n<p id=\"8205\" class=\"graf graf--p graf-after--pre\">Here is a quick explanation of the sections:\u00a0<code class=\"markup--code markup--p-code\">dir<\/code>\u00a0is the current working directory;\u00a0<code class=\"markup--code markup--p-code\">custom_javascript<\/code>\u00a0is a custom section;\u00a0<code class=\"markup--code markup--p-code\">vsc<\/code>\u00a0is the version control system, such as git;\u00a0<code class=\"markup--code markup--p-code\">newline<\/code>\u00a0starts a new line in your terminal;\u00a0<code class=\"markup--code markup--p-code\">status<\/code>\u00a0shows a tick if the last command was successful or the return code if there was an error.<\/p>\n<p id=\"5fc9\" class=\"graf graf--p graf-after--p\">Other options for your prompt are to have sections in a right hand side prompt, set using\u00a0<code class=\"markup--code markup--p-code\">POWERLEVEL9K_RIGHT_PROMPT_ELEMENTS<\/code>, and whether you want a new line in your terminal after the results of each command, which is set by\u00a0<code class=\"markup--code markup--p-code\">POWERLEVEL9K_PROMPT_ADD_NEWLINE<\/code>.<\/p>\n<p id=\"4202\" class=\"graf graf--p graf-after--p\">For an extended guide to custom prompt configurations, check out\u00a0<a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/github.com\/bhilburn\/powerlevel9k#prompt-customization\" target=\"_blank\" rel=\"nofollow noopener\" data-href=\"https:\/\/github.com\/bhilburn\/powerlevel9k#prompt-customization\">Powerlevel9k\u2019s guide to prompt customization<\/a>.<\/p>\n<h4 id=\"a0aa\" class=\"graf graf--h4 graf-after--p\">Set up Nerd Fonts on your\u00a0computer<\/h4>\n<p id=\"5adf\" class=\"graf graf--p graf-after--h4\">To use programming icons in your prompt you need to first install Nerd Fonts\u200a\u2014\u200aa special font set that includes lots of extra icons. If you haven\u2019t installed it already, check out my guide on how to do this by clicking the link below.<\/p>\n<p id=\"9fcb\" class=\"graf graf--p graf-after--p\"><a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/medium.com\/the-code-review\/nerd-fonts-how-to-install-configure-and-remove-programming-fonts-on-a-mac-178833b9daf3\" target=\"_blank\" rel=\"noopener\" data-href=\"https:\/\/medium.com\/the-code-review\/nerd-fonts-how-to-install-configure-and-remove-programming-fonts-on-a-mac-178833b9daf3\"><strong class=\"markup--strong markup--p-strong\">Nerd Fonts: How to install, configure, and remove programming fonts on a mac<\/strong><\/a><\/p>\n<figure id=\"2122\" class=\"graf graf--figure graf-after--p\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspectRatioPlaceholder-fill\"><\/div>\n<div class=\"progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded\" data-image-id=\"1*MRrKttr2ebF9MGZudurd0Q.png\" data-width=\"1390\" data-height=\"800\" data-scroll=\"native\"><canvas class=\"progressiveMedia-canvas js-progressiveMedia-canvas\" width=\"75\" height=\"42\"><\/canvas><img decoding=\"async\" class=\"progressiveMedia-image js-progressiveMedia-image\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*MRrKttr2ebF9MGZudurd0Q.png\" data-src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*MRrKttr2ebF9MGZudurd0Q.png\" \/><\/div>\n<\/div>\n<\/figure>\n<h4 id=\"5a18\" class=\"graf graf--h4 graf-after--figure\">Pick an icon from Nerd\u00a0Fonts<\/h4>\n<p id=\"3cc5\" class=\"graf graf--p graf-after--h4\">Once Nerd Fonts is installed, you can pick some programming icons for your prompt. You can search for them on the\u00a0<a class=\"markup--anchor markup--p-anchor\" href=\"http:\/\/nerdfonts.com\/#cheat-sheet\" target=\"_blank\" rel=\"noopener nofollow\" data-href=\"http:\/\/nerdfonts.com\/#cheat-sheet\">Nerd Fonts website<\/a>. For example, a search for\u00a0<code class=\"markup--code markup--p-code\">JavaScript<\/code>\u00a0displays a range of related icons.<\/p>\n<figure id=\"daf9\" class=\"graf graf--figure graf-after--p\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspectRatioPlaceholder-fill\"><\/div>\n<div class=\"progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded\" data-image-id=\"1*wao2N-b-gCa_FoChJrgtfQ.png\" data-width=\"1664\" data-height=\"1380\" data-scroll=\"native\"><canvas class=\"progressiveMedia-canvas js-progressiveMedia-canvas\" width=\"75\" height=\"60\"><\/canvas><img decoding=\"async\" class=\"progressiveMedia-image js-progressiveMedia-image\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*wao2N-b-gCa_FoChJrgtfQ.png\" data-src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*wao2N-b-gCa_FoChJrgtfQ.png\" \/><\/div>\n<\/div>\n<\/figure>\n<p id=\"489b\" class=\"graf graf--p graf-after--figure\">Once you find an icon you like, copy the four character code for that icon that is displayed under its name. For example, if you like the icon\u00a0<code class=\"markup--code markup--p-code\">nf-dev-javascript_badge<\/code>\u00a0then copy the code\u00a0<code class=\"markup--code markup--p-code\">e781<\/code>.<\/p>\n<p id=\"e1b8\" class=\"graf graf--p graf-after--p\">You then can use this four digit code to display the icon in your prompt by including it in a custom command.<\/p>\n<h4 id=\"ed14\" class=\"graf graf--h4 graf-after--p\">Create your custom\u00a0command<\/h4>\n<p id=\"7468\" class=\"graf graf--p graf-after--h4\">To configure a custom section you need to define three environment variables. They all need to start with\u00a0<code class=\"markup--code markup--p-code\">POWERLEVEL9K_CUSTOM_<\/code>. The first one is the command that will be called to display content in your prompt section.<\/p>\n<pre id=\"0e46\" class=\"graf graf--pre graf-after--p\">POWERLEVEL9K_CUSTOM_JAVASCRIPT=\"echo -n '\\ue781' JavaScript\"<\/pre>\n<ul class=\"postList\">\n<li id=\"171b\" class=\"graf graf--li graf-after--pre\"><code class=\"markup--code markup--li-code\">echo -n<\/code>\u00a0prints the line without starting a newline at the end of it<\/li>\n<li id=\"dc73\" class=\"graf graf--li graf--startsWithSingleQuote graf-after--li\"><code class=\"markup--code markup--li-code\">\u2018\\ue781\u2019<\/code>\u00a0is the icon you want to display\u200a\u2014\u200ait needs to be in quotes and start with\u00a0<code class=\"markup--code markup--li-code\">\\u<\/code>\u00a0to tell the shell to interpret it as a unicode escape sequence to print the icon rather than the four character code<\/li>\n<li id=\"5197\" class=\"graf graf--li graf-after--li\"><code class=\"markup--code markup--li-code\">JavaScript<\/code>\u00a0is the text you want to be shown following the icon<\/li>\n<\/ul>\n<h4 id=\"692a\" class=\"graf graf--h4 graf-after--li\">Choose the background and foreground colors<\/h4>\n<p id=\"1476\" class=\"graf graf--p graf-after--h4\">The other two necessary environment variables set your chosen background and foreground colors for your custom prompt section.<\/p>\n<pre id=\"a0d5\" class=\"graf graf--pre graf-after--p\">POWERLEVEL9K_CUSTOM_JAVASCRIPT_FOREGROUND=\"black\"\r\nPOWERLEVEL9K_CUSTOM_JAVASCRIPT_BACKGROUND=\"yellow\"<\/pre>\n<p id=\"9315\" class=\"graf graf--p graf-after--pre\">The values of the color names can be changed in iTerm2\u2019s Preferences.<\/p>\n<p id=\"af76\" class=\"graf graf--p graf-after--p\"><code class=\"markup--code markup--p-code\">iTerm -&gt; Preferences -&gt; Profiles -&gt; Colors<\/code><\/p>\n<figure id=\"9b45\" class=\"graf graf--figure graf-after--p\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspectRatioPlaceholder-fill\"><\/div>\n<div class=\"progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded\" data-image-id=\"1*_H3kbFzaVHTnPyyrk9uyBQ.png\" data-width=\"2080\" data-height=\"1124\" data-action=\"zoom\" data-action-value=\"1*_H3kbFzaVHTnPyyrk9uyBQ.png\" data-scroll=\"native\"><canvas class=\"progressiveMedia-canvas js-progressiveMedia-canvas\" width=\"75\" height=\"40\"><\/canvas><img decoding=\"async\" class=\"progressiveMedia-image js-progressiveMedia-image\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*_H3kbFzaVHTnPyyrk9uyBQ.png\" data-src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*_H3kbFzaVHTnPyyrk9uyBQ.png\" \/><\/div>\n<\/div>\n<\/figure>\n<p id=\"5572\" class=\"graf graf--p graf-after--figure\">There is also an option to load in a color scheme here. One source is\u00a0<a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/iterm2colorschemes.com\/\" target=\"_blank\" rel=\"noopener nofollow\" data-href=\"https:\/\/iterm2colorschemes.com\/\">iterm2colorschemes<\/a>, which gives you about 175 choices. Once you have downloaded them, select\u00a0<code class=\"markup--code markup--p-code\">iTerm -&gt; Preferences -&gt; Profiles -&gt; Colors -&gt; Color Presets -&gt; Import<\/code>\u00a0then select the colour scheme you like, such as the\u00a0<strong class=\"markup--strong markup--p-strong\">Dracula<\/strong>\u00a0and\u00a0<strong class=\"markup--strong markup--p-strong\">Solarised Dark<\/strong>\u00a0themes.<\/p>\n<h4 id=\"9439\" class=\"graf graf--h4 graf-after--p\">Load Nerd Fonts and Powerlevel9k script<\/h4>\n<p id=\"7ef2\" class=\"graf graf--p graf-after--h4\">Once you have set up your prompt sections and custom segment in your zshrc, you then need to set Powerlevel9k to use Nerd Fonts and load the theme\u2019s script.<\/p>\n<pre id=\"465f\" class=\"graf graf--pre graf-after--p\"># Load Nerd Fonts with Powerlevel9k theme for Zsh\r\nPOWERLEVEL9K_MODE='nerdfont-complete'\r\nsource ~\/powerlevel9k\/powerlevel9k.zsh-theme<\/pre>\n<p id=\"8ff5\" class=\"graf graf--p graf-after--pre\">Below I have included an example of what it could look like when you add the whole setup together in your\u00a0<code class=\"markup--code markup--p-code\">.zshrc<\/code>.<\/p>\n<h3 id=\"0fad\" class=\"graf graf--h3 graf-after--p\">Example\u00a0.zshrc<\/h3>\n<p id=\"5730\" class=\"graf graf--p graf-after--h3\">Here is an example\u00a0.zshrc setup that you can use as a guide for your own configuration.<\/p>\n<pre id=\"1720\" class=\"graf graf--pre graf-after--p\"># Customise the Powerlevel9k prompts\r\nPOWERLEVEL9K_LEFT_PROMPT_ELEMENTS=(\r\n  dir\r\n  custom_javascript \r\n  vcs\r\n  newline\r\n  status\r\n)\r\nPOWERLEVEL9K_RIGHT_PROMPT_ELEMENTS=()\r\nPOWERLEVEL9K_PROMPT_ADD_NEWLINE=true<\/pre>\n<pre id=\"6823\" class=\"graf graf--pre graf-after--pre\"># Create a custom JavaScript prompt section\r\nPOWERLEVEL9K_CUSTOM_JAVASCRIPT=\"echo -n '\\ue781' JavaScript\"\r\nPOWERLEVEL9K_CUSTOM_JAVASCRIPT_FOREGROUND=\"black\"\r\nPOWERLEVEL9K_CUSTOM_JAVASCRIPT_BACKGROUND=\"yellow\"<\/pre>\n<pre id=\"41fc\" class=\"graf graf--pre graf-after--pre\"># Load Nerd Fonts with Powerlevel9k theme for Zsh\r\nPOWERLEVEL9K_MODE='nerdfont-complete'\r\nsource ~\/powerlevel9k\/powerlevel9k.zsh-theme<\/pre>\n<h3 id=\"1724\" class=\"graf graf--h3 graf-after--pre\">Javascript prompt<\/h3>\n<pre id=\"dbb6\" class=\"graf graf--pre graf-after--h3\">POWERLEVEL9K_CUSTOM_JAVASCRIPT=\"echo -n '\\ue781' JavaScript\"\r\nPOWERLEVEL9K_CUSTOM_JAVASCRIPT_FOREGROUND=\"black\"\r\nPOWERLEVEL9K_CUSTOM_JAVASCRIPT_BACKGROUND=\"yellow\"<\/pre>\n<h3 id=\"f10f\" class=\"graf graf--h3 graf-after--pre\">Python prompt<\/h3>\n<pre id=\"ede9\" class=\"graf graf--pre graf-after--h3\">POWERLEVEL9K_CUSTOM_PYTHON=\"echo -n '\\uf81f' Python\"\r\nPOWERLEVEL9K_CUSTOM_PYTHON_FOREGROUND=\"black\"\r\nPOWERLEVEL9K_CUSTOM_PYTHON_BACKGROUND=\"blue\"<\/pre>\n<h3 id=\"bca2\" class=\"graf graf--h3 graf-after--pre\">Ruby prompt<\/h3>\n<pre id=\"64dc\" class=\"graf graf--pre graf-after--h3\">POWERLEVEL9K_CUSTOM_RUBY=\"echo -n '\\ue21e' Ruby\"\r\nPOWERLEVEL9K_CUSTOM_RUBY_FOREGROUND=\"black\"\r\nPOWERLEVEL9K_CUSTOM_RUBY_BACKGROUND=\"red\"<\/pre>\n<h3 id=\"1244\" class=\"graf graf--h3 graf-after--pre\">Find out\u00a0more<\/h3>\n<p id=\"a037\" class=\"graf graf--p graf-after--h3\">There are loads of additional things you can add to your terminal to make it a creative, enjoyable and productive experience. For example, you could add\u00a0<a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/medium.freecodecamp.org\/lolcat-colorls-catpix-and-other-ruby-gems-to-add-color-to-your-terminal-16f4d9499ac7\" target=\"_blank\" rel=\"noopener nofollow noopener nofollow noopener\" data-href=\"https:\/\/medium.freecodecamp.org\/lolcat-colorls-catpix-and-other-ruby-gems-to-add-color-to-your-terminal-16f4d9499ac7\">Lolcat, Colorls, Catpix, and other Ruby Gems to add color to your terminal<\/a>.<\/p>\n<p id=\"a26c\" class=\"graf graf--p graf-after--p\"><strong class=\"markup--strong markup--p-strong\"><em class=\"markup--em markup--p-em\">Changed your mind?\u00a0<\/em><\/strong>You can always remove this theme and go back to the default settings. Check out this guide that explains how you can do this step-by-step.<\/p>\n<ul class=\"postList\">\n<li id=\"a13b\" class=\"graf graf--li graf-after--p\"><a class=\"markup--anchor markup--li-anchor\" href=\"https:\/\/medium.com\/the-code-review\/back-to-bash-remove-zsh-and-terminal-themes-on-a-mac-step-by-step-f89f69d2ec73\" target=\"_blank\" rel=\"noopener\" data-href=\"https:\/\/medium.com\/the-code-review\/back-to-bash-remove-zsh-and-terminal-themes-on-a-mac-step-by-step-f89f69d2ec73\">Back to Bash: Remove Zsh and terminal themes on a Mac step-by-step<\/a><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p>SOURCE:<\/p>\n<p>Written by<\/p>\n<div class=\"u-tableCell\">\n<div class=\"u-relative u-inlineBlock u-flex0\"><img decoding=\"async\" class=\"avatar-image avatar-image--small alignleft\" src=\"https:\/\/cdn-images-1.medium.com\/fit\/c\/60\/60\/1*ZdlqQlwNd4Og7k3vSuTGAA.png\" alt=\"Go to the profile of ryanwhocodes\" \/><\/p>\n<div class=\"avatar-halo u-absolute u-textColorGreenNormal svgIcon\"><a class=\"link link--primary u-accentColor--hoverTextNormal\" dir=\"auto\" style=\"font-family: inherit; font-size: 24.5px; font-weight: bold;\" title=\"Go to the profile of ryanwhocodes\" href=\"https:\/\/medium.com\/@ryanwhocodes\" rel=\"author cc:attributionUrl\" aria-label=\"Go to the profile of ryanwhocodes\" data-user-id=\"657e01f7428a\">ryanwhocodes<\/a><\/div>\n<\/div>\n<\/div>\n<div class=\"u-tableCell u-verticalAlignMiddle u-breakWord u-paddingLeft15\">\n<div class=\"ui-caption u-textColorGreenNormal u-fontSize13 u-tintSpectrum u-accentColor--textNormal u-marginBottom7\">Medium member since May 2018<\/div>\n<p class=\"ui-body u-fontSize14 u-lineHeightBaseSans u-textColorDark u-marginBottom4\">Software Developer &amp; Technology Writer. I write tutorials about Ruby, JavaScript, Docker, Git, Bash &amp; Zsh, that are published in freeCodeCamp &amp; The Code Review<\/p>\n<div class=\"u-tableCell \"><a class=\"link u-baseColor--link avatar avatar--roundedRectangle\" title=\"Go to The Code Review\" href=\"https:\/\/medium.com\/the-code-review?source=footer_card\" aria-label=\"Go to The Code Review\" data-action-source=\"footer_card\"><img decoding=\"async\" class=\"avatar-image u-size60x60 alignleft\" src=\"https:\/\/cdn-images-1.medium.com\/fit\/c\/60\/60\/1*gSTCgz0SwFKTEfbBeSeEWw.png\" alt=\"The Code Review\" \/><\/a><\/div>\n<div class=\"u-tableCell u-verticalAlignMiddle u-breakWord u-paddingLeft15\">\n<h3 class=\"ui-h3 u-fontSize18 u-lineHeightTighter u-marginBottom4\"><a class=\"link link--primary u-accentColor--hoverTextNormal\" href=\"https:\/\/medium.com\/the-code-review?source=footer_card\" rel=\"collection\" data-action-source=\"footer_card\">The Code Review<\/a><\/h3>\n<p class=\"ui-body u-fontSize14 u-lineHeightBaseSans u-textColorDark u-marginBottom4\">Programming tutorials for web and software developers<\/p>\n<\/div>\n<\/div>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>JavaScript, Python, Ruby\u200a\u2014\u200ayou name it\u200a\u2014\u200ayou can create a prompt to display\u00a0any\u00a0programming language using Powerlevel9k, a highly customisable terminal framework for [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":1035,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[49,12,70,71,88,48,4,78,119,44,29,72],"tags":[],"class_list":["post-1033","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-back-end","category-bloghassler-ec","category-chrome","category-chrome-devtools","category-design","category-front-end","category-git","category-google","category-html","category-javascript","category-programacion","category-python"],"_links":{"self":[{"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/posts\/1033","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/comments?post=1033"}],"version-history":[{"count":1,"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/posts\/1033\/revisions"}],"predecessor-version":[{"id":1036,"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/posts\/1033\/revisions\/1036"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/media\/1035"}],"wp:attachment":[{"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/media?parent=1033"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/categories?post=1033"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/tags?post=1033"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}