highlightjs.inc.php

サマリhighlight.jsによるシンタックスハイライト
リビジョン1.0
対応バージョン1.5.3
投稿者M.Taniguchi
投稿日2020-05-31 (日) 18:18:00

highlight.jsにより整形済みテキストをシンタックスハイライト(文法強調)表示するPukiWiki用プラグイン。

対象とする整形済みテキストの直前に挿入するだけの簡単仕様です。

PukiWiki 1.5.3/PHP 7.4/UTF-8 で動作確認済み。旧バージョンでもおそらく動くと思います。

使い方

次を整形済みテキストの直前に記述する。

#highlightjs([language])

 

使用例

#highlightjs
 function hoge($v) {
     static $fuga = 'value:';
     echo $fuga . $v;
 }

コード

highlightjs.inc.php
(下記のコードをコピーして、plugin ディレクトリに highlightjs.inc.php というファイル名で保存してください)

<?php
/*
PukiWiki - Yet another WikiWikiWeb clone.
highlightjs.inc.php, v1.00 2020 M.Taniguchi
License: GPL v3 or (at your option) any later version

highlight.jsにより整形済みテキストをシンタックスハイライト(文法強調)表示するプラグイン。

対象とする整形済みテキストの直前に挿入すると、整形済みテキスト内のコードが強調表示されます。

【使い方】
#highlightjs([language])

【引数】
language … 言語名。省略すると自動判定。対応言語はhighlight.js公式サイトを参照

【使用例】
#highlightjs
 function hoge($v) {
     static $fuga = 'value:';
     echo $fuga . $v;
 }
*/

/////////////////////////////////////////////////
// シンタックスハイライトプラグイン(highlightjs.inc.php)
if (!defined('PLUGIN_HIGHLIGHTJS_SCRIPT_URL')) define('PLUGIN_HIGHLIGHTJS_SCRIPT_URL', '//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/highlight.min.js');       // highlight.jsスクリプトのURL
if (!defined('PLUGIN_HIGHLIGHTJS_CSS_URL'))    define('PLUGIN_HIGHLIGHTJS_CSS_URL',    '//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/styles/default.min.css'); // highlight.js用CSSのURL。空なら内蔵スタイルを適用


function plugin_highlightjs_convert() {
	if (!PLUGIN_HIGHLIGHTJS_SCRIPT_URL || !PKWK_ALLOW_JAVASCRIPT) return '';

	list($lang) = func_get_args();
	$body = '';

	// 一度だけ実行
	static	$included = false;
	if (!$included) {
		// CSSロード
		if (PLUGIN_HIGHLIGHTJS_CSS_URL) {
			$body .= '<link rel="stylesheet" href="' . PLUGIN_HIGHLIGHTJS_CSS_URL . "\"/>\n";
		} else {
			// 指定がなければ内蔵スタイル
			$body .= <<<EOT
<style>
.hljs{}
.hljs,.hljs-subst{}
.hljs-comment{color:#7e8282}
.hljs-keyword,.hljs-attribute,.hljs-selector-tag,.hljs-meta-keyword,.hljs-doctag,.hljs-name{font-weight:bold}
.hljs-type,.hljs-string,.hljs-number,.hljs-selector-id,.hljs-selector-class,.hljs-quote,.hljs-template-tag,.hljs-deletion{color:#d86800}
.hljs-title,.hljs-section {color:#e70473;font-weight:bold}
.hljs-regexp,.hljs-symbol,.hljs-variable,.hljs-template-variable,.hljs-link,.hljs-selector-attr,.hljs-selector-pseudo{color:#dd3333}
.hljs-literal{color:#00c1c1}
.hljs-built_in,.hljs-bullet,.hljs-code,.hljs-addition{color:#33cc00}
.hljs-meta{color:#808080}
.hljs-meta-string{color:#808080}
.hljs-emphasis{font-style:italic}
.hljs-strong{font-weight:bold}
</style>
EOT;
		}

		// JavaScriptロード
		$body .= '<script src="' . PLUGIN_HIGHLIGHTJS_SCRIPT_URL . "\" defer></script>\n";

		// 初期化:本プラグイン出力要素(_p_highlightjsクラス)の隣のpre要素を強調表示の対象とする
		$body .= <<<EOT
<script>
'use strict';
document.addEventListener('DOMContentLoaded', (event) => {
	document.querySelectorAll('._p_highlightjs').forEach((block) => {
		var	ele = block.nextElementSibling;
		if (ele && ele.tagName == 'PRE') {
			var	lang = block.getAttribute('data-lang');
			if (lang) ele.classList.add(lang);
			ele.classList.add('_p_highlightjs_code');
			hljs.highlightBlock(ele);
		}
	});
});
</script>
EOT;

		$included = true;
	}

	$body .= '<span class="_p_highlightjs" style="display:none" data-lang="' . htmlsc(trim($lang)) . '"></span>';

	return $body;
}

設定

コード内の下記の定数で動作を制御することができます。

定数名既定値意味
PLUGIN_HIGHLIGHTJS_SCRIPT_URLURL文字列'//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/highlight.min.js'highlight.jsスクリプトのURL
PLUGIN_HIGHLIGHTJS_CSS_URLURL文字列'//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/styles/default.min.css'highlight.js用CSSのURL。空なら内蔵スタイルを適用

highlight.jsが公式にホスティングしている最新版スクリプトのURLと、それに対応するお好みのスタイルCSSのURLを指定してください。
もしくは、ダウンロードして自サーバーに配置したファイルのURLを指定してください。

ライセンス

GPL v3


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2020-05-31 (日) 18:20:32
Site admin: PukiWiki Development Team

PukiWiki 1.5.3+ © 2001-2020 PukiWiki Development Team. Powered by PHP 5.6.40-0+deb8u12. HTML convert time: 0.214 sec.

OSDN