curlで取得したウェブのソースコードに色を付けたい


iPadでコーディングをしているとブラウザからソースを確認できないため不便です。
ソースを見る専用のアプリもあるようだけど、アプリを入れずにどうにかならないかと模索しました。

対象はiPadからリモートでLinuxに入って作業するような人です。
※iPadのプログラミング環境構築の話はこちら
https://qiita.com/shuuuta/items/7a3f3801e0209f9ad5ac

コマンドの流れ

curlで取得してsource-highlightで色つけてlessで見ます。

source-highlightをインストール

source-highlightが必要なのでまずはインストール。aptなら以下で。

$ sudo apt install source-highlight

使ってみる

コマンドはこんな感じ。

curl -s https://qiita.com|source-highlight --failsafe -f esc --line-number -s html|less -R

オプションはこんな感じになっています。

  • source-highlight
    • -f esc: エスケープシーケンスを使って色を表現。
    • -s html: ハイライトの種類をhtmlに指定。
  • less -R: カラーエスケープシーケンスを読み込む。

関数にしておくときっと便利

~/.bashrcにこんな感じで書いておくと都度長々書かなくてすみますね。

.bashrc
function websource {
  curl -s $1|source-highlight --failsafe -f esc --line-number -s html|less -R
}
websource https://www.yahoo.co.jp

ちゃんと色分けされて取得できました。

ソース表示と開発者ツールをお願いします

ブラウザのソース表示とウェブインスペクタがiPad OSで実装されたらいいなぁと思っていましたが、残念ながらきませんでしたね。
実装される気配もないですが、この2つさえ使えればあとはフロントエンド制作もなんとかなりそうなんだけどなぁ。
appleさんよろしくお願いします。

[追記] batコマンドを使う方法

コメントでbatというコマンドを教えていただきました、ありがとうございます。
https://github.com/sharkdp/bat/blob/master/doc/README-ja.md

githubから落としてインストールしたら

curl -s https://qiita.com|bat

でハイライトされたコードが見られます。

デフォルトのカラーはこっちの方が好みだなぁ。