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>
1
2
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のデザインの基本がわかるかと思います

関連記事

  1. WPtouch

    WordPress

    スマートフォン対応してみた

    WordPressのプラグイン「WPtouch」を導入。このプラグ…

  2. WordPressの基本的な設定項目をおさらい1「一般設定」篇

    WordPress

    WordPressの基本的な設定項目をおさらい1「一般設定」篇

    WordPressをインストールしたら設定しておきたい項目のひとつです…

  3. 検索フォーム

    WordPress

    検索フォームを追加。

    ますますブログっぽくなってきた。検索するとこんな感じで表示される…

  4. WordPressの基本的な設定項目をおさらい2「投稿設定」篇

    WordPress

    WordPressの基本的な設定項目をおさらい2「投稿設定」篇

    WordPressの基本設定をおさらい、というかメモです。設定項目の投…

  5. top

    WordPress

    blogデザイン更新。

    ちょっと久しぶりにデザイン更新。シンプルに、blogへのリンク画像…

  6. WordPress

    WordPress:個別ページで第一階層しか表示しないようにしたい

    WordPressっていろいろできるなあ、調べるとほんとにいろんなブロ…

最近の記事

  1. 進撃の巨人展FINAL チラシ
  2. 【無印良品】ゴールデンウィーク中のご飯にレトルト買い込み!
  3. 世代ど真ん中だった!!『週刊少年ジャンプ展 vol2』
  4. デジタル通貨を買ってみた記録!とりあえず元は取っている!
  5. 【コレクション】カードダス:SDガンダム外伝シリーズ
  6. 懐かしい!!カードダスSD戦国伝!!
  7. 【UNIQLO】ユニクロ誕生感謝祭で買いだめ!

アーカイブ

  1. 展覧会

    ハイコントラストが美しかった「篠山紀信展」
  2. 日常

    『伝統の逆襲』
  3. 日常

    集中力きれた
  4. 読書

    【絵本】原題もステキなほっこり絵本『はなを くんくん』
  5. 日常

    まず一息。
PAGE TOP