WordPressの記事中にソースコードを表示させる方法

WordPressの記事を書くにあたってソースコードを投稿内で綺麗に表示させたいなーと思っていた時に選んだプラグイン、Crayon Syntax Highlighter（クレヨン・シンタックス・ハイライター）の紹介。

インストール方法

おススメは一つ目の方法。お好みで２つ目もやれますよー。

WordPress管理画面　→　プラグイン　→　新規追加　→　『Crayon Syntax Highlighter』で検索。

WordPress.orgでダウンロード（こちら）

使い方

code

使い方は超シンプル。プラグインをインストールしたらエディタ内にボタンが設置されるので、その画面から追加するだけ！

このプラグインにした理由は、ビジュアルエディタから使えるという事。HTMLで書く事が出来るプラグインもあるようですが、シンプルなこっちに。

導入後は、ボタンを押すと以下画面がでるので特にこだわりがなければこのままの設定でOK。

sample

 

対応言語

おそらくHTML,PHP,CSSくらいしか埋め込まないけれども対応言語は４６個。凄いねー。

  1. ABAP
  2. ActionScript
  3. AmigaDOS
  4. Apache
  5. AppleScript
  6. Arduino
  7. Assembly (x86)
  8. AutoIt
  9. C
  10. C#
  11. C++
  12. CoffeeScript
  13. CSS
  14. Delphi/Pascal
  15. Diff
  16. Erlang
  17. Go
  18. Haskell
  19. HTML
  20. Lisp
  21. Lua
  22. Microsoft Registry
  23. MIVA Script
  24. Monkey
  25. MS-DOS
  26. MySQL
  27. Java
  28. JavaScript
  29. Objective-C
  30. Perl
  31. PHP
  32. PL/SQL
  33. PostgreSQL
  34. PowerShell
  35. Python
  36. R
  37. Ruby
  38. Rust
  39. Scheme
  40. Shell (Unix)
  41. Transact-SQL
  42. TeX
  43. Vim
  44. Visual Basic
  45. Visual Basic .NET
  46. YAML

挿入したサンプル

<p>Wordpressの記事を書くにあたってソースコードを投稿内で綺麗に表示させたいなーと思っていた時に選んだプラグイン、Crayon Syntax Highlighter（クレヨン・シンタックス・ハイライター）の紹介。</p>
<p><!--more--></p>
<h2>使い方</h2>
<p>使い方は超シンプル。プラグインをインストールしたらエディタ内にボタンが設置されるので、その画面から追加するだけ！
<a href="https://kosakayuma.com/wp-content/uploads/2015/11/code.png"><img class="aligncenter size-full wp-image-566" src="https://kosakayuma.com/wp-content/uploads/2015/11/code.png" alt="code" width="1342" height="225" />
</a>
</p>

めっちゃ簡単。これでWordpressの記事を書くときもばっちし。

 

さぁ、本番いきまっせー。