LoginSignup
2
0

More than 1 year has passed since last update.

Medium で GitHub のコードブロックを埋め込む

Last updated at Posted at 2021-07-08

Medium で海外案件をゲット

Qiita 読者様のなかに、海外からのお仕事がほしい方はいらっしゃいますか?
Medium という英語のブログサービスがあり、
技術記事もけっこう投稿されています
わりと有名なサービスらしく、ここに技術記事を書いておくと、
海外から仕事の相談や依頼がきたりします
ぼくも数件きました。

スクリーンショット 2021-07-09 8.32.27.png

記事にコードブロックを埋め込む

Medium のコードブロックは見にくい

さて、Medium に技術記事を書こう、と思ったとき、
直面するのがコードブロックの問題です。

Qiita の便利なコードブロックになれた方は、 Medium のコードブロックが
あつかいづらく見にくいと感じるとぼくは思います

画像:Medium のコードブロック
スクリーンショット 2021-07-09 8.15.26.png

見にくくないですか?

コードブロックの貼り方は、シンプルに バッククォートキー(このチョン→ ` )3つでコードの前後を囲むことです。
このやり方は Qiita と同じですが、

Qiita とちがって言語指定ができない(全文字黒でメリハリがない)

コピペした時の改行とインデントがバラバラ

といった問題があります。

画像:Xcode からコードをコピペした直後の現場

スクリーンショット 2021-07-09 8.14.52.png

代替手段としての GitHub gist

代替手段として、 GitHub gist をコードブロックとして埋め込むことができます

スクリーンショット 2021-07-09 8.27.40.png

GitHub のコードの断片の共有サービスにコードを書いて、 gist の URL を Medium の行に貼り付けると、上記のように表示されます。

メリットとして、

コードが色分けされて見やすい

改行やインデントが保持されるので、貼り付けやすいし、見やすい

といったことがあります。

【gist を埋め込む手順】

1、GitHub gist にアクセスして、
説明、ファイル名、コードを記入する。

スクリーンショット 2021-07-09 8.34.41.png

2、 右下の「 Create Secret gist 」を 「 Create Public gist 」にかえ、
公開する。

スクリーンショット 2021-07-09 8.34.33.png

3、公開された gist のページ URL を直接 Medium の記事の行に貼り付ける。

※ embed の スクリプトではなく、ブラウザの URL に表示される URL です

これであなたもグローバル・エンジニア。

🐣


フリーランスエンジニアです。
お仕事のご相談こちらまで
rockyshikoku@gmail.com

Core MLを使ったアプリを作っています。
機械学習関連の情報を発信しています。

Twitter
Medium

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0