WordPress

記事でソースコードを分かりやすく表示するWPプラグイン『WP-Syntax』を導入してみた


プログラミング系のブログならソースコードを記事内に表示したいってことは頻繁におこります。そこで、きれいにソースコードを表示させるためのWPプラグインが必要になるわけですね。

実際にその手のプラグインはいろいろあるみたいですが、中でも表記がカンタンな『WP-Syntax』を選んで使うようにしています。

記事を書くときに設定項目が多すぎたりするのはめんどくさいですからね。

めんどくさがりな人にオススメなプラグインです♪

プラグインのインストール

  1. プラグインの新規追加を選択
  2. ダッシュボードで左カラムから「プラグイン」項目の「新規追加」を選択します。
    WP Syntax1

  3. プラグインを検索
  4. 「wp syntax」で検索します。
    WP Syntax2

  5. インストールしましょう
  6. 検索すると一番上に表示されます。
    「いますぐインストール」をクリックします。
    WP Syntax3

  7. プラグインを有効化します
  8. 「プラグインを有効化」をクリックします。
    これでインストールは終了です。設定項目は特になし。
    WP Syntax4

プラグインの使い方

設定項目はとくにないプラグインです。
記事内にコードを表示させたい場合は以下のように記述します。

<pre lang="コンピュータ言語" line="開始行番号">
ソースコード
</pre>

例えば以下のような感じです。

<pre lang="objc" line="1">
NSArray *array = [NSArray arrayWithObjects:@"one", @"two", @"three", nil];
NSLog(@"%@", array);
</pre>
NSArray *array = [NSArray arrayWithObjects:@"one", @"two", @"three", nil];
NSLog(@"%@", array);

コンピュータ言語リスト

HTML5がまだのようですね、そのうち追加されることを期待!

abap, actionscript, actionscript3, ada, apache, applescript, apt_sources, asm, asp, autoit, avisynth, bash, bf, bibtex, blitzbasic, bnf, boo, c, c_mac, caddcl, cadlisp, cil, cfdg, cfm, cmake, cobol, cpp-qt, cpp, csharp, css, d, dcs, delphi, diff, div, dos, dot, eiffel, email, erlang, fo, fortran, freebasic, genero, gettext, glsl, gml, bnuplot, groovy, haskell, hq9plus, html4strict, idl, ini, inno, intercal, io, java, java5, javascript, kixtart, klonec, klonecpp, latex, lisp, locobasic, lolcode lotusformulas, lotusscript, lscript, lsl2, lua, m68k, make, matlab, mirc, modula3, mpasm, mxml, mysql, nsis, oberon2, objc, ocaml-brief, ocaml, oobas, oracle11, oracle8, pascal, per, pic16, pixelbender, perl, php-brief, php, plsql, povray, powershell, progress, prolog, properties, providex, python, qbasic, rails, rebol, reg, robots, ruby, sas, scala, scheme, scilab, sdlbasic, smalltalk, smarty, sql, tcl, teraterm, text, thinbasic, tsql, typoscript, vb, vbnet, verilog, vhdl, vim, visualfoxpro, visualprolog, whitespace, whois, winbatch, xml, xorg_conf, xpp, z80

▼これでWordPressのデザインの基本がわかるかと思います