12/08/2018, 17:14
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 ...
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
