WordPress Syntex Highlighter Evolved から Prism.jsに乗り換え

公開日: : wordpress

参考にしたサイト

WordPressでシンタックスハイライトならPrism.jsが軽量&多機能でベストチョイス

とてもわかり易かったです。

このサイト様では、WordPressで「テキスト」画面で編集することを前提に書かれていました。

「ビジュアル」画面でやりたい人は他のサイト様見たほうがいいと思います。僕は上記を導入しました。

引っかかった点

jsとcssを配置しないといけないんだけど、置き場所を間違えたためだった。

x

/css/prism.css

/js/prism.js

 

o

/wp-content/使ってるテーマ/css/prism.css

/wp-content/使ってるテーマ/js/prism.js

上記のサイト様をよく見たらちゃんと載ってますた。。。

SyntaxHighlighterを利用して作成してた記事のPrism.jsへの置換

記事あるかなと思って探したけど、今の所見つかってない。。。みんな手動でちくちくやってるのかな。。。?

WordPressに一括置換できるプラグインがあるみたい。

htmlのタグ囲い文字<>をphpで自動変換する

以下、一応ご紹介するけど、おすすめしません。僕は結局コレやるのやめました。

何故なら、<pre><code>の中にhtmlタグが含まれてると、WordPressで編集中にビジュアルタグに切り替えると自動整形されてコードがグチャグチャになるので。。。

やっぱりhtmlタグを載せる場合は、いちいちエスケープする必要がありそう。。。

 

やり方としては、以下をfunction.phpに追加すればいい。


/*---------------------------------------------------------*/
/* 18-05-09_Add  htmlタグをphpで特殊文字に置換する */
/*---------------------------------------------------------*/
add_filter('the_content', function($content) {
  $content = preg_replace_callback('/<pre(.*?)><code(.*?)>(.+?)<\/code><\/pre>/s', function($matches) {
    $matches[3] = preg_replace(['/</', '/>/'], ['<', '>'], $matches[3]);
    return '<pre'.$matches[1].'><code'.$matches[2].'>'.$matches[3].'
';
}, $content);

return $content;
});

参考にしたサイト

https://spyweb.media/2017/10/05/prism-js-highlight-syntax-source-code/

Googleアドセンスレスポンシブ

関連記事

ワードプレスのロゴ

WordPressでプラグインのバージョンを下げる

  やり方 プラグインをzipファイルで用意する。   古いプラグイ

記事を読む

ワードプレスのロゴ

静的htmlでContact Form 7を使用する

ショートコード設置まで .htaccessの内容変更や、htmlソースの最上部(docty

記事を読む

ワードプレスのロゴ

WordPressで、サブディレクトリにインストールしたコンテンツが基本のパーマリンクで正常に動作しない

環境 ワードプレスのコンテンツファイルは、以下のディレクトリに配置した。 domain/wp

記事を読む

ワードプレスのロゴ

XSERVER WordPress簡単移行 の後にやったほうがいい3つのこと

1.パーマリンクの更新 事象1 XSERVERのWordPress簡単移行使って、他のWor

記事を読む

ワードプレスのロゴ

WordPressのadd_actionとdo_action、ついでにadd_filter

※注意 この記事は正確性にかけます。 add_action フィルターに関数を追加する

記事を読む

ワードプレスのロゴ

WordPressを静的htmlから一部読み込む宣言3つ

記述場所 htmlファイルの最上部に <?php require_once('pa

記事を読む

ワードプレスのロゴ

WordPress アドレス (URL) を変更してしまった【解決】

状況 ダッシュボードを開こうとすると、wp-login.php Not Found となった。

記事を読む

ワードプレスのロゴ

WordPress get_option() は、DBのoptionsテーブルから値を取得する

例 サイトURLを取得する場合 $str = get_option('siteurl');

記事を読む

ワードプレスのロゴ

WordPressのフックを使ってカスタマイズする場合、子テーマでやること

add_actionやadd_filterなどの関数を使ってカスタマイズしたいとき、テーマ(テン

記事を読む

ワードプレスのロゴ

本番で公開しているWordPressのコピーをDockerで作る際のポイント

基本 ファイルとDBのバックアップを取得する。 バックアッププラグイン(BackWPUpとか

記事を読む

Googleアドセンスレスポンシブ

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

Googleアドセンスレスポンシブ

Windows10で ipsec vpn 設定後に更に必要になる設定 [自分用メモ]

完全に自分用メモです。   VPNの設定 &nbs

webp コマンド で 画像変換やリサイズ

webpとは Googleが開発した画像形式。 非可逆圧縮で圧

tux logo
HDD完全消去方法いろいろ(有料、無料、Linuxコマンド)

仕事でNSA方式(ランダムx2 と 0埋め)のデータ消去が必要にな

tux logo
ubuntu の Live DVDでキーボードの配置をjis(日本語)にする

キーボードの配置をjis(日本語)にする場合 loadkeys

zip icon
zipコマンドでzipファイル作成 再帰的

やり方 zip -r zipファイル名.zip 圧縮対象のファイ

→もっと見る

PAGE TOP ↑