カランのブログ

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

今のモード ライト

Medium 本身はコードブロックの編集をサポートしていません。その背後の理由はわかりませんが(おそらくエンジニアが主なターゲットではないためかもしれません)、したがってコードをハイライトするためには、画像を直接貼り付けるか、gistに貼り付けてから埋め込む方法があります。

コードを画像で表示することはハイライト効果を実現できますが、エンジニアにとっては非常に使い勝手が悪いです。コードを実際にテストするためにコピー&ペーストすることはできず、記事を編集する際には手動で画像を修正する必要があります。

ただし、gistに貼り付けることにもいくつかの問題があります。

  • モバイル版では表示できず、リンクが表示されるだけです。
  • 自分でコードをgistに貼り付けるのは面倒です。(ただし、VSCodeやSublimeなどの拡張機能を使用してgistにアップロードする方法もあります)

Mediumでハイライトされたコードブロックをできるだけ表示するために、最終的にはAWS Lambdaを使用することにしました。

AWS Lambda

Lambdaについて詳しく知らない読者のために、既にインターネット上には多くのリソースがありますので、ここでは詳細は省略します。LambdaはAWSにあなたの関数を実行させるためのもので、実際にサーバーを作成する必要がありません(もちろん、内部にはサーバーがあります)。この方法を使用することで、関数を作成してマシンにデプロイする必要がなくなり、さらにそれをメンテナンスする必要もありません。

GitHub Issue

Lambdaのエンドポイントとの連携のために、GitHubのWebhookを使用することにしました。GitHubではissueを使用してマークダウンを書くことができ、画像のアップロード(GitHubがホストしてくれます)、プレビュー、コードブロックなどができるため、非常に便利です。記事を公開する際には、issueをクローズしてWebhookをトリガーし、Lambdaを介してコードブロックをgistにアップロードし、最後にMedium APIを呼び出して記事を作成します。

Medium API

MediumのAPIは小さくて軽量ですが、使いやすいです。まず、個人ページの設定 > Integration tokensに移動してトークンを生成し、そのトークンを使用して記事作成のAPIを呼び出すことができます。

Gist API

gist APIも同様です。自分のgistが混乱しないようにするために、記事で使用するコードを専用のアカウントで別に作成することをお勧めします。設定 > 開発者設定 > パーソナルアクセストークンの生成に移動してトークンを作成し、gistの権限をチェックすることを忘れないでください。

Lambdaの連携

前提条件が整ったら、Lambdaとの連携を開始できます。

まず、作成したLambdaエンドポイントをGitHubのWebhookに設定し、任意のマークダウンをHTMLに変換するパッケージ(私はmarkedを使用しています)を組み合わせるだけです!

簡単な実装例はこちらにあります。少し手間がかかるかもしれませんが、実際には非常に便利です。いつになったらMediumはコードブロックをサポートするのでしょうか。QQ

次の記事

リアクト16 ハイライト

前の記事

カーニバルダブル 11 — ハッピーバースデートゥミー

この文章が役に立つと思うなら、下のリンクで応援してくれると大変嬉しいです✨

Buy me a coffee

作者

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

愷開 | Kalan

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