DEV Community

Afroze Kabeer Khan. M
Afroze Kabeer Khan. M

Posted on

Configuring Hyper Terminal in Windows

So what is hyper?

Hyper is a highly extensible & customisable πŸ“, electron based terminal application for cross platform.

So, I'll share how I have configured my windows bash as interactive as possible. ☝️

In my development phase. I can take the privilege of saying pre hyper and post hyper. As my work most of it involved with terminal, there use to be a bunch of command prompt windows opened.

After hyper came into my life it was more organised. Since they said that it is completely customisable I started to see the plugins and what we can do with that.

So I made a few changes by installing plugins like hyper-power, hyper-border, hyper-cwd.

After all this is done. I took a look at ZSH terminal for MAC users. Which was not possible in windows as you have to setup PS1 Variable which is not going to happen in command prompt.
PS : There was also no colored output. Maybe i don't know how to do that!

So I found a way that we can do that in git bash. So this put an interesting smile on my face 😁. In my hyper config changed the terminal to git-command and some extra parameters to start it. Then edited the PS1 of Git bash.

Then, something was wrong i was'nt getting the special characters like branch icon / the wrong symbol. After doing some research i found the font Fira Code. Just changed the font family in hyper config to Fira Code after installation. Now take a look how it looks.

Hyper Look

And here is my config file . Link

// Future versions of Hyper may add additional config options,
// which will not automatically be merged into this file.
// See https://hyper.is#cfg for all currently supported options.
module.exports = {
    config: {
        // choose either `'stable'` for receiving highly polished,
        // or `'canary'` for less polished but more frequent updates
        updateChannel: 'stable',
        // default font size in pixels for all tabs
        fontSize: 12,
        // font family with optional fallbacks
        fontFamily: "Fira Code",
        // default font weight: 'normal' or 'bold'
        fontWeight: 'normal',
        // font weight for bold characters: 'normal' or 'bold'
        fontWeightBold: 'bold',
        // terminal cursor background color and opacity (hex, rgb, hsl, hsv, hwb or cmyk)
        cursorColor: 'rgba(248,28,229,0.8)',
        // terminal text color under BLOCK cursor
        cursorAccentColor: '#000',
        // `'BEAM'` for |, `'UNDERLINE'` for _, `'BLOCK'` for β–ˆ
        cursorShape: 'BLOCK',
        // set to `true` (without backticks and without quotes) for blinking cursor
        cursorBlink: true,
        // color of the text
        foregroundColor: '#fff',
        // terminal background color
        // opacity is only supported on macOS
        backgroundColor: '#000',
        // terminal selection color
        selectionColor: 'rgba(248,28,229,0.3)',
        // border color (window, tabs)
        borderColor: '#333',
        // custom CSS to embed in the main window
        css: '',
        // custom CSS to embed in the terminal window
        termCSS: '',
        // if you're using a Linux setup which show native menus, set to false
        // default: `true` on Linux, `true` on Windows, ignored on macOS
        showHamburgerMenu: '',
        // set to `false` (without backticks and without quotes) if you want to hide the minimize, maximize and close buttons
        // additionally, set to `'left'` if you want them on the left, like in Ubuntu
        // default: `true` (without backticks and without quotes) on Windows and Linux, ignored on macOS
        showWindowControls: 'left',
        // custom padding (CSS format, i.e.: `top right bottom left`)
        padding: '12px 14px',
        // the full list. if you're going to provide the full color palette,
        // including the 6 x 6 color cubes and the grayscale map, just provide
        // an array here instead of a color map object
        colors: {
        black: '#000000',
        red: '#C51E14',
        green: '#1DC121',
        yellow: '#C7C329',
        blue: '#0A2FC4',
        magenta: '#C839C5',
        cyan: '#20C5C6',
        white: '#C7C7C7',
        lightBlack: '#686868',
        lightRed: '#FD6F6B',
        lightGreen: '#67F86F',
        lightYellow: '#FFFA72',
        lightBlue: '#6A76FB',
        lightMagenta: '#FD7CFC',
        lightCyan: '#68FDFE',
        lightWhite: '#FFFFFF',
        },
        // the shell to run when spawning a new session (i.e. /usr/local/bin/fish)
        // if left empty, your system's login shell will be used by default
        //
        // Windows
        // - Make sure to use a full path if the binary name doesn't work
        // - Remove `--login` in shellArgs
        //
        // Bash on Windows
        // - Example: `C:\\Windows\\System32\\bash.exe`
        //
        // PowerShell on Windows
        // - Example: `C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe`
        shell: "C:\\Program Files\\Git\\git-cmd.exe",
        // for setting shell arguments (i.e. for using interactive shellArgs: `['-i']`)
        // by default `['--login']` will be used
        shellArgs: ['--command=usr/bin/bash.exe', '-l', '-i'],
        // for environment variables
        env: { TERM: 'cygwin' },
        // set to `false` for no bell
        bell: 'SOUND',
        // if `true` (without backticks and without quotes), selected text will automatically be copied to the clipboard
        copyOnSelect: false,
        // if `true` (without backticks and without quotes), hyper will be set as the default protocol client for SSH
        defaultSSHApp: true,
        // if `true` (without backticks and without quotes), on right click selected text will be copied or pasted if no
        // selection is present (`true` by default on Windows and disables the context menu feature)
        // quickEdit: true,
        // URL to custom bell
        // bellSoundURL: 'http://example.com/bell.mp3',
        // for advanced config flags please refer to https://hyper.is/#cfg
        opacity: 0.96
    },
    // a list of plugins to fetch and install from npm
    // format: [@org/]project[#version]
    // examples:
    // `hyperpower`
    // `@company/project`
    // `project#1.0.1`
    plugins: [
    "hyper-snazzy",
    "hyper-systray",
    "hyper-opacity",
    "hyper-tab-icons",
    "hyperborder"
    ],
    // in development, you can create a directory under
    // `~/.hyper_plugins/local/` and include it here
    // to load it and avoid it being `npm install`ed
    localPlugins: [],
    keymaps: {
    // Example
    // 'window:devtools': 'cmd+alt+o',
    }
};
Enter fullscreen mode Exit fullscreen mode

