domifara雑記

トップ > jQuery関連 > google-code-prettifyとHighlighterについてメモ

google code prettify Highlighter css CDN

-----------------------------------
xoops123 さんの
XCL2.2 用　preload の　Highlighter.class.php
-----------------------------------
これは
google-code-prettifyを使用して、
自動で起動して表示をするシンプルなもの
それに
独自の変更をスタイルシートにして、
原本のものより見やすい

少しだけ変更した
今後も使用したいのでメモ
http://xodomifara.lolipop.jp/karidown/preload_HighlighterBlack.zip

/* Pretty printing styles. Used with prettify.js. */

/* SPAN elements with the classes below are added by prettyprint. */
.pln { color: #000; }  /* plain text - black */

@media screen {
  .str { color: #ff69b4; }  /* string content - hot pink */
  .kwd { color: #4682b4; font-weight:bold;}  /* a keyword - steelblue */
  .com { color: #228b22; }  /* a comment - forestgreen */
  .typ { color: #1e90ff; }  /* a type name - dodgerblue */
  .lit { color: #3387CC; }  /* a literal value - blue  */
  /* punctuation, lisp open bracket, lisp close bracket */
  .pun, .opn, .clo { color: #660 }
  .tag { color: #4169e1;font-weight:bold; }  /* a markup tag name - royalblue */
  .atn { color: #d2691e;font-weight:bold; }  /* html/xml a markup attribute name  - chocolate */
  .atv { color: #228b22;font-weight:bold; }  /* html/xml a markup attribute value - forestgreen  */
  .dec, .var { color: #3387CC; }  /* a declaration; a variable name - blue */
  .fun { color: red }  /* a function name */
}

/* Use higher contrast and text-weight for printable form. */
@media print, projection {
  .str { color: #060 }
  .kwd { color: #006; font-weight: bold }
  .com { color: #600; font-style: italic }
  .typ { color: #404; font-weight: bold }
  .lit { color: #044 }
  .pun, .opn, .clo { color: #440 }
  .tag { color: #006; font-weight: bold }
  .atn { color: #404 }
  .atv { color: #060 }
}

/* Put a border around prettyprinted code snippets. */
/* pre.prettyprint { padding: 2px; border: 1px solid #888 }  */

/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0 ;margin-left: 30px ;} /* IE indents via margin-left */
/*
li.L0,
li.L1,
li.L2,
li.L3,
li.L5,
li.L6,
li.L7,
li.L8 { list-style-type: none }
*/
li.L0,li.L1,li.L2,li.L3,li.L4,li.L5,li.L6,li.L7,li.L8,li.L9{list-style-type: decimal;border-left:solid 1px #EBB15E; padding-left:0.5em;color: #999;}
/* Alternate shading for lines */
/*
li.L1,
li.L3,
li.L5,
li.L7,
li.L9 { background: #eee }
*/

ラインナンバーが、左により過ぎて見えないで調整
line 38 の

margin-left: 30px

ネット上を参考にして

li.L0,li.L1,li.L2,li.L3,li.L4,li.L5,li.L6,li.L7,li.L8,li.L9{list-style-type: decimal;border-left:solid 1px #EBB15E; padding-left:0.5em;color: #999;}

変更したものを　highlighter.css　として利用

-----------------------------------
ラインナンバー表示のため
addClass で　"prettyprint linenums"　を指定

あったら良さそうなので　lang-css.js　も読む

取得元
GitHub - google/code-prettify: Automatically exported from code.google.com/p/google-code-prettify
よりjsダウンロード
(/loader/ が実行用圧縮済js類の入っているところ)

js配置ディレクトリ名
/google-code-prettify/ の追加は、原本のdistribの配置を見習った

<?php
/**
 * @file Highlighter.class.php
 * @package For legacy Cube Legacy 2.2
 * @version $Id: Highlighter.class.php ver0.01 2012/01/23  00:00:00 marine  $
 */
if (! defined ( 'XOOPS_ROOT_PATH' )){
	exit ();
}
class Highlighter extends XCube_ActionFilter {
	public function preBlockFilter() {
		$this->mRoot->mDelegateManager->add ( 'Site.JQuery.AddFunction', array (&$this,'addScript') );
	}
	public function addScript(&$jQuery) {
		$jQuery->addStylesheet ( '/common/Highlighter/highlighter.css', true );
		$jQuery->addLibrary ( '/common/Highlighter/google-code-prettify/prettify.js', true );
		$jQuery->addLibrary ( '/common/Highlighter/google-code-prettify/lang-css.js', true );
		// jsの読み込みはCDNからもできる
		// $jQuery->addLibrary('https://cdn.rawgit.com/google/code-prettify/master/loader/prettify.js', false);
		// $jQuery->addLibrary('https://cdn.rawgit.com/google/code-prettify/master/loader/lang-css.js', false);
		// add class and load
		$ext_head_script = <<< HTML
jQuery(document).ready(function($){
	$("code").addClass("prettyprint linenums");
	prettyPrint();
});
HTML;
		$jQuery->addScript ( $ext_head_script, true );
	}
	// class END
}
?>

------
起動方法　基本

line 5
cssを読み込み　(必須)

line 6
google-code-prettify 本体js　(必須)

line 7
追加言語 js (任意)

line 24
code のタグに対して、指定クラス名を追加
　prettyprint　(必須)
　linenums　　　(任意　ナンバー表示)

line 25
prettyprintを起動

--------------------------
という手順を踏めばよい
-----------------------------------------------
蛇足

<script type="text/javascript" src="https://rawgit.com/google/code-prettify/master/loader/run_prettify.js?autoload=true&amp;skin=prettify&amp;lang=css"></script>

という、
CDNから、autoload 指定で上記の手順を
1行で指定することも可能だ
これで、良いなら　閑話終了

--------------------------------
xoopsCode code 欄の背景をだけを
黒にしているテーマの場合

初期の　highlighter.css　では
ラインナンバーとかがは、指定されなくて
例えば黒文字色で見えなくなってしまうものがある

.xoopsCodeを背景を黒にしてみた

テーマごとに、
xoopsCodeのスタイルが違うので、:別記
いっそのこと
Highlighterを使うときは、黒にしてみます

HighlighterBlack.class.php

<?php
/**
 * @file HighlighterBlack.class.php
 * @package For legacy Cube Legacy 2.2
 * @version $Id: Highlighter.class.php ver0.01 2012/01/23  00:00:00 marine  $
 */
if (! defined ( 'XOOPS_ROOT_PATH')){
	exit ();
}
class HighlighterBlack extends XCube_ActionFilter {
	public function preBlockFilter() {
		$this->mRoot->mDelegateManager->add ( 'Site.JQuery.AddFunction', array (&$this,'addScript') );
	}
	public function addScript(&$jQuery) {
		//
		$backcolor = "black"; //[white|black]

		if ( $backcolor == "black" ){
			$jQuery->addStylesheet ( '/common/Highlighter/highlighter_sunburst.css', true );
		}else{
			$jQuery->addStylesheet ( '/common/Highlighter/highlighter.css', true );
		}
		$jQuery->addLibrary ( '/common/Highlighter/google-code-prettify/prettify.js', true );
		$jQuery->addLibrary ( '/common/Highlighter/google-code-prettify/lang-css.js', true );
		// jsの読み込みはCDNからもできる
		// $jQuery->addLibrary('https://cdn.rawgit.com/google/code-prettify/master/loader/prettify.js', false);
		// $jQuery->addLibrary('https://cdn.rawgit.com/google/code-prettify/master/loader/lang-css.js', false);
		// add class and load transparent
		$ext_head_script = <<< HTML
jQuery(document).ready(function($){
	if ( $("div.xoopsCode").find("pre") ){
		var preob = $("div.xoopsCode").find("pre");
		preob.css("background-color","{$backcolor}");
		preob.css("font-size","16px");
		preob.css("overflow","auto");
	}
	$("code").addClass("prettyprint linenums");
	prettyPrint();
});
HTML;
		$jQuery->addScript ( $ext_head_script, true );
	}
	// class END
}
?>

この記事の1行目に飛ぶ

jQuery関連

背景が透明色かどうかを判定する