GitHubやQiitaなどのコメント欄はただの<textarea>で、シンタックスハイライトされていたりするわけではありません。 そのため、その場でコードを書いたりインデントするのが難しかったり、壊れていたり読みにくいコードを書いてしまいやすいです。 (インデントがバラバラだったりすることが多いです)

そのため、<textarea>をショートカット一発で、CodeMirrorを使ったエディタにその場で差し替えるGreasemonkeyスクリプトを書いていました。(Violentmonkey、Tampermonkeyなどでも動くので、Chromeなどでも動くと思います)

• テキストエリアをMarkdownエディタに切り替えるGreasemonkeyを書いた | Web Scratch

最近アップデートして、このスクリプトにprettierを組み込みました。

次のようにCmd+Alt+Fを押すだけで、Markdownやその中のコードブロックを整形できます。

@codemirror + @PrettierCode + #Greasemonkey

Write syntax highlighted Markdown in anywhere.https://t.co/gd0KBOcjST pic.twitter.com/3O5q1IlBJ4

— azu (@azu_re) December 27, 2018

インストール

次のURLをクリックすればインストールできます。

• codemirror-anywhere.user.js

Dependencies:

先にGreamonkeyなどの拡張をブラウザにインストールしておく必要があります。

• Greasemonkey – Firefox
• Tampermonkey - Chrome

使い方

1. <textarea>にフォーカスする
2. Cmd+E or Ctrl+Eを押す -textarea と CodeMirror をトグルできます。
3. Cmd+E or Ctrl+Eを押すと戻せます

ショートカット

• Cmd+Alt+F: prettierでの整形

リポジトリ

• azu/codemirror-anywhere: [Greasemonkey] Use CodeMirror editor instead of textarea in anywhere

結構ざっくり作ったやつなので、IssueやPull Reuqestを待っています。