#author("2020-05-31T18:18:00+09:00","","")
#author("2020-05-31T18:20:32+09:00","","")
** highlightjs.inc.php [#iee69864]
|RIGHT:100|LEFT:360|c
|~サマリ|highlight.jsによるシンタックスハイライト|
|~リビジョン|1.0|
|~対応バージョン|1.5.3|
|~投稿者|[[M.Taniguchi]]|
|~投稿日|&new{2020-05-31 (日) 18:18:00};|
highlight.jsにより整形済みテキストをシンタックスハイライト(文法強調)表示するPukiWiki用プラグイン。

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

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

**使い方 [#h98879cf]

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

#highlightjs([language])

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

#br
''使用例''

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

**コード [#d9721494]

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;
 }
 

**設定 [#cbf54fa4]

コード内の下記の定数で動作を制御することができます。
|~定数名|~値|~既定値|~意味|
|PLUGIN_HIGHLIGHTJS_SCRIPT_URL|CENTER:URL文字列|'//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/highlight.min.js'|highlight.jsスクリプトのURL|
|PLUGIN_HIGHLIGHTJS_CSS_URL|CENTER:URL文字列|'//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/styles/default.min.css'|highlight.js用CSSのURL。空なら内蔵スタイルを適用|

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


**ライセンス [#r11f9f1d]

GPL v3

トップ   編集 差分 履歴 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS
Site admin: PukiWiki Development Team

PukiWiki 1.5.4+ © 2001-2022 PukiWiki Development Team. Powered by PHP 8.2.12. HTML convert time: 0.043 sec.

SourceForge