+2

Tạo My terminar sử dụng HyperTerm

Bài viết này tôi sẽ giới thiệu về customize của HyperTerm sử dụng js,html,css.

Phương pháp cài đặt

Bạn cũng có thể làm DL trực tiếp từ trang HyperTerm, hoặc DL bằng lệnh thông qua Homebrew Cask.

brew update
brew cask install hyper

Windows cũng có thể DL thông qua chocolatey.

choco install hyper

Customize

Đây là một màn hình terminal mặc định Ta có thể tùy chỉnh thông qua file JSON của. Hyperterm.js bằng cách sử dụng phím tắt ⌘ hoặc gọi từ Preference trong menu hyper.

Thiết đặt Property

Ta có thể thiết đặt các Property sau:

Property Giải thích
fontSize Font size hiển thị
fontFamily Thiết đặt font sử dụng
uiFontFamily Thiết đặt font family sử dụng làm UI
cursorColor Màu cursor của terminal
cursorShape Thay đổi hiển thị curcos thành _ bằng UNDERLINE hoặc thành █ bằng BLOCK
cursorBlink Tạo sự nhấp nháy cho cursor
foregroundColor Màu của toàn bộ text
backgroundColor Thiết đặt độ trong suốt và màu của nền
borderColor Màu của border giới hạn của cửa sổ main
css CSS tùy chỉnh của màn hình main
termCSS CSS tùy chỉnh của cửa sổ terminal
padding Thiết đặt padding
colors Thiết đặt màu default
shell Đường dẫn đến Custom shell được thực thi khi Hyper bắt đầu phiên mới
npmRegistry Ghi đè URL đăng ký npm được sử dụng khi cài đặt plugin
windowSize Chiều rộng/cao mặc định bằng pixel của cửa sổ mới (Ví dụ: [540,380])
copyOnSelect Nếu là "true", văn bản đã chọn sẽ tự động sao chép vào khay nhớ tạm
bell Cấu trúc chuông hệ thống
bellSoundURL URL của tiếng chuông chỉ khi thiết đặt "bell" thành "SOUND"
modifierKeys Thay đổi hành vi của các phím bổ trợ đóng vai trò như các phím meta
showHamburgerMenu Thay đổi hiển thị Hamburger Menu
showWindowControls Thay đổi hiển thị / vị trí của window controls

Dựa vào thông tin trên, tôi đã cố tùy chỉnh nó như sau. Vì CSS cũng có thể tùy chỉnh nên hình nền của terminal cũng có thể được thiết lập.

module.exports = {
  config: {
    updateChannel: 'stable',
    fontSize: <span class="number">12</span>,
    fontFamily: 'Menlo, <span class="string">"DejaVu Sans Mono"</span>, Consolas, <span class="string">"Lucida Console"</span>, monospace',
    cursorColor: '<span class="comment">#7294c2',</span>
    cursorShape: 'BLOCK',
    cursorBlink: <span class="constant">false</span>,
    foregroundColor: '<span class="comment">#585d61',</span>
    backgroundColor: '<span class="comment">#dfecf5',</span>
    borderColor: '<span class="comment">#fff',</span>
    css: '
    .terms_terms{
            background:url(<span class="type">file</span>:path/hayachi.png) no-<span class="keyword">repeat</span> bottom right;background-size:<span class="number">222</span>px auto;
        }
    '
    //省略
  }
};

Màn hình terminal kết quả: Giới thiệu một số theme và Plug-in:

https://github.com/zeit/hyperpower

https://github.com/klauscfhq/hyper-pokemon

https://github.com/bnb/awesome-hyper


All rights reserved

Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí