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