wordpressの記事にソースコードをきれいに表示するために「SyntaxHighlighter Evolved」と「Crayon Syntax Highlighter」を試しました。
記事のご案内
SyntaxHighlighter Evolved
上のプラグインをインストールして、表示させたいソースを[]で囲います。
使い方
1 |
[html]★ここにソースコードをいれます★ [/html] |
1 |
[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
1 |
<!-- 自動レスポンシブ --> |
Crayon Syntax Highlighter
Crayon Syntax Highlighterプラグインのインストール
■ Crayon Syntax Highlighterも同じくWordPressの管理メニュー「プラグインを検索」してインストールします。
Crayon Syntax Highlighterの設定
ダッシュボード → 「設定」→ Crayon Syntax Highlighter をクリック

■ <pre> タグでくくります、。
1 |
★★★コード |
Crayon Syntax Highlighterのデザイン


ets
個人的に 設定さえきちんとすれば、Crayon Syntax Highlighterの方がちゃんと表示するような気がしました。
CSSをいじくるときの最大注意
「cssをいじる時は、自己責任で・・・・」とよく書いてあるのを見ますが
本当に気を付けてくださいね。
① バックアップを取っておくこと
② ソースコードでCSS編集するとき、空白も意味あるのでつめないこと。
③ テストサイトで試して安全を確認してから正規のページをカスタマイズしましょう。
過去の失敗
大きな事故は、二度やりました。
一度目は、サーバーにあげたファイルを消して
もう一度作り直すことで解決しました。
更新したら・・・・更新したら・・・・・事件は、おこりました。
二度目は、ど~~~することもできずPC学ぶ先生にすがりました
//www.himetei.com/wordpress%E2%80%90backwpup/
みなさんは、気を付けてくださいね(*”▽”)
コメントを残す