CodeプログラムコードをCSS装飾して表示するcode-prettify

WordPressプラグインを使わない「シンタックスハイライト」方法 js / API
2021.04.11

code-prettifyでCode、プログラムコードを装飾する方法

code-prettifyで簡単にプログラムコード部分をCSS装飾する。

code-prettifyで提供されている言語

default Prettifyが自動的に判別して装飾
lang-none Explicitly do not use any syntax highlighting.
Bashなどのシェルスクリプト lang-bash, lang-bsh, lang-csh, lang-sh
C, C++など lang-c, lang-cc, lang-cpp, lang-cxx, lang-cyc, lang-m
C# lang-cs
Clojure lang-clj
CoffeeScript lang-coffee
CSS lang-css
Dart lang-dart
Delphi lang-pascal
Erlang lang-erl, lang-erlang
Go lang-go
Haskell lang-hs
HTML lang-html
Java lang-java
JavaScript lang-js, lang-javascript
JSON lang-json
LaTeX と TeX lang-latex, lang-tex
Lisp と Scheme lang-cl, lang-el, lang-lisp, lang-lsp, lang-scm, lang-ss, lang-rkt
Lua lang-lua
OCaml, SML, F#, et al lang-fs, lang-ml
Pascal lang-pascal
Perl lang-pl, lang-perl
PHP lang-php
Protocol buffers lang-proto
Python lang-py, lang-python, lang-cv
R and S lang-r, lang-s
Regex lang-regex
Ruby lang-rb, lang-ruby
Rust lang-rc, lang-rs, lang-rust
Scala lang-scala
SQL lang-sql
VHDL lang-vhdl, lang-vhd
Visual Basic lang-vb, lang-vbs
XML lang-xml

code-prettifyの設置

＜script＞ タグを記述するだけで JavaScript と CSS などの必要なライブラリをオートローダー（Auto-Loader）で自動的に読み込んで code-prettify を使える状態にする。CDNなので、そのままheadに記載を足して、＜pre＞タグの後に＜code＞タグを設置して、codeのクラスにclass=”prettyprint”と記載するだけで、装飾して表示される。

配色を決める

配色テーマは「code-prettify themes gallery」から選ぶことが出来る。 本説明ではcode-prettify2.cssで独自でカスタマイズしたCSSを利用している。

HTML


<!-- これは旧code-prettify -->
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?lang=css&lang=html&lang=js&lang=php"></script>
<link rel="stylesheet" type="text/css" href="../common/code-prettify2.css">

CDNが変更

HTML


<!-- 現在のcode-prettify -->
<!-- ?lang=には使用する言語をパラメーターとしてセットする  --->
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?lang=css&lang=html&lang=js&lang=php"></script></script>
<link rel="stylesheet" type="text/css" href="../common/code-prettify2.css">
CDN 変更を参照：Action Required: Google Code Prettify changing CDNs

prettyprintのオプション

オプションで、表示できる言語を選択できる。 linenumsは左横のコード番号を表示する HTMLで＜タグなどの特殊文字 “&”, “<“, “>” ,'”‘, “‘” は “&amp;”, “&lt;”, “&gt;”, “&quot;”, “&#39;” に変換する必要

HTML


<!-- ＜pre＞＜/pre＞の間に＜code class="prettyprint"＞を設置する。-->
<!-- クラス部分のlinenumsは数字をいれる -->
<!-- クラス部分のlang-phpは利用する言語を指定 -->
<!--オプション：linenums lang-php -->
<pre><code class="prettyprint linenums lang-php">
	//プログラコードを記載エリア
</code></pre>

オリジナルの色にカスタマイズ

表示用、印刷用で色を指定出来るので便利がいいのが特徴。色をカスタマイズするCSSを別につくり、読み込むだけですむので設置も簡単。

CSS


/* Pretty printing styles. Used with prettify.js. */
/* Vim sunburst theme by David Leibovic */

