![SyntaxHighlighter Evolved](http://webnetamemo.com/wp3/wp-content/uploads/2015/06/default.png)
WordPressのプラグインSyntaxHighlighter Evolvedを使うとソースコードをコピペでそのまま貼りつけ表示することができます。
目次
使い方
使い方は簡単!ソースコードを
・・・[
html]
で囲むだけ。[
/html]
![SyntaxHighlighter Evolved](http://webnetamemo.com/wp3/wp-content/uploads/2015/06/she1.png)
HTMLのソースコードを書いてみる
こんな感じで表示されます。
![SyntaxHighlighter Evolved](http://webnetamemo.com/wp3/wp-content/uploads/2015/06/she2.png)
ソースコードタグの種類
html
以外にも php
や css
などのタグがあるのでご参考ください。
ソースコードの種別 | タグ |
---|---|
HTML | html |
Plain Text | plain, text |
CSS | css |
PHP | php |
JavaScript | javascript |
ショートコード
highlight
highlight="1,5,10-12"
1行目、5行目、10~12行目をハイライト表示してくれます。
![SyntaxHighlighter Evolved](http://webnetamemo.com/wp3/wp-content/uploads/2015/06/she3.png)
title
title="サンプルタイトルAAAAA"
コードの前にタイトルを表示してくれます。
![SyntaxHighlighter Evolved](http://webnetamemo.com/wp3/wp-content/uploads/2015/06/she4.png)
テーマ
SyntaxHighlighter Evolvedには色々なデザインテーマが用意されています。管理画面で設定できますのでお好みに変更してみてください。
Default
![SyntaxHighlighter Evolved](https://webnetamemo.com/wp3/wp-content/uploads/2015/06/default.png)
Django
![Django](https://webnetamemo.com/wp3/wp-content/uploads/2015/06/django.png)
Eclipse
![Eclipse](https://webnetamemo.com/wp3/wp-content/uploads/2015/06/eclipse.png)
Emacs
![Emacs](https://webnetamemo.com/wp3/wp-content/uploads/2015/06/emacs.png)
Fadetogrey
![Fadetogrey](https://webnetamemo.com/wp3/wp-content/uploads/2015/06/fadetogrey.png)
Midnight
![Midnight](https://webnetamemo.com/wp3/wp-content/uploads/2015/06/midnight.png)
Rdark
![Rdark](https://webnetamemo.com/wp3/wp-content/uploads/2015/06/rdark.png)
補足:Firefoxだと表示がずれる!
![SyntaxHighlighter_firefox](http://webnetamemo.com/wp3/wp-content/uploads/2015/06/SyntaxHighlighter_firefox.png)
Firefoxだと表示がずれていたのでCSSで修正しました。
WordPressのインストールフォルダ/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/styles/shCore.css
44行目のvertical-align: baseline !important;
をコメントアウト。
/*vertical-align: baseline !important;*/