vercel / hyper

A terminal built on web technologies
https://hyper.is
MIT License
43.27k stars 3.52k forks source link

PowerLevel10k and ColorLS symbols are not showing up, please help #5302

Open iCraft85 opened 3 years ago

iCraft85 commented 3 years ago

Issue

I was trying to get ZSH working with Hyper but then when I try to use PowerLevel10k and ColorLS, the icons don’t show up and instead are boxes, I tried using different fonts but I believe I am not doing it correctly because it either makes the text smaller or doesn't change anything <img width="619" alt="Screenshot 2021-02-10 at 12 11 45 PM" src="https://user-images.githubusercontent.com/58494292/107463729-b2de1800-6b99-11eb-8977-6cdacf2bd122.png"

LabhanshAgrawal commented 3 years ago

post your config (copy everything from the file that opens on doing cmd+,)

iCraft85 commented 3 years ago

Is this What you mean:


// 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: 'canary',

    // default font size in pixels for all tabs
    fontSize: 13,

    // font family with optional fallbacks
    fontFamily: 'Menlo, "DejaVu Sans Mono", Consolas, "Lucida Console", monospace',

    // default font weight: 'normal' or 'bold'
    fontWeight: 'normal',

    // font weight for bold characters: 'normal' or 'bold'
    fontWeightBold: 'bold',

    // line height as a relative unit
    lineHeight: 1,

    // letter spacing as a relative unit
    letterSpacing: 0,

    // 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: false,

    // 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: '',

    // 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: '',

    // 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` (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: false,

    // choose either `'vertical'`, if you want the column mode when Option key is hold during selection (Default)
    // or `'force'`, if you want to force selection regardless of whether the terminal is in mouse events mode
    // (inside tmux or vim with mouse mode enabled for example).
    macOptionSelectionMode: 'vertical',

    // URL to custom bell
    // bellSoundURL: 'http://example.com/bell.mp3',

    // Whether to use the WebGL renderer. Set it to false to use canvas-based
    // rendering (slower, but supports transparent backgrounds)
    webGLRenderer: true,

    // 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`
  plugins: [],

  // 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',
  },
};
LabhanshAgrawal commented 3 years ago

you need to use a font with powerline glyphs

LabhanshAgrawal commented 3 years ago

install some font from https://github.com/powerline/fonts and add that to the fontFamily config options

iCraft85 commented 3 years ago

But I have all of the powerline fonts downloaded, which font family shld I use

LabhanshAgrawal commented 3 years ago

you can use any of them, just add their name in the beginning of the fontFamily option

iCraft85 commented 3 years ago

I installed Fira Mono and was trying to use it but it still doesnt work

LabhanshAgrawal commented 3 years ago

so change your config

fontFamily: '"Fira Mono for Powerline", Menlo, "DejaVu Sans Mono", Consolas, "Lucida Console", monospace',
iCraft85 commented 3 years ago

I did that but it still doesn't work

LabhanshAgrawal commented 3 years ago

can you post your full config again?

iCraft85 commented 3 years ago

// 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: 'canary',

// default font size in pixels for all tabs
fontSize: 13,

// font family with optional fallbacks
fontFamily: 'Fira Mono for Powerline, Menlo, "DejaVu Sans Mono", Consolas, "Lucida Console", monospace',

// default font weight: 'normal' or 'bold'
fontWeight: 'normal',

// font weight for bold characters: 'normal' or 'bold'
fontWeightBold: 'bold',

// line height as a relative unit

".hyper.js" 160L, 5324C

LabhanshAgrawal commented 3 years ago

You need to put the font name in double quotes " as it contains spaces in the name like I'd written earlier

fontFamily: '"Fira Mono for Powerline", Menlo, "DejaVu Sans Mono", Consolas, "Lucida Console", monospace',
iCraft85 commented 3 years ago

ok

iCraft85 commented 3 years ago

I did that but it still doesnt work

LabhanshAgrawal commented 3 years ago

can you upload your full config? not just the fonts part. maybe you're using plugins or something, you can create a gist

iCraft85 commented 3 years ago

But when I do vim ~/.hyper.js thats all that it shows me

iCraft85 commented 3 years ago

Nvm I figured it out

iCraft85 commented 3 years ago

This is the gist: https://gist.github.com/iCraft85/a07bb8b1cd5630a4530aa554435607dc

iCraft85 commented 3 years ago

Hello?

LabhanshAgrawal commented 3 years ago

I tried with your config it's working for me. I'm using a build from latest canary, you can try that from here

Also check https://github.com/powerline/fonts#fontconfig once if it might be affecting you

iCraft85 commented 3 years ago

'fc-cache -vf' <- Where do I run this, and also the enable thing was alrdy one with the code it asked me to paste and it was called '50-enable-terminess-powerline.conf'

LabhanshAgrawal commented 3 years ago

I think you can run the command from your home folder also did you try the ci build?

iCraft85 commented 3 years ago

ci build, do you mean the latest canary if so, I would assume I am doing that because in my config I set it to canary which from the best of my knowledge is the latest update, and for the command I get this error: zsh: 'command not found: fc-cache'

LabhanshAgrawal commented 3 years ago

Well that canary release is also quite old now, you can get a new build from the latest commit from the link I put earlier. I think you need to install that from brew with brew install fontconfig

justnixx commented 3 years ago

Try the Caskaydia Cove Nerd Font. Remember to update your hyper configuration file, change the fontFamily property value to "CaskaydiaCove Nerd Font Mono". It's gonna look like this: fontFamily: '"CaskaydiaCove Nerd Font Mono", monospace', Restart the configuration wizard, by typing p10k configure