エディタ風にコードを表示

よくあるソースコードの解説に使われる「エディタ風にコードを表示」を導入したい。

こんなの

<html lang="ja">
<head>
  <title></title>
</head>
<body>
  <div></div>
</body>
</html>
googleのcode-prettifyが使いやすいとの事で、さっそく使用。

導入方法などは他の方におまかせして、

導入してから困った事を書きたいと思います。

【問題1】htmlタグが表示されない。

コードを表示したい時は<pre><code>〜</pre></code>を使ってHTMLに書き込む。

けれど、これだけだとHTMLタグはタグとしてそのまま機能し、文字列として表示されない。

<span style=”color:red”>タイトル</span>と表示したいところタイトルとなる。
code-prettifyを導入すれば、文字列として表示されると思っていたのだけれど・・・?

ん、ゆゆしき事態。

 

何故そうなるのか?

【答1】code-prettifyにはエスケープ機能がない

エスケープとは特殊文字(&や<や>)を文字列として表示するためにエスケープシーケンス(&amp;や&lt;や&gt;)に変換する事。

エディタ風に表示させるモノのくせに、それが無いってどうなのよ!

【解決1】機能が無いなら作ればいい!

自力でエスケープする方法もあるけれど(置換やツール使用(HTMLエスケープツール))
毎回毎回面倒臭い!

なので、サクッとJavaScriptで<>をエスケープするコードを記入。


var code = document.getElementsByTag("code");
for(var i = 0; i < code.length; i++){
	var code_text = code[i].innerHTML ;
	//console.log(code_text); 確認用

	while(code_text.indexOf('<') !== -1 && code_text.indexOf('>') !== -1 ){
		code_text = code_text.replace('<', '&lt;'); 
		code_text = code_text.replace('>', '&gt;');
		code[i].innerHTML = code_text;//適応
	 }
}

現在必要な<>のエスケープをしているだけなので、他必要があれば追加する。
&lt;を&amp;lt;として表示する事に詰り中。

【問題2】<pre><code>のCSS

大きな問題はないけれど、見た目を好みにカスタマイズしたい!

  • <pre>で表示領域を超えたら折り返しをしたい。
  • <pre>のスペースタグの幅の変更
<pre>タグ使った事ないから、そういえば知らない・・・

【解決2】こうすればいい


pre {
  /*表示領域を超えたら折り返す*/
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow: auto;
  /*スペースタグ表示時の幅 デフォルトは8*/
  tab-size: 2;
}

【問題3】WordPress上で使いたい

WordPressでエディタ風に表示できるプラグインがある見たいだけれど、折角なので作ったものを適応させる。

【解決3】こうすればいい


function add_files(){
	wp_enqueue_script('prettify-js', get_template_directory_uri().'/tools/code-prettify-master/src/prettify.js', array(), '', true);
	wp_enqueue_script('lang-css-js', get_template_directory_uri().'/tools/code-prettify-master/src/lang-css.js', array(), '', true);
	wp_enqueue_script('es-js', get_template_directory_uri().'/tools/es.js', array(), '', true);
wp_enqueue_style('prettify-css', get_template_directory_uri().'/tools/code-prettify-master/src/prettify.css', '', '20180530');
}
add_action( 'wp_enqueue_scripts', 'add_files' );
プラグインも一回使ってどちらが良いか検証が必要ね!