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

https://github.com/blairvanderhoof/gist-embed

bvanderhoof/gist-embed
Lightning fast zero dependency library for embedding gists on your website - bvanderhoof/gist-embed

readmeによると、古い方のリポジトリが復元できなかったので、新しいリポジトリではじめました、と書いてありました。

今回のサンプルコード

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

調査したデータ属性

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をコピーしました