カランのブログ

ソフトウェアエンジニア / 台湾人 / 福岡生活

今のモード ライト

category: 雑談 tag: typora

Typora - 便利なマークダウンエディタ

Typoraは、私が非常に使いやすい markdown エディタであり、今まで使ってきた中でこれ以上使いやすいものはありませんでした。複雑なブログ記事はTyporaで書いてからアップロードすることがあります。Typoraには多機能があります。以下の機能があります:

  • テーブルのサポート
  • LateXの構文のサポートで数式を書くのが簡単
  • 画像を直接ドラッグアンドドロップして対応するmarkdown構文を生成することができます
  • iframe、video、rubyなど、さまざまなHTMLタグをサポートします
  • カスタムテーマを作成できます(CSSで作成)
  • ファイルやフォルダの閲覧と切り替えの機能が組み込まれています
  • さまざまなその他の便利な機能があります

これらの使い勝手の良い機能により、私はTyporaを手放せません。 ただし、画像のアップロードには少し悩んでいます。Typoraは画像のパスをmarkdownに挿入しますが、次のような構文です:

![画像の代替テキスト](/Users/Kalan/my/image/path.png)

このままコピーすると、ウェブページ上で画像が表示されないため、ユーザーはあなたのコンピュータのパスにアクセスできないため、画像をクラウドやサーバーのストレージにアップロードする必要があります。手動で処理するのは面倒ですし、画像が大きい場合は圧縮してからアップロードしたいと思うこともありますが、操作が増えると面倒に感じ、記事の執筆が中断されることがあります。

そこで、エディタを切り替えずに直接画像をアップロードできる方法はないかと考えました。Typora自体、画像のドラッグアンドドロップ機能が非常に強力で、ウェブページからのコピー&ペーストも完全に機能します。Typoraは本当に素晴らしいユーザーインターフェースです。

ついに、これを見つけました:

Typoraの画像アップロード

これは驚きです!この機能により、エディタに画像を追加する際にトリガーされる振る舞いを指定できます。例えば、特定のフォルダに一括で移動したり、画像をアップロードしたりすることができます。さらに、コマンドを自分で定義して画像をアップロードすることもできます!

Typoraのカスタムアップロードインターフェイス

このuploadコマンドでは、画像を圧縮してS3にアップロードし、画像のURLを返します。残りのUIや状態のインタラクションはTyporaが処理しますので、画像のアップロードが完全にスムーズになります!

完了後の効果は次のようになります:

実装

私のGithubで、このプログラム(Node.jsで作成)を直接参照できます。実装は非常に簡単ですが、すぐに完成させたかったのでパッケージをインストールしてすぐにアップロードしました。最初から自分で作りたい場合は、自分で書いてみてください。現時点では、S3のみをサポートしています。

後書き

これにより、私の人生に新たな扉が開かれました。写真の処理が面倒で記事を投稿するのを躊躇しなくなりました。マークダウンでコンテンツを作成することが好きな人々と共有します。

作者

Kalan 頭像照片,在淡水拍攝,淺藍背景

愷開 | Kalan

Kalan です。台湾出身で、2019年に日本へ転職し、福岡に住んでいます。フロントエンド開発に精通しているだけでなく、IoT、アプリ開発、バックエンド、電子工作などの分野にも挑戦しています。 最近、エレキギターを始めました。ブログを通じて、より多くの人と交流できればと思っています。気軽に絡んでください