プラグイン | creator note

ソースコードの種類に応じて、部分的にテキストの色を変える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］

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

開始する行数の指定

［html firstline=”10″］

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

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

［html autolinks=”false”］

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

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

［html toolbar=”false”］

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

行数を非表示にする

［html gutter=”false”］

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

シンプル設定

［html light=”true”］

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

折り畳んで表示

［html collapse=”true”］

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

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

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

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

ルーラを表示させる

［html ruler=”true”］

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

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

［html tabsize=”10″］

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

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

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

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

Action Scriptも設定できるかな。

［as3］

<br />
mc.onRelease = function(){<br />
	this.gotoAndPlay(10);<br />
}<br />

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

<br />
package{<br />
	public class test{<br />
			public function test(){<br />
				trace(&amp;quot;test&amp;quot;);<br />
			}<br />
		}<br />
	}<br />
}<br />

各言語の 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

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

WPtouch

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

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

/wp-content/plugin/

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

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

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

creator note

カテゴリーアーカイブ: プラグイン

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