HOME » MODX的な何か » SyntaxHighlighterをゴリっと動かす

SyntaxHighlighterをゴリっと動かす

テンプレート変数で追加コードを出力すればいいものをスニペットで出力してみる。

作成日時:2017-10-04 / 最終更新:2017-10-11

SyntaxHighlighterについてはソースコードをサクッときれいに表示してくれるやつぐらいの説明に留めておく。
実際に下記でスニペットのソースコードを表示しているものがそれになるが、同義反復気味で意味不なので端折っていく。
詳しくはSyntaxHighlighterのサイトを見てね!

とりあえず的な暇つぶしで書いたコードなので探せばもっとスマートなものがあると思われるので、まじめに使おうと思う際はそちらを使用したほうが良いです。

Evolution CMSをメモ帳代わりに構築したので、ソースコードなんかを入力する際に楽になりそうなスニペットを作成していく。
コード書きながらうっすら思っていて、書き終わってから確信に変わったが、テンプレート変数で実装したほうが早かったかも…

以下のスニペットを作成

スニペット名:[[code]]

<?php
// 多次元配列にしてもよかったけど使いまわせないかと一次配列で格納
$lang_type = [
	'AppleScript','ColdFusion','CSS','Erlang','JavaFX',
	'PHP','Python','VisualBasic','HTML','XML',
	'ActionScript3','CSSbrush:c','C++','Delphi','Pascal',
	'Groovy','JavaScript','text','Ruby','SQL',
	'Bash','C#','diff','Java','Perl',
	'PowerShell','Sass','Scala'];
$class_name = [
	'brush:applescript','brush:cf','brush:css','brush:erl','brush:jfx',
	'brush:php','brush:py','brush:vb','brush:html','brush:xml',
	'brush:as3','brush:css','brush:cpp','brush:delphi','brush:pascal',
	'brush:groovy','brush:js','brush:text','brush:ruby','brush:sql',
	'brush:bash','brush:c#','brush:diff','brush:java','brush:perl',
	'brush:ps','brush:sass','brush:scala'];
$script_name = [
	'shBrushAppleScript.js','shBrushColdFusion.js','shBrushCss.js','shBrushErlang.js','shBrushJavaFX.js',
	'shBrushPhp.js','shBrushPython.js','shBrushVb.js','shBrushXml.js','shBrushXml.js',
	'shBrushAS3.js','shBrushCpp.js','shBrushCpp.js','shBrushDelphi.js','shBrushDelphi.js',
	'shBrushGroovy.js','shBrushJScript.js','shBrushPlain.js','shBrushRuby.js','shBrushSql.js',
	'shBrushBash.js','shBrushCSharp.js','shBrushDiff.js','shBrushJava.js','shBrushPerl.js',
	'shBrushPowerShell.js','shBrushSass.js','shBrushScala.js'];

// typeが指定されているかチェック、見つからなかったらテキスト出力
$key = array_search(strtolower($type), array_map('strtolower', $lang_type));
$key = ($key)?:17; // 見つからなかったときはテキスト出力

$class = $class_name[$key];
$script = $script_name[$key];

// HTML成型して出力
echo '<pre class="' . $class . '">';
echo htmlspecialchars($code, ENT_QUOTES);
echo '</pre>';

// HEADタグ内に出力するスクリプトファイル名の配列を作成
$head = $modx->getPlaceholder('SyntaxHighlighterHead');

// 配列に存在しなかったら追加とフラグ
$make_flag = false;
if( $head === NULL || !in_array($script, $head) ){
	$head[] = $script;
	$make_flag = true;
}

// 配列をプレースホルダーに保存
$modx->setPlaceholder('SyntaxHighlighterHead', $head);

if(!$make_flag)return;// フラグ回収!

// HEADタグ用生成
$head_tag = <<< EOT
<link rel="stylesheet" type="text/css" href="//alexgorbatchev.com/pub/sh/current/styles/shCoreRDark.css"/>
<script type="text/javascript" src="//alexgorbatchev.com/pub/sh/current/scripts/shCore.js"></script>
EOT;

for($i = 0; $i < count($head); $i++)
	$head_tag .= "\n" . '<script type="text/javascript" src="//alexgorbatchev.com/pub/sh/current/scripts/' . $head[$i] . '"></script>';

$head_tag .= "\n" . '<script type="text/javascript">SyntaxHighlighter.all();</script>';

$modx->setPlaceholder('SyntaxHighlighterHeadTag', $head_tag);

使い方

上記のスニペットで生成されたプレースホルダ:[+SyntaxHighlighterHeadTag+]を使用するテンプレートのHEADタグ内に設置
あとはそのテンプレートを使用したリソースのコンテンツ内に、以下のよう記述するとSyntaxHighlighterで装飾されてあらキレイ!

	[----[code? &type=`html` &code=`
	<!-- ソースコードなど -->
	`]----]
typeに言語を指定、codeにコードを入力。

ただこの場合バッククオートを使用しているのでSQLなんか書いたときは、使って無さそうなダブルクオートとかで書かないといけないので統一性がない!
コードを書く記事によってテンプレートで切り替えるか、プラグインで独自タグでも実装したほうが本来スマートな気がする点と、HEAD用のタグ生成が呼び出されるたび処理されているのがなんか気になる。
気になったから修正。

対応している言語は以下になります:
AppleScript、ColdFusion、CSS、Erlang、JavaFX、PHP、Python、VisualBasic、HTML、XML、ActionScript3、CSS、C++、Delphi、Pascal、Groovy、JavaScript、test、Ruby、SQL、Bash、C#、diff、Java、Perl、PowerShell、Sass、Scala

言語に関しては大文字小文字を区別しないように処理をしているので、htmlやHTML、HtMlみたいなひねくれ者にも対応、その時の気分で使い分けられるファッショナブルな取り回しが可能。
さらにどうでもいいが、これを使ってソースコードを記述すると、Evolution CMSのエディタがハイライトできなくなっ…

MODXのタグが実体参照や文字参照で置換してやってもパーサーで発動してしまうので以下のコードでねじ込むことで暫定対応したけど、今一度考えなおしたほうがいい気がする…

			<script type="text/javascript">
					$(function() {
							// SyntaxHighlighter使用時のMODXタグ表示用
							var shDiv = $("#content").html();
							shDiv = shDiv.replace(/hogehoge/g, "");// 適当な文字列
							$("#content").html(shDiv);
					});
			</script>

参考にしたサイト ブログにソースコードを貼り付けてハイライト表示にする方法 - https://amimilab.com/2016/07/20/83/