GitHub Gist のコードをスクリプトから更新する方法

ブラウザ上で長文テキストを編集すること、

キモいですよね、クソです!

github gist edit browser

GitHub 公式のコマンドラインツールは便利です。
👉 cli/cli: GitHub’s official command line tool hatena-bookmark


$ gh gist -h
Work with GitHub gists.

USAGE
  gh gist <command> [flags]

CORE COMMANDS
  clone:       Clone a gist locally
  create:      Create a new gist
  delete:      Delete a gist
  edit:        Edit one of your gists
  list:        List your gists
  view:        View a gist

INHERITED FLAGS
  --help   Show help for command

ARGUMENTS
  A gist can be supplied as argument in either of the following formats:
  - by ID, e.g. 5b0e0062eb8e9654adad7bb1d81cc75f
  - by URL, e.g. "https://gist.github.com/OWNER/5b0e0062eb8e9654adad7bb1d81cc75f"

LEARN MORE
  Use 'gh <command> <subcommand> --help' for more information about a command.
  Read the manual at https://cli.github.com/manual

 

エディタを変える

このデフォルトのエディタ nano って誰が推してるんすかね。


$ gh gist edit f49d4d7a9963b77d00c89d1a3dbb6976

github gh gist edit nano

変えます、emacs に。


$ EDITOR=emacs gh gist edit f49d4d7a9963b77d00c89d1a3dbb6976

いいですね。

EDITOR=emacs gh gist edit

ということは、

「gh gist edit」 は、

シェル変数 EDITOR に反応するアプリケーションですね !

 

ファイルを上書き更新する

とはいえ、

いまどきはもろGUIなIDEで豊富な機能を使ってコードは書いていきます。

なので、

パソコン上のIDEで書いたコードを Gist に更新していきたいですよね !

「更新」とは同じIDの Gist の上書きのことを言っています。


$ EDITOR="cp ~/ide/path/to/script/new.js" \
 gh gist edit f49d4d7a9963b77d00c89d1a3dbb6976

想像できてましたか?

GitHub 公式アプリ内のシェル変数 EDITOR の処理を。


[ -z "$EDITOR" ] && EDITOR=nano
$EDITOR TEMP_FILE

通常、エディタの起動コマンドを入力する文字列に


cp src-file

をセットすることで


vi tmp-file

が


cp src-file tmp-file

となり実行されます。

👉 linux - How do I edit /etc/sudoers from a script? - Stack Overflow hatena-bookmark

実際、言語は Go で書かれていますが、処理の内容はそういうことです。

 

標準入力から更新する

こんなの公開されてる方がいます。


$ echo "edit a gist from output piped from another command" | \
 EDITOR="cp "<(cat -) gh gist edit {<gist ID> | <gist URL>} [flags]

👉 GitHub CLI の gist edit へパイプを接続し、gist を編集する hatena-bookmark

「プロセス置換 (Process Substitution)」を使って処理しています。

「コマンド出力をファイル化して、そのパスを返す。」という使えるやつ。


$ cat <(date)
Thu Jul 21 12:40:53 EEST 2011

$ echo <(date)
/proc/self/fd/11

👉 プロセス置換 (Process Substitution)について - 一から勉強させてください hatena-bookmark
👉 shell - Process substitution and pipe - Unix & Linux Stack Exchange hatena-bookmark

 

まとめ

この先人たちの作ったコマンドラインツールの素晴らしさよ。

「ノーコード」とか言うてるやつな。

👉 GitHub Gist に置いた Javascript をブックマークレットとして実行する hatena-bookmark

Medium などに貼り付けられたコードをハイライトするブックマークレット

Medium とかいい記事がたくさんなのですが。

コードが見づらいときありません?

medium-code-unhighlighted

ブックマークレットで「ハイライト」します。

Medium code snippets highlight




(() => {
  const version = '11.5.0';
  const theme = 'github-dark-dimmed';
  const prefix = `//cdnjs.cloudflare.com/ajax/libs/highlight.js/${version}`;

  const link = document.createElement('link');
  link.setAttribute('rel', 'stylesheet');
  link.setAttribute('type', 'text/css');
  link.setAttribute('href', `${prefix}/styles/${theme}.min.css`);
  document.getElementsByTagName('head')[0].appendChild(link);

  const script = document.createElement('script');
  script.setAttribute('type', 'text/javascript');
  script.setAttribute('src', `${prefix}/highlight.min.js`);
  document.getElementsByTagName('head')[0].appendChild(script);

  script.addEventListener('load', function() {
    document.querySelectorAll('pre').forEach((pre) => {
      pre.style.fontFamily = 'Courier, Menlo, Consolas, Monaco, monospace';
      pre.style.overflowX = 'scroll';
      pre.style.whiteSpace = 'pre';

      // replace medium style <br/> to LF
      pre.innerHTML = pre.innerHTML.replaceAll(/<\s*\/?br\s*[\/]?>/gi, "\n")

      if (!pre.querySelector('code')) {
        window.hljs.highlightBlock(pre);
      } else {
        window.hljs.highlightBlock(pre.querySelectorAll('code')[0]);
      }
    });
  });
})();

以下リンクをブックマークバーへドラッグしてどうぞ。

highlight-code-snippets

👉 Google「Closure Compiler」 (クロージャコンパイラ) の使い方 hatena-bookmark

Chrome 最新安定版でできればいいのだが、Javascript クリップボードへのコピー

王道の本筋からやっていきたい。


(() => {
  
  const text = `${document.title}\n👉 ${location.href}`;

  // copy to clipboard
  focus(); // avoid DOMException: Document is not focused.
  navigator.clipboard.writeText(text).then(
    () => alert(text),
    error => alert(error.message)
  );
  
})();

navigator.clipboard.writeText

これでいいんかな。