Prism.js シンタックス・ハイライトについて

Prism.jsの記述方法

Prism.jsを有効にして表示するには<pre>タグ、<code>タグの中にソースコードを記述します。

言語の種類は、codeタグのclassに指定した「language-kind」（kindは、言語名）というクラスで指定します。

<pre><code class="language-kind" ...>
ソースコード本体
</code><pre>

例えば、次のように記述するとruby定義をシンタックスハイライトします

<pre>
<code class="language-ruby">
def main()
	score = 100
	round = 1
	while ( score > 0 ) do
		puts ''
		puts 'エンターキーを押してください。'
		keyInput()
		puts ''
		puts 'ラウンド:' + round.to_s
		score = throwDices(score)
		round += 1
	end
	puts 'あなたのお金はなくなりました。ゲームオーバーです。'
end
</code>
</pre>
 
 
 
 

「language-kind」で指定する言語の一例を示します。

行番号を表示する

行番号を表示するには、「Line Numbers」プラグインが必要です。

preタグのclassにline-numberを指定すると行番号を表示します。

<pre class="line-numbers"><code ...>

例えば、次のように記述するとruby言語に行番号を表示します。

<pre class="line-numbers">
<code class="language-ruby">
def main()
	score = 100
	round = 1
	while ( score > 0 ) do
		puts ''
		puts 'エンターキーを押してください。'
		keyInput()
		puts ''
		puts 'ラウンド:' + round.to_s
		score = throwDices(score)
		round += 1
	end
	puts 'あなたのお金はなくなりました。ゲームオーバーです。'
end
</code>
</pre>
 
 
 
 

上記の記述は、次のように表示されます。

def main()
	score = 100
	round = 1
	while ( score > 0 ) do
		puts ''
		puts 'エンターキーを押してください。'
		keyInput()
		puts ''
		puts 'ラウンド:' + round.to_s
		score = throwDices(score)
		round += 1
	end
	puts 'あなたのお金はなくなりました。ゲームオーバーです。'
end

行番号の開始番号を指定する場合は、preタグのdata-start属性で開始行番号nnnを指定します。

def main()
	score = 100
	round = 1
	while ( score > 0 ) do
		puts ''
		puts 'エンターキーを押してください。'
		keyInput()
		puts ''
		puts 'ラウンド:' + round.to_s
		score = throwDices(score)
		round += 1
	end
	puts 'あなたのお金はなくなりました。ゲームオーバーです。'
end

data-start=”100″とすると、次のように表示されます。

def main()
	score = 100
	round = 1
	while ( score > 0 ) do
		puts ''
		puts 'エンターキーを押してください。'
		keyInput()
		puts ''
		puts 'ラウンド:' + round.to_s
		score = throwDices(score)
		round += 1
	end
	puts 'あなたのお金はなくなりました。ゲームオーバーです。'
end

コマンドライン表示

コマンドラインの表示には、「Command Line」プラグインが必要です。

コマンドラインの表示には、「Command Line」プラグインが必要です。

preタグのclassにcommand-lineを指定するとコマンドラインに適した表示となります。
言語の種類は、コマンドラインに適したものを選択します。例えば、”language-shell”などとします。

<pre class="command-line"><code class="language-shell">

例えば、次のように記述するとコマンドラインを表示します。

<pre class="command-line">
<code class="language-shell">
mkdir hogehoge
ls -l hogehoge
</code>
</pre>
 
 
 
 

上記の記述は、次のように表示されます。
コマンドプロンプト“[user@localhost] $”は、デフォルトの表示です。

mkdir hogehoge
ls -l hogehoge

ホスト名を指定

コマンドラインの左側に表示しているコマンドプロンプト“[user@localhost] $”は、デフォルトの表示です。preタグのdata-host属性でホスト名を変更できます。

<pre class="command-line" data-host="ホスト名"><code class="language-shell">

例えば、次のように記述するとホスト名を指定できます。

<pre class="command-line" data-host="myhost">
<code class="language-shell">
mkdir hogehoge
ls -l hogehoge
</code>
</pre>
 
 
 
 

上記の記述は、次のように表示されます。コマンドプロンプトは、[user@myhost]となります。

mkdir hogehoge
ls -l hogehoge