[Gist] gist-embedの使い方を調べてみた (2) 〜 hide-line-numbers, line, highlight-line, lines-expanded 〜

gist Gist

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にあります)

Build software better, together
GitHub is where people build software. More than 40 million people use GitHub to discover, fork, and contribute to over 100 million projects.

今回のサンプルコード

前回と同じサンプルコードを使って説明していきます。

調査したデータ属性

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用のショートコードでも作ってみようかと思ったして。。。

毎回テンプレートのコピペはツラいものがありました。
ここを書いている時点で、もっと早く作っておけばよかったと後悔しております。。。

次回は残ったデータ属性を調べることにします。

それでは、このへんで。
バイナリー!

タイトルとURLをコピーしました