【大ネタ】ソースコードを貼り付ける方法NEXT
こんばんは。
ソースコードを貼り付ける方法が分かって感動している、わいのり研究所です。
1つ前の記事でお伝えした方法では、JavaScriptのソースコードは貼れませんでした。
申し訳ないです・・・。CSSや他のHTMLコードは貼れます。
そこで、つばさのーとさんが紹介してくれた2つ目の方法を試してみました。
はてなブログにソースコードを載せる3つの方法 – つばさのーと
- 2つ目の方法「Gistを利用して貼り付ける」
- 1.「GitHub Gist」のユーザ登録
- 2.ソースコードを記述(コピー)
- 3.出来上がったコードを記事にコピー
- コピペ:はてなバージョン
- 「Java Script」も貼り付けられる
- 最後に
2つ目の方法「Gistを利用して貼り付ける」
これは「GitHub Gist」というソースコード共有サービスに「ユーザ登録」して、自分が貼り付けたいソースコードを記述し、そのコピーを記事に貼るという方法です。
流れとしてはこんな感じです。
では、順に説明します。
1.「GitHub Gist」のユーザ登録
まず「GitHub Gist」にアクセスします。
このサイトは英語オンリーなので、こちらのサイト様に助けられました!
英語が苦手なフレンズに贈るGitHub事始め(GitHub公式チュートリアル翻訳) - Qiita
このサイト様を参考に進めていただければ大丈夫です。
step1.ユーザ名、メールアドレス、パスワードを設定します。
step2.無料プランを選んでくださいね。
step3.アンケートに答えてください。
あと、登録したメールアドレス宛にメールが来るので、そのリンク(「Verify email address」)からアクセスし、ユーザ名とパスワードで認証してください。
これで登録完了です。使えるようになりました。
2.ソースコードを記述(コピー)
次に、こちらのサイト様をご覧ください。
「GitHub Gist」にアクセスします。
1.上の2つの欄に分かりやすい名前を付けます。
2.中央の大きな欄に、貼り付けたいソースコードをコピペします。
3.そして、右下の「Create pbulic gist」をクリックします。
(「pbulic」は「公開の」という意味です。)
3.出来上がったコードを記事にコピー
貼り付け用のソースコードができるので、「Embed」に書いてあるコードをコピーして記事に貼り付けてください。(青色反転している部分です。)
これを「HTML編集」画面で貼り付けてください。
こんな感じで貼り付けることができます。(長くてすいません・・・)
コピペ:はてなバージョン
1回ソースコードを作成しておけば、はてな編集画面から簡単にコピペできます。
詳しくは、下記「はてなブログ開発ブログ」を参照ください。
「Java Script」も貼り付けられる
というわけで、この方法だと「Java Script」も問題なく貼り付けられます。
こんな感じです。(∩´∀`)∩ワーイ
最後に
この方法は、最初のユーザ登録が面倒ですが、「Java Script」を含んだソースコードを貼り付けたい方にはおすすめだと思います。
またまた勉強になりました。
では、今回もお付き合いいただきまして、ありがとうございました。