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

2021-02-11
2021-02-15
wordpress
119view

wordpress

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

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

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

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

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

以下のサイトを参考にしました。
○WP シンタックスハイライター「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>

ツイートもチェックしよう！

フォローする