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. Twitter Embed

    WordPress

    Twitterのツイートをカンタンに埋め込めるWPプラグイン『Twitter Embed』

    ブログを書いていると「ツイッターのツイートを記事の中に表示させたい!…

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

    WordPress

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

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

  3. FacebookのLike Boxをレスポンシブ対応させる方法

    WordPress

    FacebookのLike Boxをレスポンシブ対応させる方法

    最初、これ分からなくて困っていたのでメモしておきます。いまどきはデフ…

  4. コメント件数

    WordPress

    記事ごとにコメント数を表示

    ちょっと前進。以下をindex.phpに書き加えた。&lt;a …

  5. Gravatar01.jpg

    WordPress

    WordPressにアバターが表示されるように「Gravatar」に登録してみた

    WordPressを使っているとコメント覧とか記事を書いたライター…

  6. Amazonプラグインデザイン

    WordPress

    Amazonプラグイン導入

    プラグインのデザインを整えてみた。これはAmazonの商品情報を表示…

最近の記事

  1. 【無印良品】作り置きに欠かせない!バルブ付き密閉保存容器
  2. 【UNIQLO】冬のジム通いにブロックテックフリースパーカをお得に購入!!
  3. 【UNIQLO】冬のジム通いにブロックテックフリースパンツをお得に購入!!
  4. 【UNIQLO】ユニクロ誕生感謝祭で買いだめ!
  5. 便利すぎる!買ってよかったキッチンツール「キッチンペーパーハンガー」
  6. ジムで活躍!プロテイン用のボトルにおすすめ!「nalgene(ナルゲン)の沖倉商店コラボ・ボトル」
  7. コミックのイラストが新鮮だった!『MARVEL展』
  8. シンプルで使い易い!!「雷に強い マイクロタップ 4個口」
  9. ジム用に購入♪ リバーサル・オッシュマンズ別注「ドライスウェットショーツ」
  10. 暮しの手帖社とのコラボ作品!大きい面積が使いやすい!「日東紡の新しいふきん」

アーカイブ

  1. バスルーム用に購入。YAZAWAの「雷ガード付トリプルタップ」

    プロダクト

    バスルーム用に購入。YAZAWAの「雷ガード付トリプルタップ」
  2. 無印良品の箸で2015年をはじめます

    無印良品

    【無印良品】無印良品の箸で2015年をはじめます
  3. 日常

    『Typographic Systems―美しい文字レイアウト、8つのシステム』…
  4. 日常

    好評
  5. freitag_repair_done-1.jpg

    プロダクト

    【F】FREITAGの修理が完了! これはもう職人技!
PAGE TOP