Nプログラマです。
前回の記事の続きです。
gist-embedの使い方の備忘録です。
今回は以下のデータ属性（行周り）の使い方を調べていきます。
| data-gist-hide-line-numbers | 行番号を非表示にする |
| data-gist-line | 指定した行を表示する |
| data-gist-highlight-line | 指定した行をハイライトする |
| data-gist-lines-expanded | data-gist-lineで指定した行以外を折りたたむ |
下準備の方法などは、前回の記事よりご確認を。。。
概要
目標
- gist-embedのデータ属性の使い方を調べて使ってみる
- 調べるデータ属性
- data-gist-hide-line-numbers
- data-gist-line
- data-gist-highlight-line
- data-gist-lines-expanded
gist-embedの作者様
作者様のgithubはこちらです。
(公式の使い方の説明はtest.htmlにあります)
https://github.com/blairvanderhoof/gist-embed
今回のサンプルコード
前回と同じサンプルコードを使って説明していきます。
調査したデータ属性
data-gist-hide-line-numbers: 行番号を非表示にする
ソースコードの左側に表示されている行番号を非表示にします。
データ属性にはtrueを指定します。
デフォルトでは行番号は表示されています。
sample.phpで表示と非表示で比較してみましょう。
行番号を表示（デフォルト）
コード
<code data-gist-id="8cdaee4d7cbb7b77f0b1bf1656018aed" data-gist-file="sample.php"></code>結果
行番号を非表示
コード
<code data-gist-id="8cdaee4d7cbb7b77f0b1bf1656018aed" data-gist-hide-line-numbers="true" data-gist-file="sample.php"></code>結果
非表示になっていることを確認できました。
data-gist-line: 指定した行を表示
こちらはgist-data-file属性と一緒に使いましょう。
カンマ区切りで複数行を指定することもできます。
以下のような組み合わせで表示することができます。
| 1行目を表示 | data-gist-line=”1″ |
| 1行目と3行目を表示 | data-gist-line=”1,3″ |
| 1から3行目までを表示 | data-gist-line=”1-3″ |
| 1から2行目、4から5行目を表示 | data-gist-line=”1-2,4-5″ |
それぞれの組み合わせをサンプルコードで確認していきます。
表示するファイルはsample.phpです。
1行目だけを表示
こちらはシンプルに表示したい行番号を数字で指定します。
コード
<code data-gist-id="8cdaee4d7cbb7b77f0b1bf1656018aed" data-gist-line="1" data-gist-file="sample.php"></code>結果
1行目と3行目を表示
指定の方法は、1,3という感じにカンマで区切って指定します。
コード
<code data-gist-id="8cdaee4d7cbb7b77f0b1bf1656018aed" data-gist-line="1,3" data-gist-file="sample.php"></code>結果
ちょっとサンプルのコードが短すぎて分かりづらいですが、左の行番号を見ると、1と3行目と表示されていることが確認できます。
1から3行目までを表示
指定の方法は、1-3という感じでハイフンを使います。
コード
<code data-gist-id="8cdaee4d7cbb7b77f0b1bf1656018aed" data-gist-line="1-3" data-gist-file="sample.php"></code>結果
1から2行目、4から5行目を表示
先程のカンマ区切りのように1-2,4-5という感じにします。
コード
<code data-gist-id="8cdaee4d7cbb7b77f0b1bf1656018aed" data-gist-line="1-2,4-5" data-gist-file="sample.php"></code>結果
data-gist-highlight-line: 指定した行をハイライト
行の指定方法はdata-gist-lineと同じです。
なので、細かい説明は省略します。
data-gist-lineとの組み合わせで表示することもできるみたいです（ここでは割愛）
1行目をハイライト表示
コード
<code data-gist-id="8cdaee4d7cbb7b77f0b1bf1656018aed" data-gist-highlight-line="1" data-gist-file="sample.php"></code>結果
1行目と3行目をハイライト
コード
<code data-gist-id="8cdaee4d7cbb7b77f0b1bf1656018aed" data-gist-highlight-line="1,3" data-gist-file="sample.php"></code>結果
1から3行目までをハイライト
コード
<code data-gist-id="8cdaee4d7cbb7b77f0b1bf1656018aed" data-gist-highlight-line="1-3" data-gist-file="sample.php"></code>結果
1から2行目、4から5行目をハイライト
コード
<code data-gist-id="8cdaee4d7cbb7b77f0b1bf1656018aed" data-gist-highlight-line="1-2,4-5" data-gist-file="sample.php"></code>結果
data-gist-lines-expanded: data-gist-lineで指定した行以外を折りたたむ
これはdata-gist-lineと組み合わせて使います。
指定した行以外を折りたたむという設定です。
使うにはデータ属性にtrueを渡します。
行番号ではなくブール値を渡すことに注意です。
今回は1-2行目と4-5行目を表示して、それ以外を折りたたむというサンプルです。
コード
<code data-gist-id="8cdaee4d7cbb7b77f0b1bf1656018aed" data-gist-line="1-2,4-5" data-gist-lines-expanded="true" data-gist-file="sample.php"></code>結果
ソースコードの行番号が表示されているところを見てみると、折りたたみのようなアイコンが表示されていると思います。
ここをクリックすると展開されて折り畳まれてたコードが表示されます。
終わりに
今回は、gist-embedのデータ属性で行番号周りの設定を使ってみるという内容でした。
よく使いそうな設定は調べたので、ここらでgist用のショートコードでも作ってみようかと思ったして。。。
毎回テンプレートのコピペはツラいものがありました。
ここを書いている時点で、もっと早く作っておけばよかったと後悔しております。。。
次回は残ったデータ属性を調べることにします。
それでは、このへんで。
バイナリー！