Resources

Some links that i found helpful in the path of customization πŸ˜‰

Discussion (21)

Collapse
fhtunderwoodii profile image
Thomas R. Underwood II

The only thing preventing this from being a great article is the lack of explanation or examples provided for setting up oh-my-git on Windows.

Collapse
omorfaruque_of profile image
Omor Faruque

It would be great if you can elaborate it with a detailed explanation on how did you installed oh my git on windows and how did you configure it with git bash.
Hope you will provide us this info, it will be a great help for us.
Thanks

Collapse
droidmakk profile image
Afroze Kabeer Khan. M Author

Hey, Hi. I installed Fira Code font. Changed the font family for bash in config and customized the PS1 variable.

Collapse
omorfaruque_of profile image
Omor Faruque • Edited on

How did you customize the PS1 variable? Cause I have 0 knowledge on shell script so I don't know what part to change plus I have read the oh-my-git installation guide there I couldn't find anything on how to install it on windows and integrate with git bash.

Thread Thread
dnyy profile image
Daniel

I'm not quite there yet either but i found this helpful:
alanbarber.com/post/how-to-customi...

Thread Thread
loctran016 profile image
LocTran016

Did you mean that I should add something like this source $HOME/oh-my-git/prompt.sh to C:\Program Files\Git\etc\profile.d\git-prompt.sh

Thread Thread
loctran016 profile image
LocTran016

I've figured this out.
First you have to clone oh-my-git:

cd c:/
git clone https://github.com/arialdomartini/oh-my-git.git
Enter fullscreen mode Exit fullscreen mode

Then add this line to your C:\Program Files\Git\etc\profile.d\git-prompt.sh:

source c:/oh-my-git/prompt.sh
Enter fullscreen mode Exit fullscreen mode
Collapse
guptaji6 profile image
Ayush Gupta

Hey, Afroze!

This was exactly what I was looking for. Thank you so much for sharing your setup.

I'm facing a problem. My current setup looks like this.

Current Hyper Setup

It doesn't show the path of directory like your terminal does. I think that's because of PS1 you edited of Git Bash.

How do I do that on Windows?

Also, how do I setup oh-my-git on Windows?

Collapse
droidmakk profile image
Afroze Kabeer Khan. M Author • Edited on

You can use this link to set PS1 variable on your git bash.

Find your config file here
C:\Program Files\Git\etc\profile.d\lang.sh

Collapse
zayrtun profile image
Zayar Tun

Hi did you get it to work?

Collapse
guptaji6 profile image
Ayush Gupta

Not yet. It's still the same as looks in screenshot.

Collapse
mvais profile image
Vais Mahendran

This is really cool, thanks for sharing.

I'm struggling to properly display the git branch like you have, as I'm unable to display the symbols. I have Fira Code installed and set, can you share what values you edited in the PS1 of git bash?

Collapse
jeromescuggs profile image
andrew snow

you'll want to find a version of fira code that has been patched with 'powerline characters' - powerline is the name of a prompt style which i guess popularized the use of these stylistic additions.

a quick google gave me this patched version: github.com/ryanoasis/nerd-fonts/tr...

besides that, this is what i use to quickly setup a batch of pre-patched fonts: github.com/powerline/fonts

Collapse
akhilalekha profile image
Akhila

I wanted to change the font to Ubuntu Mono, I installed the font and changed it on hyper but I get this ugly font every time I try to change it. It's as if it won't accept anything other than the default font! :-/

Collapse
likelocusts profile image
LikeLocusts

How did you set the style of your git-bash?
Does oh-my-git work on windows too?

Collapse
droidmakk profile image
Afroze Kabeer Khan. M Author

That you can configure separately for git-bash. Yes oh-my-git works its just the font fira-code does the magic!

Collapse
joelbellido profile image
joelbellido

Hi friend, I'm trying to configure the PS1 without success, could you please help me

Thread Thread
droidmakk profile image
Afroze Kabeer Khan. M Author

Can you share your PS1 you've configured

Collapse
azrizhaziq profile image
Azriz Jasni

Thank you sir, your config save my life

Collapse
joelbellido profile image
joelbellido

Hi friend, I'm trying to configure the PS1 without success, could you please help me

Collapse
joelbellido profile image
joelbellido

Hi friend, I'm trying to configure the PS1 without success, could you please help me