GitHub プログラミング

【GitHub】Gistsの使い方

更新日:

ブログにコードを貼り付ける際よく使われるのが
「Syntax highlighting」(シンタックスハイライト)。

このブログにも一応導入していますが、なんかズレる
というか、最後に余分な一行が追加される。

参考:【Android】画面回転時の状態を保存&復元する

色々調整すれば治るんでしょうが、正直設定項目が多くて面倒くさい。
「GitHubに上げたコードをそのままブログに貼れればいいのに・・・」
と思っているとあるじゃないですか(・∀・)

今回使用するのは「gist-it」というものです。

GitHubに上げたコードをそのまま貼り付ける。(使用例)

使用方法

①とりあえず「GitHub」へ。
②貼り付けたいコードがあるリポジトリのページへ行く。
③貼り付けるコードが記載されているURL(普通のヤツ)をコピー。
④コピーしたURLを下記のように編集。※下記URLは省略表記

編集前

https://github.com/KiRi-Byakuya/・・・/Program.cs

編集後

http://gist-it.appspot.com/github/KiRi-Byakuya/・・・・/Program.cs

⑤最終的にはタグを付けてこんな感じにする↓。

<script src="http://gist-it.appspot.com/github/KiRi-Byakuya/sample_test2/blob/master/sample_test2/Program.cs"></script>

表示する行を指定する。

サイトは全部英語なので詳しくはわかりませんが、ざっくり見た感じ
表示されるコードの行数を指定できるようなのでやってみる。

指定した行番号だけ表示する

※行番号1だけ表示

・・・master/sample_test2/Program.cs?slice=1">

※メモ:表示されている場所から先頭行番号は「0」であることが分かる。


行番号「x」から「y」まで表示する

※行番号3~6(x~y)を表示

・・・master/sample_test2/Program.cs?slice=3:6">


先頭「x」からフッターを除く、最終行「-y」まで表示

※先頭2行目から最終行から-5まで表示

・・・master/sample_test2/Program.cs?slice=2:-5">


フッターを消す

※フッター部分を消す。(「?footer=0」or 「?footer=no」)

・・・master/sample_test2/Program.cs?footer=0">

まとめ

う~ん・・・・。見た目で言うと「Gists」の方が好きだなぁ・・・。
でも手間を考えるとこっちの方が楽かな?てか、色々オプションがあるのに
何故行番号の表示ができないんだろうか(´・ω・`;)?

現場のプロが教えるHTML+CSSコーディングの最新常識 知らないと困るWebデザインの新ルール4
現場のプロが教えるHTML+CSSコーディングの最新常識 知らないと困るWebデザインの新ルール4 大竹孔明 小川裕之 高梨ギンペイ 中江 亮 株式会社まぼろし

エムディエヌコーポレーション 2015-03-25
売り上げランキング : 2199

Amazonで詳しく見る by G-Tools

AdSense_336px

AdSense_336px

-GitHub, プログラミング
-

Copyright© My,WebNote - 備忘録 - , 2017 AllRights Reserved