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でソースコードを埋め込むならgist

prism.js使ってたが… Wordpressのプラグインでコードハイライトしていたが(Sy

記事を読む

no image

WordPressを日本語化する手順

WordPressのこと、WPと記載します。   うまくいかな

記事を読む

ワードプレスのロゴ

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

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

記事を読む

ワードプレスのロゴ

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

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

記事を読む

ワードプレスのロゴ

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

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

記事を読む

no image

WordPressに大量にたまったスパムコメントをプラグインなしで消す

MySQLのコマンドで実施 DELETE FROM wp_comments WHERE c

記事を読む

ワードプレスのロゴ

WordPressで画像追加するときに勝手に画像へのリンク張られるのをやめる設定

  デフォルトの設定を変える http://WordpressのURL

記事を読む

ワードプレスのロゴ

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

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

記事を読む

codepen

CodePen で jQuery設定

html、css、Javascriptのコードを書いたら画面半分に動作結果を表示してくれて、しか

記事を読む

ワードプレスのロゴ

WP Mail SMTP で XSERVERのメール使うときの設定

  Auto TLS をオフにするのを忘れがち。 上図はオフにした図。デフォル

記事を読む

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

Message

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

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

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

html5-logo
html5のsectionとarticleの使い方と順番

とりあえずこちらのイメージを参考にやっていこうかと思う。

vs
vscodeで現在開いているファイルのPathをコピーする

やり方 1. コマンドパレットを開いて、「copy path

php-logo
php =& イコールアンパサンド で参照渡し

意味 変数やオブジェクトなどを参照渡しする。 # 下記はど

php-logo
php5 varによる宣言

古い、人が作ったソース見てたらvarで変数宣言しているのがあって調

php-logo
php parent 親クラスのプロパティやメソッドにアクセスする

子クラスで使う すると親クラスのプロパティやメソッドにア

→もっと見る

PAGE TOP ↑