あなたのWordPressが表示するソースコードはださい?Qiitaのように美しくソースコードを表示する【Prism.js】

Qiitaで記事を書くことになれると、WordPressで自分で記事を編集するのが嫌になります。

嫌になる理由は、ソースコードの表示が汚いからです。

今回は、WordPressでも美しくソースコードを表示する方法を紹介します。

はじめに

今回はWorPressでソースコードを綺麗に表示する方法を模索していきたと思います。
前回は「Crayon Syntax Highlighter」を使用して、ソースコード表示を綺麗にしました。

【2019年】WordPressでQiitaのように美しくソースコードを表示する【Crayon Syntax Highlighter】

2019年11月9日
「Crayon Syntax Highlighter」はプラグインで導入できるため、簡単にソースコードを綺麗に表示できるメリットがありました。
メリットと同時に、細かい設定はできないデメリットも存在していました。

デメリット(色分けの細かい設定ができない)

理想:Qiita(美しい表示)

  • 宣言と命名が綺麗に色分けされている


現実:Crayon Syntax Highlighter

  • 宣言と命名が色分けされない
  • コメントが設定通りの色で反映されない(Monokaiだと灰色設定でもオレンジ)

今回は「Prism.js」を利用して、ソースコードの表示を綺麗にする方法を試しました。
今回の方法:Prism.js

class ClassName():
    def __init__(self, ):
         hogehoge
age = 0
asas = "sssss"
print('Happy Birthday!');

自分でも満足できる仕上がりになりました!ブログはまず、「記事をいっぱい書け」と言われますが、デザインにこだわることで、自分のモチベーショを上げることが出来たので、良しとします。!

Prism.js設定方法

Prism.jsはCrayon Syntax Highlighterと異なり、若干手間が発生します。そのため、簡易的に表示を希望するなら、Crayon Syntax Highlighterがオススメです。

個人的には、Prism.jsの色分けが好みなので、できるだけ分かりやすく説明を行っていきたいと思います。

自環境

サーバー:Xサーバー
利用テーマ:Stork

手順

  1. ソースコードを綺麗に表示するプログラムをダウンロード
  2. ダウンロードファイルを、サーバーへアップロード
  3. アップロードしたファイルを読み込む設定
  4. 反映されているか確認

1. ソースコードを綺麗に表示するプログラムをダウンロード

Prism.js」にアクセスしてプログラムをダウンロードします。
DOWNLOADボタンを押すと、何をダウンロードするか聞いてきます。自分が利用する予定のものにチェックをつけましょう。

ダウンロードについて、は下記の記事が詳しいです。
エンジニアブロガーに必須なシンタックスハイライトをWordPressに導入する

ダウンロードする際に私がチェックをつけたのは、

  • Theme : TOMMOROW NIGHT
  • Languages : 初期設定+(C/Python/Ruby/HTTP)
  • Plugins : Line Highlight,Remove initial line feed

以上です。
チェックが終われば、.cssと.jsをダウンロードします。

2. ダウンロードファイルを、サーバーへアップロード

先ほどダウンロードしたファイルをアップロードします。

それぞれサーバへのアップロード方法とファイルの置き場所は異なると思います。Xサーバであれば下記の方法で可能です。

Xサーバ以外の方
「〇〇サーバ(利用しているサーバ)」+「アップロード」で検索すると、アップロード方法がわかると思います。

アップロード

アップロードの方法の説明です。Xサーバーのログイン画面から、下記のように移動します。

インフォパネル > サーバー:ファイル管理 > 自信のサイトのドメインのディレクトリ

ドメイン

移動した後に、テーマが保存されている場所へ移動します。
恐らくテーマが保存されている先は、
public_html > wp-content > themes > jstork_custom

自分が使用しているテーマの保存先まで移動したら、後は、先程ダウンロードしたPrism.jsをアップロードするだけです!

up

3. アップロードしたファイルを読み込む設定

アップロードを行った後に、自動で設定を反映してくれれば非常に楽なのですが、そうは行きませんでした。

自分で、アップロードしたデータを読み込みに行く必要があります。
設定は簡単で、ソースコードをコピーするだけです(Stork以外の方は、ファイルパスをアレンジするだけです!)。

読み込み先を設定する場所

場所:WordPressのホーム画面 > 外観 > テーマエディター
変更ファイル:テーマのための関数 (functions.php)。

変更ファイルのテーマのための関数 (functions.php)を編集状態にした後、以下のソースコードをアレンジしていただければ上手く反映されます。

アレンジする部分は読み込み先のファイルパスの設定だけです。

// css、jsを読み込み
add_action( 'wp_enqueue_scripts', 'prism_style' );
function prism_style() {
    wp_enqueue_style( 'prism-css', get_stylesheet_directory_uri() . '/prism.css' );//自身がPrismをアップロードしたディレクトリのパス
    wp_enqueue_script( 'prism-js', get_stylesheet_directory_uri() . '/prism.js', array('jquery'), false, true );//自身がPrismをアップロードしたディレクトリのパス
}

4. 反映されているか確認

実際に記事を編集して、ソースコードが綺麗に表示されるか確認しましょう。

samp

記事編集画面の「コードインライン」を選択するか、MarkDownで記述するなら、バッククォート3つで囲むこと(```)。囲んだ後にpythonやcssと記述することで、自動で色を反映してくれる。

実際の例

// css、jsを読み込み
add_action( 'wp_enqueue_scripts', 'prism_style' );
function prism_style() {
    wp_enqueue_style( 'prism-css', get_stylesheet_directory_uri() . '/prism.css' );//自身がPrismをアップロードしたディレクトリのパス
    wp_enqueue_script( 'prism-js', get_stylesheet_directory_uri() . '/prism.js', array('jquery'), false, true );//自身がPrismをアップロードしたディレクトリのパス
}

実際の編集記事

edit

囲んであげるだけでソースコードを綺麗に表示できるようになりました!!

注意
※ソースコードがPrism.jsのスタイルを反映しない時

・キャッシュを削除して更新してみてください
・読み込み先のパスがあっているか確認してください
・Prism.jsで選択した、プログラムフォーマットに抜けがないか確認してください

コメントを残す

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