WordPressの記事にソースコードをきれいに表示するためのプラグイン

WordPressの記事にソースコードをきれいに表示するために「SyntaxHighlighter Evolved」と「Crayon Syntax Highlighter」を試しました。

目次

WordPressの記事にソースコードをきれいに表示するためのプラグイン

SyntaxHighlighter Evolvedは、記事上にソースコードを表示させるプラグインで、Crayon Syntax Highlighterとともにメジャーで使いやすいプラグインです。

7種類のテンプレートがあり、多くの言語に対応しています。

ブロックエディタにも対応しているので、簡単にソースコードを記事上に表示できます。

SyntaxHighlighter Evolved

上のプラグインをインストールして、表示させたいソースを[]で囲います。
使い方

★ここにソースコードをいれます★  
[css]★ここにソースコードをいれます★  [/css]

ダウンロード

SyntaxHighlighter Evolvedをダウンロードしましょう。

ここからダウンロードします。

https://ja.wordpress.org/plugins/syntaxhighlighter/

SyntaxHighlighter Evolvedプラグインのインストール

SyntaxHighlighter Evolvedをダッシュボードよりインストールします。

■ その1 ダウンロードしたZipファイルのアップロード

■ その2 WordPressの管理メニュー「プラグインを検索」してインストールする。

SyntaxHighlighter Evolvedの設定

ダッシュボード → 「設定」→ SyntaxHighlighter Evolved をクリック

特に設定の必要のない人は何も触る必要はありません。

コードに番号を入れたり、自動リンクを挿入したい場合はチェックマークで設定します。

[●●●]   カッコで囲うだけでソースコードが表示されます。

表示デザイン色々

SyntaxHighlighter Evolved の設定より表示のデザインが変えれます。

下の方にプレビューがあります。
ここで変更されたデザインが確認できます。

【デフォルト】

【Django】

【Fade to Grey】

ets

Crayon Syntax Highlighter

WordPressの記事の中にソースコードを綺麗に表示するプラグインには「Crayon Syntax Highlighter」もメジャーです。

※しかしながら、最近は何年も更新がないのが気になるところです。

WordPressの更新も頻繁ですし、PHP7.3の対応が出来なくなる可能性があるので、使用は考えた方が良いです。

以下は、5年前に記載した記事です。

Crayon Syntax Highlighterプラグインのインストール

Crayon Syntax Highlighter

■ Crayon Syntax Highlighterも同じくWordPressの管理メニュー「プラグインを検索」してインストールします。

Crayon Syntax Highlighterの設定

ダッシュボード → 「設定」→ Crayon Syntax Highlighter をクリック

■「 <pre> 」タグでくくります、。

★★★コード

Crayon Syntax Highlighterのデザイン

個人的に 設定さえきちんとすれば、Crayon Syntax Highlighterの方がちゃんと表示するような気がしました。

CSSをいじくるときの最大注意

「cssをいじる時は、自己責任で・・・・」とよく書いてあるのを見ますが
本当に気を付けてくださいね。

当ブログも過去に、サイトが消える事故を起こしてしまいましたので…

【大事な事】

① バックアップを取っておくこと

② ソースコードでCSS編集するとき、空白も意味あるのでつめないこと。

③ テストサイトで試して安全を確認してから正規のページをカスタマイズしましょう。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

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

目次