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 Search and Replace Database で 出力されるメッセージ

  WordPressの引っ越し時にドメイン部分を変更する場合、データベースの中のド

記事を読む

ワードプレスのロゴ

サイトヘルスで「バックグランド更新が想定通りに動作していません」と表示される原因のひとつ

  結論 僕の場合は、Basic認証をかけている為でした。  

記事を読む

no image

wordpressのSyntaxHighlighter Evolvedでlanguageの種類一覧

WordPressで記事にコードを書く時にハイライトできる有名なプラグインSyntaxHig

記事を読む

ワードプレスのロゴ

WordPress 固定ページでfunction(関数)使うにはショートコードを使う

ショートコードって? 固定ページなどで みたいに書くと、設定した関数等を呼び出してくれる

記事を読む

ワードプレスのロゴ

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

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

記事を読む

ワードプレスのロゴ

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

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

記事を読む

no image

WordPress を IIS環境へ引っ越しする手順 – コンテンツインポート編

WordPress を IIS環境へ引っ越しする手順 – 環境構築編 と、 Word

記事を読む

ワードプレスのロゴ

WordPressでソースコードを埋め込むならgist

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

記事を読む

ワードプレスのロゴ

WordPressトラブル時のポイント

プラグインが絡んでいる可能性がある場合 よく見かけるのが、プラグインを無効にしてしまおう!とい

記事を読む

ワードプレスのロゴ

WordPress ページのスラッグを指定してパーマリンクを取得する

やり方 <a href="<?php echo get_permali

記事を読む

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

Message

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

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

PAGE TOP ↑