tetumemo

ココロをオシャレに刺激する

ソースコードをコピペしやすく紹介するならWordPressプラグイン「SyntaxHighlighter Evolved」がオススメ


スクリーンショット_092313_011038_AM

ブログのカスタマイズネタで色々なエントリーを読んでいると、ソースコードがとてもコピペしやすく紹介されているサイトが沢山ありますね。

どう記述すればいいのか???

と悩みに悩んでいましたが、WordPressでコチラの記事で親切丁寧に解説されておりました。感謝!

まとめ:SyntaxHighlighter Evolved の使い方 (設定&記述例) | attosoft.info

 

 

 


必要なのはWordPressプラグイン「SyntaxHighlighter Evolved」です。

インストールはこちらからどうぞ ↓

WordPress › SyntaxHighlighter Evolved « WordPress Plugins

 

 

 

「SyntaxHighlighter Evolved」の超シンプルな使い方

例)

[表現したい言語 html・css・phpなど]



この空欄に好きにコードを記述する”

 

[表現したい言語でくくる html/・css/・php/など(必ずスラッシュで閉じてくださいね]

 

実際にhtmlで閉じるように入力してみるとこんな感じ ↓

 

[html]
<a href="http://wordpress.org/">WordPress</a>
[/html]

ショートコードパラメータと合わせるとさらに便利になりますよ

ショートコードで指定可能な主なパラメータ。

autolinks: ソースコード中の URL テキストに自動的にリンクを貼るか
classname: コードボックスの div 要素に付加される class 属性値
collapse: コードボックスを収納表示するか (クリックで展開)
firstline: ソースコードの行数を何番から始めるか
gutter: コードボックス左端に行番号を表示するか
highlight: コード中でハイライト表示する行番号 (“2,5-10,12” のように複数行/行範囲を指定可)
htmlscript: JavaScript や PHP コード中の HTML/XML コードを強調表示するか
light: 行番号やツールバーが表示されないライトモードで表示するか
padlinenumbers: 行番号の桁数。つまり 1, 2, … 10 と (ゼロサプレスで) 表示するか、01, 02, … 10 や 001, 002, … 100 などのように (ゼロパディングで) 表示するか。
title (v3 only): コードボックス上部に表示されるテキスト (コードボックス収納時は展開用のリンクテキスト)
toolbar: ツールバーの On/Off
Version 3.x: コードボックス右上にクレジットリンク (?)
Version 2.x: マウスホバー時にコードボックス右上にソース表示/コピー/印刷/クレジットボタン (Flash, )
wraplines (v2 only): 長い行を折り返して横スクロールバーを非表示にするか

引用元:まとめ:SyntaxHighlighter Evolved の使い方 (設定&記述例) | attosoft.info

 

最後に

やっと疑問だったソースコードの記述の方法がクリアになってスッキリしました。

これで微力ながらソースコードいじった時の記事もカッコよく書けるようになると思います!

 

では、また

 

Return Top