Lightningで見栄えの良いターミナル風画面

CSSのカスタマイズで見栄えの良いターミナル風画面を作ってみる。
いろいろ方法はあるが、今回は、ExUnit > CSSカスタマイズ で追加する。

表示したい箇所は「コード<>」を選択して、追加CSSクラスに「TerminalBox」を指定する。
プレビュー画面での確認になるがまぁまぁ見た目は良いはず

/* ターミナル画面 */
.TerminalBox {
  padding: 0.5em;
  margin: 15px 0;
  color: white;
  background:#24292e;/*背景色*/
  font-family: “SFMono-Regular”,Consolas,”Liberation Mono”,Menlo,Courier,monospace
}
.TerminalBox p {
  padding: 0;
  margin: 0;
}

出来上がりはこんな感じ

terminalbox.png

おまけで、ラズパイのようにプロンプトに色がついていれば、

pi@raspberrrpii#00ff00
~ $#7f7ffd

で着色するとさらにいい感じかな?

TeraTerm の画面加工

TeraTermのコンソール画面だけを切り出す方法

$ convert -crop 798x538+1+67 hogehoge_original.png hogehoge_custom.png

みたいにすると良い


添付ファイル: fileterminalbox.png 606件 [詳細]

トップ   編集 凍結 差分 履歴 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2022-01-16 (日) 20:29:28