Skip to content

Instantly share code, notes, and snippets.

@dariuszparys
Last active May 4, 2022 22:53
Show Gist options
  • Save dariuszparys/64fdba8cb802d3f8ef87cdadbf2afb73 to your computer and use it in GitHub Desktop.
Save dariuszparys/64fdba8cb802d3f8ef87cdadbf2afb73 to your computer and use it in GitHub Desktop.
Hyper.js terminal settings with Fira Code
// This configuration is meant to be used in WSL v1 for Windows
// It is also not maintained anymore, as I switched to Windows Terminal
module.exports = {
config: {
// Disabling WebGL renderer to make font-ligatures work
// https://github.com/tolbertam/hyper-font-ligatures#disabling-webgl-rendering
webGLRenderer: false,
// default font size in pixels for all tabs
fontSize: 24,
// font family with optional fallbacks
fontFamily: '"Fira Code", Menlo, "DejaVu Sans Mono", "Lucida Console", monospace',
// terminal cursor background color and opacity (hex, rgb, hsl, hsv, hwb or cmyk)
cursorColor: '#1df9ca',
// `BEAM` for |, `UNDERLINE` for _, `BLOCK` for █
cursorShape: 'BLOCK',
// color of the text
foregroundColor: '#fff',
// terminal background color
backgroundColor: '#0f111d',
// border color (window, tabs)
borderColor: '#1df9ca',
// custom css to embed in the main window
css: '',
// custom css to embed in the terminal window
termCSS: `
x-screen x-row {
font-variant-ligatures: initial;
}
`,
// custom padding (css format, i.e.: `top right bottom left`)
padding: '15px 15px',
// 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
// Set the theme variant,
colors: {
black: '#000000',
red: '#F33F75',
green: '#91F894',
yellow: '#E5F99F',
blue: '#4E93F4',
magenta: '#fd90ff',
cyan: '#8AEFFF',
white: '#FCFCFC',
// Light Colors
lightBlack: '#84858f',
lightRed: '#F33F75',
lightGreen: '#91F894',
lightYellow: '#E5F99F',
lightBlue: '#D7C5FB',
lightMagenta: '#fd90ff',
lightCyan: '#A8D1FF',
lightWhite: '#FFFBFA'
},
// 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
shell: 'c:\\windows\\system32\\bash.exe',
// for setting shell arguments (i.e. for using interactive shellArgs: ['-i'])
// by default ['--login'] will be used
shellArgs: ['--login'],
// for environment variables
env: {},
// set to false for no bell
bell: 'SOUND',
// if true, selected text will automatically be copied to the clipboard
copyOnSelect: true
// URL to custom bell
// bellSoundURL: 'http://example.com/bell.mp3',
// for advanced config flags please refer to https://hyper.is/#cfg
},
// a list of plugins to fetch and install from npm
// format: [@org/]project[#version]
// examples:
// `hyperpower`
// `@company/project`
// `project#1.0.1`
// "hyperterm-mactabs",
// 'hyper-sierra-vibrancy',
plugins: [ "hyperblue-vibrancy", "hyper-statusline", "hyperterm-tab-icons", "hyperterm-close-on-left", "hyperterm-paste", "hyperlinks", "hypercwd", "hypertitle"],
// 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: [],
};
@dariuszparys
Copy link
Author

@ryanwarsaw Thanks for sharing

@atmonello
Copy link

Just a heads up: this is meant for running on Windows, right?
The shell option points to Windows CMD and it was throwing error execvp(3) failed: No such file or directory

Removing that specific line solved the problem.

@ryanwarsaw
Copy link

@atmonello I think the file won't exist if you don't have the Windows SubSystem for Linux enabled

@dariuszparys
Copy link
Author

@atmonello yes, this is for windows running the first version of Windows Subsystem for Linux. As I don't use any longer hyper.js I haven't updated it for a long while

@FrankFlitton
Copy link

Thanks! This works great for OSX. I had to add webGLRenderer: false to my existing config.

@XavierJece
Copy link

XavierJece commented Feb 19, 2022

@ryanwarsaw I updated hyper.js with the settings below and I couldn't get the Fira Code or MesloLGL font to work. The version of hyper that is installed is 3.2.0

module.exports = {
  config: {
    fontFamily: '"MesloLGL Nerd Font Bold", "Fira Code Light", Menlo, "DejaVu Sans Mono", Consolas, "Lucida Console", monospace',
    webGLRenderer: false,
  },
  plugins: [
    "hyper-font-ligatures"
  ],
};

I want to make the exa --icons -la command icons work, today it appears as an unknown character.

image

In Ubuntu 20.04 default terminal it's already working
image

@ryanwarsaw
Copy link

ryanwarsaw commented Feb 19, 2022

@XavierJece I ended up switching back to iTerm2, I don't see anything in your configuration that looks wrong - I would make sure you're using a patched font (it looks like you are), you may also try to after your entry for the bold font, import the regular version. May be possible that the bold version doesn't have all the glyphs you're needing, good luck!

This part of his configuration may also be useful for you:

// custom css to embed in the terminal window
    termCSS: `
    x-screen x-row {
        font-variant-ligatures: initial;
    }
    `,

@sbanders1
Copy link

I was wrestling with this today. I'm using Hyper on Windows 10 Pro. For others who might be wrestling with this, I also was having issues where the font would create tiny boxes with question marks. Turns out it was because my version of Windows 10 Pro was not activated. I found this out by trying to search for Fonts in the settings, and was unable to search for any of the Nerd Fonts I thought I had downloaded. Activating Windows 10 Pro fixed the problem as soon as I reloaded.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment