サンプルイメージ画像

実装方法

http://sourceforge.net/projects/codepress/ で CodePress 本体を貰ってきて、適当なディレクトリーで解凍をします。
時々、何かの拍子でボタンがうまく動作しないこともあります（　多分、 <head> 部分の違い？それともファイルのせい？パーミッション？）が、ここでは通常使うコードをハイライトするだけのものとして実装できた方法を書いておきます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CodePress</title>

<script type="text/javascript" src="codepress.js"></script>
<script type="text/javascript" src="includes/scripts.js"></script>
<script type="text/javascript" src="languages/html.js"></script>
<style>
   a,a:visited {color:#000;}
   select {background:#ffffe1;}
   button {margin-top:5px;}
   button.actions {width:171px;font-family:arial;}
   h2 a {text-decoration:none;font-weight:normal;font-size:22px;color:black !important;}
   h4 {font-size:18px;font-weight:normal;z-index:0;}
   code {color:#0080c0;font-size:13px;font-weight:bold;}
   ol, ul {padding:5px 0 5px 25px;margin:0;}
   ol li, ul li {margin:8px 0 8px 0;}
   .hidden-code {display:none;}
   .copycode {border:1px dotted gray;padding:10px;background:white;font-family:monospace;color:gray}
</style>

</head>
</html>

上記のように <head> と </head> の間に codepress.js と includes/scripts.js の指定をします。
ファイルの場所は適確、自分の環境に合わせてなおしてください。

※ <style> ～ </style>の部分が抜けていましたので追記修正しました。２００８年３月５日

実際の body 部分への表示については、ここで取り上げた例では、以下のようになっています。

<textarea id="codepress" class="codepress html linenumbers-on" style="width:700px;height:280px;" wrap="off">

ここへソース

</textarea>

「 style="width:700px;height:280px;" 」については、これは自分のサイトに合わせての変更をどうぞ。

スタイルの変更については、「 class="codepress javascript" 」となっているところを「 class="codepress php" 」、「 class="codepress html" 」などのように変更すればよいと思います。また「 linenumbers- 」については、行番号の事であり、「 on 」、「 off 」のスイッチとなっています。

フォームボタンの表示

上の サンプルイメージ画像 のところに表示されているようなボタンを表示させたいときには、以下のようにします。

<p>
<button class="actions" onClick="alert(codepress2.getCode())">get code from editor</button>
<button class="actions" onClick="codepress2.toggleEditor()">turn on/off CodePress</button>
<button class="actions" onClick="codepress2.toggleLineNumbers()">show/hide line numbers</button>
<button class="actions" onClick="codepress2.toggleAutoComplete()">turn on/off auto-complete</button>
<button class="actions" onClick="codepress2.toggleReadOnly()">turn on/off read only</button>
</p>

ここでの注意事項は、例えば、同じページ内で何回も codepress を使用するときのことです。
何回も同ページ内で使用するときには <textarea id="codepress9> などのように番号をふります。
そうしましたら、当然上の例では <onClick="codepress2> となっているところは同じ番号になおします。
つまり、 <textarea id="codepress9> なら <onClick="codepress9> と。番号をあわせる事によって指定をしますので、もしも番号が違うとつけた番号と同じところにあるものが動作することになってしまいます。

通常のコードや特殊文字などはそのまま入力できるようですが、こと自分の設定のコードになると受け付けてくれるどころか沈黙を守る・・・状態になってしまうようです。

上へ戻る | HOMEへもどる