プラグインなしでシンタックスハイライトを導入する方法【導入できず】



きれいにソースコードを表示させたい。でも、できる限りプラグインは使用したくないですよね。

ソースコード表示の定番のプラグインは「Crayon Syntax Highlighter」ですが、このプラグインをインストールするとサイトが重くなるようです。

目次の定番のプラグイン「」は導入前後でサイト表示速度は変わりませんでしたが、プラグインを導入してサイトが重くなるのは絶対に避けたい。

ですので、今回はプラグインを導入せずに、ソースコードを綺麗に表示させたいと思います。

ちなみに、この記事をワードプレスのテーマ「Cocoon」であれば、簡単に表示させることができるのに…と思いながら書いています。
Cocoonでソースコードをきれいに表示するための方法

以下のサイトを参考にしました。
WP シンタックスハイライター「Prism.js」を導入

私は次の画像のようにチェックをして、プラグインの項目にはチェックをしませんでした。

「Prism.js」を導入

ダウンロードした2つのファイルは子テーマにアップロードしました。「function.php」も子テーマにアップロードしました。

ワードプレスの記事の編集画面で以下のように入力したものを「カスタムHTML」に記述しました。

<pre class1="line-numbers">     <code class1="language-python">
import pandas as pd
import numpy as np
from matplotlib import pyplot as plt
%matplotlib inline
x = 1
y = 2
print(x+Y)
</code>
</pre>

・・・結果は失敗。

     
import pandas as pd
import numpy as np
from matplotlib import pyplot as plt
%matplotlib inline
x = 1
y = 2
print(x+Y)

親テーマに「prism.css」「prism.js」をアップロードしてもダメ。
「wp-content」直下にアップロードしてもダメ。
「ザ・トール(THE THOR」のマニュアルや助け合いフォーラムで調べてもダメ。
試行錯誤してもダメ。
カスタムフィールドを用いて個別ページにCSSやJavaScriptを読み込ませることもできず。
あきらめました。

牛 吹き出し用
大したコードを書けないからまだいいよ。

<メモ>
・THE THOR(ザ・トール)の会員フォーラムやマニュアルの情報量が少ない。「javascript.js」と検索しても一つも見つからない。
・CSSやJavaScriptの読み込みは「functions.php」で行う。(こちらより)
・AMP(アンプ):Accelerated Mobile Pages→「highlight.js」には対応していないようです。(こちらより)
・「THE THOR」のjavascript.jsの内容(子テーマ)。「$(function(){})」→読み込みを待ってから実行する。

・実体参照変換

絶対パスの表示方法

エックスサーバーを利用して絶対パスを表示させる。

①エックスサーバーのアカウントにログインする。(こちらより)
②「サーバー管理」をクリックすると以下の画面になる。「サブFTPアカウント」をクリック。

③絶対パスが知りたいドメインを選択する。

そうすると「接続先ディレクト」に絶対パスが表示される。
④続きのパスは「File Zilla」で調べる。

phpを実行させて、絶対パスを表示させる。

サーバーの絶対パスを簡単に調べる方法

<!DOCTYPE html>
<html>
    <head>
        <title>path</title>
    </head>
    <body>
      <?php echo __FILE__; ?>
     </body>
</html>