●通と記は記事内容などの編集で「テキスト」モードで以下を使います。もっとあるけどまずはこれだけで行番号と各言語指定で行います。以下の該当するものをということで全て記述するわけではありません。
<pre class=”line-numbers”><code class=”language-Markup>
<pre class=”line-numbers”><code class=”language-c++”>
<pre class=”line-numbers”><code class=”language-php”>
<pre class=”line-numbers”><code class=”language-python”>
</code></pre>
crayonは3年前から保守されていないようで、今後も使い続けるか思いきる必要がありそうでした。重いとか言われていましたが優れものです。サクラのサーバーがPHPの版を上げたので使えなくなってしまったので 結構お勧めの記事が多いPrism Syntax Highlighter を採用しました。プラグインで入れてみましたがうまく行かなかったので紹介記事を参考に入れました。ちょっと導入のハードルは高いです。
１．ダウンロードしたjsとcssをwp-content直下にlibraryフォルダを作成してそこに2つとも転送する。
２．フォルダの属性と転送したファイルのパーミッションをwp-contentsの他のものをと同じにする。フォルダ:755、ファイル：644
３．themeの中のheader.phpに以下の記述
<link rel="stylesheet" href="https://xxx.jp/shop/wp-content/libraly/prism.css">
<script src="https://xxx.jp/shop/wp-content/libraly/prism.js"></script>
４．function.phpに以下を追加
/* *** js/cssの読込み *** */
function load_extra_files() {
// Prism.jsのcssとjsの呼び出し
wp_enqueue_style('prism-style', get_stylesheet_directory_uri() . '/css/prism.css');
wp_enqueue_script('prism-script', get_stylesheet_directory_uri() . '/js/prism.js', array(), false, false);
}
add_action('wp_enqueue_scripts', 'load_extra_files');
５．編集はテキストモードで行う。＜ｐｒｅ＞とか＜ｃｏｄｅ＞とかは自分で記述する。
６．機能を追加したければ、再度ダウンロードページで機能選択してダウンロードしてサーバーにアップする。初期設定では行番号と行ハイライト機能はないので再度選択してからダウンロードしてサーバーに上書きしてOKとなった。
７．行頭１行が空いてしまう。これは＜ｐｒｅ＞＜ｃｏｄｅ＞＜－－この直後にソースをべたっと付けて書く約束になっている。
