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

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

 

SyntaxHighlighter Evolved

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

 

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

 

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

Crayon Syntax Highlighter

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

Crayon Syntax Highlighterの設定

 

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

 

 

 

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

 

 

Crayon Syntax Highlighterのデザイン

 

 

ets

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

 

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

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

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

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

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

 

過去の失敗

 

大きな事故は、二度やりました。
一度目は、サーバーにあげたファイルを消して
もう一度作り直すことで解決しました。

更新したら・・・・更新したら・・・・・事件は、おこりました。

二度目は、ど~~~することもできずPC学ぶ先生にすがりました

//www.himetei.com/wordpress%E2%80%90backwpup/

 

みなさんは、気を付けてくださいね(*”▽”)

Pocket

当ブログの記事に共感していただけたら、嬉しいです。

最新の投稿

カテゴリー

コメントを残す

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