pre{
	display:block;
	height:auto;
	width:auto;
	clear:both;
	background-color: #2d2d2d;
	border:solid 8px  #2d2d2d;
	white-space: pre-wrap ;/*折り返し*/
	color:#ffffff;
	line-height:140%;
	padding-bottom: 1rem;
	font-size:1.5rem;
}
pre span{
	font-size:11pt;
}

pre .str, code .str { color: #66cfff; } /* string  - green */
pre .kwd, code .kwd { color: #f7e81f; } /* keyword - dark pink */
pre .com, code .com { color: #14a857; /*font-style: italic; */} /* comment - gray */
pre .typ, code .typ { color: #447df7; } /* type - light blue */
pre .lit, code .lit { color: #ba17fa; } /* literal - blue */
pre .pun, code .pun { color: #ff19c6; } /* punctuation - white */
pre .pln, code .pln { color: #ffffff; } /* plaintext - white */
pre .tag, code .tag { color: #f51ead; } /* html/xml tag    - light blue */
pre .atn, code .atn { color: #ece79c; } /* html/xml attribute name  - khaki */
pre .atv, code .atv { color: #65af20; } /* html/xml attribute value - green */
pre .dec, code .dec { color: #8ac3f1; } /* decimal - blue */

pre.prettyprint, code.prettyprint {
	background-color:#2d2d2d;
	/*border-radius: 8px;*/
}

pre.prettyprint {
	width: 95%;
	margin: 1em auto;
	padding: 1em 0;
	white-space: pre-wrap;/*折返しする*/
}

.prettyprint ol.linenums > li {
  list-style-type: decimal; /* 1行ごとに行番号を表示 */ 
  border-left:solid 1px #EBB15E; /* 区切り線を表示  */
}

/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0; color: #AEAEAE; } /* 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 }
/* Alternate shading for lines */
li.L1,li.L3,li.L5,li.L7,li.L9 { 
	background: #2c2c2c;
}

@media print {

	pre{
		display:block;
		height:auto;
		width:auto;
		clear:both;
		background-color: #ffffff;
		border:solid 2px  #dfdfdf;
		white-space: pre-wrap ;/*折り返し*/
		color:#030303;
		line-height:120%;
		padding : 1rem ;
	}


	pre.prettyprint, code.prettyprint {
		background-color:#ffffff;
		/*border-radius: 8px;*/
	}

	pre .str, code .str { color: #493dfc; } /* string  - green */
	pre .kwd, code .kwd { color: #f1862e; } /* keyword - dark pink */
	pre .com, code .com { color: #14a857; /*font-style: italic; */} /* comment - gray */
	pre .typ, code .typ { color: #4923f0; } /* type - light blue */
	pre .lit, code .lit { color: #ba17fa; } /* literal - blue */
	pre .pun, code .pun { color: #ff19c6; } /* punctuation - white */
	pre .pln, code .pln { color: #222222; } /* plaintext - white */
	pre .tag, code .tag { color: #f51ead; } /* html/xml tag    - light blue */
	pre .atn, code .atn { color: #a09a4b; } /* html/xml attribute name  - khaki */
	pre .atv, code .atv { color: #3a6115; } /* html/xml attribute value - green */
	pre .dec, code .dec { color: #439ce6; } /* decimal - blue */
}

配色テーマは「code-prettify themes gallery」を利用する場合

配色テーマは「code-prettify themes gallery」から選ぶことが出来る。 配色テーマcode-prettify themes gallery

HTML


<!-- テーマを自動読込する場合は記述 --->
<script>
function code-prettify_styles_and_scripts() {
	//・・・スクリプトやスタイルの読み込みを記述//
	
	//オートローダーを使う
	enqueue_script( 
	'prettify', 
	'//cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js',
	array(), 
	'28.04.2015', //バージョン（オプション）
	true
	);
}
add_action( 'enqueue_scripts', 'code-prettify_styles_and_scripts' );
</script>
テーマを使う参考：www.webdesignleaves.com
タイトルとURLをコピーしました