WordPressの記事にソースコードをきれいに表示するために「SyntaxHighlighter Evolved」と「Crayon Syntax Highlighter」を試しました。
WordPressの記事にソースコードをきれいに表示するためのプラグイン
SyntaxHighlighter Evolvedは、記事上にソースコードを表示させるプラグインで、Crayon Syntax Highlighterとともにメジャーで使いやすいプラグインです。
7種類のテンプレートがあり、多くの言語に対応しています。
ブロックエディタにも対応しているので、簡単にソースコードを記事上に表示できます。
SyntaxHighlighter Evolved
上のプラグインをインストールして、表示させたいソースを[]で囲います。
使い方
[html]★ここにソースコードをいれます★ [/html]
[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プラグインのインストール
https://ja.wordpress.org/plugins/crayon-syntax-highlighter/
■ Crayon Syntax Highlighterも同じくWordPressの管理メニュー「プラグインを検索」してインストールします。
Crayon Syntax Highlighterの設定
ダッシュボード → 「設定」→ Crayon Syntax Highlighter をクリック
■「 <pre> 」タグでくくります、。
★★★コード
Crayon Syntax Highlighterのデザイン
個人的に 設定さえきちんとすれば、Crayon Syntax Highlighterの方がちゃんと表示するような気がしました。
CSSをいじくるときの最大注意
「cssをいじる時は、自己責任で・・・・」とよく書いてあるのを見ますが
本当に気を付けてくださいね。
当ブログも過去に、サイトが消える事故を起こしてしまいましたので…
【大事な事】
① バックアップを取っておくこと
② ソースコードでCSS編集するとき、空白も意味あるのでつめないこと。
③ テストサイトで試して安全を確認してから正規のページをカスタマイズしましょう。
