wordpress に prism を設定する

2021.10.30

wordpress に prism を設定します。
最初は少しわかりにくい。

prism のダウンロード

prism.css と prism.js をここからダウンロードします。

この際に、以下の4つのプラグインを選択するようにします。


Normalize Whitespace
Line Highlight
Line Numbers
Copy to Clipboard Button

prism はとても便利でこれまで多用していましたが、「Normalize Whitespace」は知りませんでした。
そのためにとても面倒な思いをしておりました。

テーマは、私はこれまでは「OKAIDIA」を使用していましたが、html コードがちょっとうるさく感じていました。
なので、ここでは「Tomorrow Night」を使用しています。
html は以下のような感じです。


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../static/css/mystyle.css">
</head>
<body>
<div id="container">	
	<div id="main">
	
        <h1>レンタルサーバーと vps : レンタルサーバーのお引越し</h1>

	</div>	
</div>
</body>
</html>

php は


<?php
    echo 'hello';
?>

ちょっと微妙でしょうかね。

アップロード

私は外観に「Sydney」というのをインストールして使っていますが、その中の css と js フォルダに向けてアップロードしました。

親テーマと子テーマというのが今ひとつわかりませんが、アップする場所はどこでもいいようです。

function.php の編集

外観　→　テーマエディタ　→ function.php を以下のように編集します。


<?php
function my_prism() {
	wp_enqueue_style( 'prism-style', get_template_directory_uri() . '/css/prism.css' ); 
	wp_enqueue_script( 'prism-script', get_template_directory_uri() . '/js/prism.js', array('jquery'), '1.9.0', true ); 
}
add_action( 'wp_enqueue_scripts', 'my_prism' );

css と js を子テーマにアップした場合には、
「get_template_directory_uri()」を「get_stylesheet_directory_uri()」にする必要があるようです。

style.css の h 要素が編集できない

例えばこのページの h2 要素は以下のようになっていますが、これを style.css に書いても反映されません。
なぜだろう？

付随の css エディタが使えますというので、それで設定してあります。
これって、面倒じゃないでしょうか。


h2 { 
    padding: .4em;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    margin-bottom: 1em;
    margin-top: 2em;
}

あと、prism とその下の要素の間が少し狭い感じがします。
これ、prism.css の margin を変更して改善しました。

コード一括変換 – < を &lt; へ

prism に html 文書をそのまま貼り付けるとうまく表示されません。
「<」は「&lt;」 に「>」は「&gt;」に変換する必要があります。

きっと自動変換するシェルスクリプトがあるはずだと思いながら、これまではテキストエディタの置換機能を使って手動で一括置換していました。

今回、探してみたところやはりそういうシェルスクリプトはありました。このページです。

このページのシェルスクリプトを少し変更して以下のようにします。


#!/bin/sh
code2text(){
  LC_ALL=C sed 's|&|\&amp;|g;s|<|\&lt;|g;s|>|\&gt;|g'
}
code2pre(){
  cat <<EOF
<pre><code class="language-markup">
`code2text`
</code></pre>
EOF
}
while [ "$1" != "" ]; do
  case "$1" in
  -) code2pre; exit ;;
  -c) shift; echo "$@" | code2text; exit ;;
  esac
  shift
done

これはシェルスクリプトですが、これをそのまま sample というテキストファイルに貼り付けて以下のようにすると、「<」が一気に変換されてその外側に「<pre><code class=”language-markup”>」で囲まれます。


./code.sh - < sample

つまり、

#!/bin/sh

code2text(){
  LC_ALL=C sed 's|&|\&amp;|g;s|<|\&lt;|g;s|>|\&gt;|g'
}
code2pre(){
  cat <<EOF
<pre><code class="language-markup">`code2text`
</code></pre>
EOF
}
while [ "$1" != "" ]; do
  case "$1" in
  -) code2pre; exit ;;
  -c) shift; echo "$@" | code2text; exit ;;
  esac
  shift
done

が

<pre><code class="language-markup">#!/bin/sh

code2text(){
  LC_ALL=C sed 's|&amp;|\&amp;amp;|g;s|&lt;|\&amp;lt;|g;s|&gt;|\&amp;gt;|g'
}
code2pre(){
  cat &lt;&lt;EOF
&lt;pre&gt;&lt;code class="language-markup"&gt;`
code2text`
&lt;/code&gt;&lt;/pre&gt;
EOF
}
while [ "$1" != "" ]; do
  case "$1" in
  -) code2pre; exit ;;
  -c) shift; echo "$@" | code2text; exit ;;
  esac
  shift
done
</code></pre>

に一瞬で変換されます。

あとは、変換されたコードをカスタムhtml で貼り付けるだけです。