WordPress

WordPressで記事中にプログラムコード(ソース)を表示させる方法

  /

どうも、せいすこうです！
開発系のブロクでソースを表示させてるのを目にする事が結構あると思うのですが、今回はこの記事中に表示しているソースコードの使い方についてまとめてみました。

プラグイン「Crayon Syntax Highlighter」

本サイト内の記事中に表示しているソースコードは「Crayon Syntax Highlighter」というプラグインを使用しています。
ソースコードを表示できるプラグインは他にも色々ありますが、これが一番使いやすくて見た目もしっくりきたので使わせて貰っています。
読み方は、Crayon Syntax Highlighter（シンタックス・ハイライター）です。

このプラグインが優れている点

さて、このCrayon Syntax Highlighterというプラグインを利用すると、ソースコードがエディタがのように綺麗に表示できます。
Webサイト上でHTML/CSSやプログラミングのコードを解説する機会が多い方は、このプラグインを活用しましょう。

  • Webサイト上でエディタのように綺麗にソースコードを表示できる
  • プラグインを追加するだけで使用可能
  • ショートコードを利用して記述することができる

また、Crayon Syntax Highlighterは様々な言語に対応しているため、Webだけでない色んな業種のエンジニアさんも安心です！

対応言語一覧

ABAP
ActionScript
AmigaDOS
Apache
AppleScript
Arduino
Assembly (x86)
AutoIt
C
C#
C++
CoffeeScript
CSS
Delphi/Pascal
Diff
Erlang
Go
Haskell
HTML
Lisp
Lua
Microsoft Registry
MIVA Script
Monkey
MS-DOS
MySQL
Java
JavaScript
Objective-C
Perl
PHP
PL/SQL
PostgreSQL
PowerShell
Python
R
Ruby
Rust
Scheme
Shell (Unix)
Transact-SQL
TeX
Vim
Visual Basic
Visual Basic .NET
YAML

使い方

管理画面から検索してインストール、もしくはWordPress.org からダウンロードし、アップロードしてインストールして下さい。

  1. WordPress管理画面 ＞ プラグイン ＞ 新規追加 ＞「Crayon Syntax Highlighter」で検索
  2. WordPress.org からダウンロード→Crayon Syntax Highlighter

    使い方その1：preとcodeで包む！

    ＜pre＞＜code＞サンプルコード＜/code＞＜/pre＞

    ※全角にしています。
    実際の表示は以下のようになります。

    使い方その2：記事入力欄の真上に「crayon」をクリック

    上記の画面が出てきますので、入力したいプソースコードを記述し「add」ボタンで追加します。

    細かい設定方法

    管理画面の説明を読み、必要に応じて設定を変更して下さい。
    ※特に変更しなくても初期設定のままでも利用可能です！

    管理画面→設定→Crayonで詳細設定できるページに行けます。
    ここでデザインや高さ・横幅までかなり詳細にカスタマイズできます！

    まとめ

    Crayon Syntax Highlighterは、WordPressサイトの記事内でソースコードを綺麗に表示できるプラグインです。
    エディタがのように綺麗に表示でき、使い勝手も良いので非常におすすめです。
    ぜひ使ってみてください！

    WordPress コード ソース プラグイン プログラム ワードプレス