9. html/シンタックスハイライト/SyntaxHighlighter/キーワードをテンポラリに定義する

 
9.1 何がしたいか
9.2 プロパティ名を登録
9.3 スタイルシートの定義
9.4 確認

9.1 何がしたいか

 何がしたいかと言うと、
</pre><pre class="brush: bash;">
default:
allow connection
</pre><pre>
 と記述すると
default:
allow connection

 と表示されるわけですが。

 説明するときに、例えば allow という単語を強調表示したい時があります。

 例題では、bash になっていますが、shBrushBash.js を編集してしまうと、すべての bashallow が強調表示されてしまいますし、他の言語では無効になります。

 highlight で行を定義するときのようにプロパティ値で単語を定義したいのです。

9.2 プロパティ名を登録

 プロパティ名を keyword2 としておきます。ここは既に定義されている変数名やプロパティ名と重複していなければなんでもよいです。  すべての言語に適用できるように shCore.js を編集します。
		/** Gets or sets light mode. Equavalent to turning off gutter and toolbar. */
		'light' : false,

		'html-script' : false
  
		/** Gets or sets light mode. Equavalent to turning off gutter and toolbar. */
		'light' : false,

		/** 外部定義のキーワード */
		'keyword2' : null,

		'html-script' : false

 と中に2行追加します。

 次にキーワードをハイライト表示させる処理を追加します。

	init: function(params)
	{
		this.id = guid();

		// register this instance in the highlighters list
		storeHighlighter(this);

		// local params take precedence over defaults
		this.params = merge(sh.defaults, params || {})

		// process light mode
		if (this.getParam('light') == true)
			this.params.toolbar = this.params.gutter = false;
	},
  
	init: function(params)
	{
		this.id = guid();

		// register this instance in the highlighters list
		storeHighlighter(this);

		// local params take precedence over defaults
		this.params = merge(sh.defaults, params || {})

		//	外部定義のキーワードがあればハイライト
		//	ここの行から
		if (this.params.keyword2 != null)
		{
			if (this.regexList != null)
			{
				this.regexList.push({regex: new RegExp(this.getKeywords(String(this.params.keyword2)), 'gm'),	css: 'keyword2'});
			}
			else
			{
				this.regexList =
					[
					{ regex: new RegExp(this.getKeywords(String(this.params.keyword2)), 'gm'),	css: 'keyword2'	}
					];
			}
		}
		//	ここの行までを追加

		// process light mode
		if (this.getParam('light') == true)
			this.params.toolbar = this.params.gutter = false;
	},

 最初、1663行目の if 文とその else 文はなかったのですが、そうすると plain の場合、落ちてしまうことが分かったので付け加えました。

9.3 スタイルシートの定義

 スタイルシートに keyword2 のプロパティを定義します。
.syntaxhighlighter .keyword2
{
	font-weight: bold !important;
    color: #00F000 !important;
}

 フォントや色はもちろんお好みで・・・。

9.4 確認

 結果を確認してみます。
</pre><pre class="brush: bash; keyword2: [allow];">
default:
allow connection
</pre><pre>
 上記のように記述して、下のように表示されることを確認できました。
default:
allow connection