10-17-09

WordPressでソースコードに色をつけるプラグインの使い方：SyntaxHighlighter Evolved

ソースコードの種類に応じて、部分的にテキストの色を変えるSyntaxHighlighterというライブラリがありますが、WordPressにはプラグインがあるので簡単に導入する事ができます。
▼WordPress以外でSyntaxHighlighterの使い方
ソースコードに色をつけるSyntaxHighlighterの導入方法

使うまでの手順

１．プラグイン新規追加で「SyntaxHighlighter Evolved」をインストール。
２．インストール後「使用する」を押してとりあえず完了。
３．ソースコードに対して、［html］ソースコード［/html］とマークアップ。
※［　］←これは半角で
４．プレビューしてみてください。できましたか？
※この段階で表示できてなかったら、WordPressの外観からheader.phpに<?php wp_header(); ?>と、footer.phpに<?php wp_footer(); ?>が入っているか確認してみてください。もし、入ってなければ、<?php wp_header(); ?>は</head>の直前、<?php wp_footer(); ?>は</html>の直前に記入してください。

通常のSyntaxHighlighterはpreタグに対してnameとidをつけましたが、WordPressのSyntaxHighlighter Evolvedは［　］←この括弧に種類を書いてパラメータを書いていきます。

通常表示

［html］

<html>
<head>
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=shift_jis&quot;>
<title>test</title>
</head>
<body>
ほげほげ
</body>

開始する行数の指定

［html firstline=”10″］

<html>
<head>
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=shift_jis&quot;>
<title>test</title>
</head>
<body>
<a href=&quot;http://creator.cotapon.org&quot;>Creator Note</a>
</body>

自動でリンク設定されるURLテキストの解除

［html autolinks=”false”］

<html>
<head>
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=shift_jis&quot;>
<title>test</title>
</head>
<body>
<a href=&quot;http://creator.cotapon.org&quot;>Creator Note</a>
</body>

右上に出るツールバーの解除

［html toolbar=”false”］

<html>
<head>
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=shift_jis&quot;>
<title>test</title>
</head>
<body>
<a href=&quot;http://creator.cotapon.org&quot;>Creator Note</a>
</body>

行数を非表示にする

［html gutter=”false”］

<html>
<head>
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=shift_jis&quot;>
<title>test</title>
</head>
<body>
<a href=&quot;http://creator.cotapon.org&quot;>Creator Note</a>
</body>

シンプル設定

［html light=”true”］

<html>
<head>
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=shift_jis&quot;>
<title>test</title>
</head>
<body>
<a href=&quot;http://creator.cotapon.org&quot;>Creator Note</a>
</body>

折り畳んで表示

［html collapse=”true”］

<html>
<head>
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=shift_jis&quot;>
<title>test</title>
</head>
<body>
<a href=&quot;http://creator.cotapon.org&quot;>Creator Note</a>
</body>

行を強調させる。カンマで複数設定可能

［html highlight=”4,6,8″］

<html>
<head>
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=shift_jis&quot;>
<title>test</title>
</head>
<body>
<a href=&quot;http://creator.cotapon.org&quot;>Creator Note</a>
</body>

ルーラを表示させる

［html ruler=”true”］

<html>
<head>
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=shift_jis&quot;>
<title>test</title>
</head>
<body>
<a href=&quot;http://creator.cotapon.org&quot;>Creator Note</a>
</body>

Tabの横幅の大きさをかえる

［html tabsize=”10″］

<html>
<head>
	<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=shift_jis&quot;>
	<title>test</title>
</head>
<body>
	<a href=&quot;http://creator.cotapon.org&quot;>Creator Note</a>
</body>

行数なくしてシンプルに、自動でつくリンクを解除

［html autolinks=”false” light=”true” highlight=”4,6,8″］

<html>
<head>
	<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=shift_jis&quot;>
	<title>test</title>
</head>
<body>
	<a href=&quot;http://creator.cotapon.org&quot;>Creator Note</a>
</body>

Action Scriptも設定できるかな。

［as3］

mc.onRelease = function(){
	this.gotoAndPlay(10);
}

ActionScriptのバージョンは関係なさそうですね。

package{
	public class test{
			public function test(){
				trace(&quot;test&quot;);
			}
		}
	}
}

各言語の brush と対応JavaScript（SyntaxHighlighter ver.2.0.320）

Brush name Brush aliases File name
ActionScript3 as3, actionscript3 shBrushAS3.js
Bash/shell bash, shell shBrushBash.js
C# c-sharp, csharp shBrushCSharp.js
C++ cpp, c shBrushCpp.js
CSS css shBrushCss.js
Delphi delphi, pas, pascal shBrushDelphi.js
Diff diff, patch shBrushDiff.js
Groovy groovy shBrushGroovy.js
JavaScript js, jscript, javascript shBrushJScript.js
Java java shBrushJava.js
JavaFX jfx, javafx shBrushJavaFX.js
Perl perl, pl shBrushPerl.js
PHP php shBrushPhp.js
Plain Text plain, text shBrushPlain.js
PowerShell ps, powershell shBrushPowerShell.js
Python py, python shBrushPython.js
Ruby rails, ror, ruby shBrushRuby.js
Scala scala shBrushScala.js
SQL sql shBrushSql.js
Visual Basic vb, vbnet shBrushVb.js
XML xml, xhtml, xslt, html, xhtml shBrushXml.js
Posted by cotapon » WordPress, プラグイン
No Comments

09-15-09

WPtouchでiPhoneに最適化して表示：WordPress プラグイン

いろいろ便利になっていく世の中。使っているサービスに対してユーザーさんはいい感じにわがままになっていきます。ボクもそのうちの一人。あれができる。これができない。というのが、類似サービスへの浮気なのか正しい選択なのか、ある意味、そのサービスへの期待と、それに答えるデベロッパーの方々のおかげで、改善され更に盛り上がったりします。
そこで、WordPressでiPhone用のページがつくれないものか。探せばプラグインがありました！さすがですね！！

  • WPtouch
  • http://www.bravenewcode.com/wptouch/

    • ダウンロードしたzipファイルを解凍して、出てきたwptouchフォルダーを下記にアップ。

    /wp-content/plugin/

    ダッシュボードからプラグインの設定から、wptouchフォルダーにいろいろ設定ファイルがインストールされます。
    あとはあれをやってみたいですよねー！そう！Safariから「ホーム画面に追加」してウェブクリップのアイコンを登録。設定方法は真ん中のほうにある、Default & Custom Icon Poolから、pngファイルをアップロードしましょう。

    WPtouch

    設定が完了したらiPhoneで確認してみましょー！

    iPhone Safari画面iPhone ホーム画面

    いい感じになりましたね！＾－＾時間があればいろいろいじってみたいと思います。

    Posted by cotapon » WordPress, iPhone, プラグイン
    No Comments