【WordPress】記事内にソースコードをすっきりと表示させるプラグインを入れてみます【Crayon Syntax Highlighter】
こんばんわ、最近時間があればWordPressやSimplicity関連のサイトを見て回っているshigeです。
CSSとかタグを参考にさせて頂いているのですが、コードを記事に乗せる時に表のようなものに見やすく表示されています。
自分も記事にするときに見やすく表示できたらいいなと思い調べてみました。
どうやら『Crayon Syntax Highlighter』というプラグインを使って表示しているようです。
Crayon Syntax Highlighterとは
お勧めポイント
- サイト上にすっきり綺麗にコードを表示させることができる
- 行数表示、折り返し、ハイライトなど色々な設定ができる
- 使い方がシンプルで簡単
- ボタン1つでCtrl+A
- 日本語対応（他の同種プラグインが対応していないのかわかりませんが）
もしかしたら上記のことは他の同種プラグインでも同じなのかもしれませんが 評判がよさそうなのでとりあえず入れてみることにしました。
多数の言語に対応（公式サイトさまから引用）
- Default Language (one size fits all, highlights generic code)
- C1 (thanks to Oparin Pavel)
- ABAP
- ActionScript
- AmigaDOS (thanks to amigalog.com)
- Apache
- AppleScript
- Arduino
- Assembly (x86)
- AutoIt
- C
- C#
- C++
- Clojure (thanks to )
- CoffeeScript (thanks to Dai Akatsuka)
- CSS
- Delphi/Pascal (thanks to Chris McClenny)
- Delphi Web Script (thanks to smartmobilestudio)
- Diff (thanks to omniavin)
- Erlang (thanks to Daniel)
- Go
- Haskell
- HTML (XML/XHTML)
- INI
- Lisp
- Lua
- Microsoft Registry (thanks to techexplored.com)
- MIVA Script
- Monkey (thanks to Devolonter)
- MS-DOS (thanks to http://www.amigalog.com/?p=334)
- MySQL (thanks to AssemblySys.com and ansas-meyer.de)
- Java
- JavaScript
- Objective-C
- Papyrus
- Perl
- PHP
- PL/SQL
- PostgreSQL (thanks to Bitorchestra)
- PowerShell
- Python
- R
- Ruby
- Rust (thanks to Stibbons)
- Scheme (thanks to Harry75369)
- Shell (Unix)
- Swift (thanks to weyhan)
- Transact-SQL
- TeX
- Vim
- Visual Basic
- Visual Basic .NET (thanks to Kevin Gardthausen)
- YAML
- ZSH (thanks to Stibbons)
- Others will be added when requested
Crayon Syntax Highlighterの使い方
インストールの仕方
『Crayon Syntax Highlighter』からダウンロードしプラグインをアップロードする。
もしくはWordPress管理画面にある「プラグイン＞新規追加」からインストールする。
プラグインを有効化を忘れないように。
プラグインの設定
インストールが完了したらプラグインの設定をしていきます。
WordPress設定画面の「設定＞Crayon」からプラグインの設定を行います 。
基本的にそのままで使えるのですが、コードの折り返しを有効にするだけを変更しました。
コード挿入
投稿画面のテキスト入力の方にある「crayo」ボタンをクリックするとエディタが現れます。
タイトルやコードを書いて挿入ボタンを押せば以下のように表示されるはずです。
マウスオーバー時のツールバーアニメーションが邪魔だと感じたら「ツールバー設定のツールバー表示を常に表示に変更しましょう.
参考にさせていただいたサイトさま
