【シンタックスハイライター】Prism.jsでよく使用する属性の一覧

2018年11月14日
SyntaxHighlighter

どんな属性があったか忘れることがあるのでまとめた。( プラグインは追加済みの想定 )

行番号の表示

preタグに対し、class="line-numbers"を付与する。

#include <stdio.h>

int main() 
{
	printf( "Hello world." );
	return 0;
}

開始行の変更

開始行を変更する場合は、preタグに対し、data-start="番号"を付与する。

行のハイライト

preタグに対し、data-line="行番号"を付与する。

例( 5, 6行目をハイライト )

#include <stdio.h>

int main() 
{
	printf( "Hello world." );
	return 0;
}

行番号

指定方法は下記の通り。

対象の行指定方法
1つ行の番号を指定する。5
範囲「開始行」と「終了行」の番号をハイフン( – )で繋いで指定する。1-5
複数カンマ区切りで各行を指定する。1, 3, 5-7, 9

コマンドラインの表示

preタグに対し、class="command-line"data-prompt="現在のディレクトリ"を付与する。

また、出力行( 現在のディレクトリを表示しない行 )を指定する場合はpreタグに対し、data-output="行番号"を付与する。( 行番号の指定方法は「行のハイライト」と同じ )

例( PowerShellでディレクトリ確認 )

dir


    ディレクトリ: C:\Users


Mode                LastWriteTime     Length Name
----                -------------     ------ ----
d----        2018/11/09     14:55            user
d-r--        2017/06/18     11:17            Public