さて、WordPressのインストールも終わったので、次にやることと言えば、コードを書くことです。（笑）
このブログでは、色んなプログラム書いてみたいと思ってるので、ソースコードを掲載することが多くなると思います。
そこで、今回は、ソースコードをきれいに表示する方法について調べてみました。
前から、最近のブログは、ソースコードの表示がきれいだなと思ってたんだけど、やはりツールがあったんですね。
WordPressでは、SyntaxHighlighter Evolvedというプラグインを使います。
インストールは、例によって、ダッシュボードで「プラグイン」－「新規追加」を選択します。
検索条件に「SyntaxHighlighter」と入力して検索すると、すごい数のプラグインがヒットします。（笑）
この中の一番上にある、SyntaxHighlighter Evolvedを今回はインストールしました。
（SyntaxHighlighter Evolvedの詳細は、こちらでどうぞ）
インストールそのものは非常に簡単で、すぐに終了します。（プラグインの有効化を忘れずに）
色々と設定があるみたいですが、今回はとりあえず何も設定していません。
プラグインをインストールしたら、早速使ってみましょう。（笑）
プラグインの使い方は、投稿記事の中で[]で囲んだ中にコマンドを書いて、その間にソースを書くだけでOKです。
例えば、HTMLの場合は、［html］と［/html］の間に、HTMLソースを貼り付けます。
すると、こんな感じになります。
1.HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>サンプル（表示用なので動くかどうかは不明）</title>
<link rel='stylesheet' type='text/css' href='./jquery/css/jquery-ui-1.8.21.custom.css' />
<script type='text/javascript' src='./jquery/jquery-1.7.2.min.js'></script>
<script type='text/javascript' src='./jquery/jquery-ui-1.8.21.custom.min.js'></script>
<style type='text/css'>
body {
margin-top: 40px;
text-align: center;
font-size: 14px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
</style>
<script type='text/javascript'>
function closeDlg() {
$("#testDlg").dialog("destroy");
}
</script>
</head>
<body>
<h1>テスト画面</h1>
<div style="width: 100%; height: 50px;">
<input type="button" onclick="closeDlg();" name="btnClose" value="閉じる"/>
</div>
<div id="testDlg" style="display: none;"></div>
</body>
</html>
もちろん、このプラグインが対応しているのは、HTMLだけではありません。
今後、このブログで記載する可能性の高そうな言語について、一通り試してみました。
ちなみに、今回表示するソースコードは、昔、勉強のために作ったサンプルコードから適当に一部だけ引っ張って来たものなので、ソースの内容や動作については一切保障しかねます。
（あくまで、ソースコードの表示が見たいだけに、持ってきたものであることをご了承ください。）
2.PHP
<!--?php
//クラス
class User {
public $name;
private $email;
protected $url;
//コンストラクタ
public function __construct($name, $email) {
$this--->name = $name;
$this->email = $email;
}
public function sayHi() {
echo "Hi! my name is " . $this->name;
}
}
class SuperUser extends User {
public function superSayHi() {
echo "Yaa! my name is " . $this->name;
}
}
3.Java
package com.example.android.hello;
import android.app.Activity;
import android.os.Bundle;
public class HelloAndroidActivity extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
}
4.XML
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello" />
</LinearLayout>
5.C#
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;
using WpfListView;
namespace WpfTest
{
public partial class Form1 : Form
{
//コンストラクタ
public Form1()
{
InitializeComponent();
for (int i=1; i<=10; i++)
{
WpfListViewRow listRow = new WpfListViewRow();
userControl11.stackPanel.Children.Add(listRow);
}
}
}
}
どの言語も、きれいに表示できてますね。
基本的に、「［言語名 属性］ソースコード［/言語名］」の構成になります。（［］は半角で記載。）
今回は、属性は設定していませんが、行番号を非表示にしたり、ハイライトの行を指定したりと色々なことができるようです。
まあ、それは、今後、色々と試してみたいと思います。
あと、このプラグインに全く問題がないわけでもなく、どうもソースの内容が変えられる場合があるようです。
自分の場合は、下書き保存したものを、再編集した時に変わってたんですが、どういった場合にこの現象が発生するのかまでは、まだ特定できていません。
たまに、インデントがおかしくなることもあるみたいですが、この辺りの話も、今後ソースを書く機会が多くなるので、色々とできると思います。
そこら辺の話も、いずれ書きたいと思います。
コメント