CodingFirst

C言語、Perl、JavaScript、最近はPythonも。出来上がったものより、プログラムを書くことが好き。あと、スイーツ。

スポンサーサイト

  • このエントリーをはてなブックマークに追加
  • web拍手 by FC2
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

FC2ブログにソースコードを貼り付ける

  • このエントリーをはてなブックマークに追加
  • web拍手 by FC2

FC2ブログにコードを貼り付けるのは、preタグを使ってるんだけど、
はてなダイヤリーのスーパーPRE記法みたいの無いんだっけ?
<とかをサニタイズ...実体参照に変えないと正しく表示されないようなので
変換用のツールというかHTML書いた。

<html>
<style type='text/css'>
* { font-size:small; margin:0; padding:0; }
body { margin: 5px; }
h1{ margin: 5px 0; }
pre { border: 1px solid black; padding: 5px; }
</style>
<body>
<h1>escapeHTML</h1>

<!-- original -->
<h3>original <input type='button' value='update' onclick='run();'</input></h3>
<form><textarea id='org' rows='10' cols='60'>
#include <stdio.h>
int main(int argc,char** argv){
  printf("hello\n");
  return 0;
}
</textarea></form>

<!-- escapeHTML -->
<h3>escapeHTML</h3>
<form><textarea id='esc' rows='10' cols='60'>
</textarea></form>

<!-- pre -->
<h3>pre</h3>
<pre id='pre'>
</pre>

<script>
function escape_html(str) {
  return str.replace(/[&"<>]/g, function(c) {
    return {
      "&": "&amp;", '"': "&quot;",
      "<": "&lt;",  ">": "&gt;"
    }[c];
  });
}
var org = document.getElementById('org');
var esc = document.getElementById('esc');
var pre = document.getElementById('pre');
function run(){
  pre.innerHTML = esc.value = escape_html(org.value);
}
run();
</script>
</body>
</html>

ローカルPCに esc.html とかいう名前で記録して、
開けば下のような画面になる。

escapeHTML.png

まぁ...
gistに貼ればいいんだけど、
それほどでも無いときに。



JavaScript本を検討中。いろいろ良さそうな本があるけど、定番はこれかな..?


JavaScript 第5版JavaScript 第5版
(2007/08/14)
David Flanagan

商品詳細を見る
スポンサーサイト

FC2ブログで自作タグクラウドを作る

  • このエントリーをはてなブックマークに追加
  • web拍手 by FC2

FC2ブログに自作でタグクラウドを作ってみる。
タグ表示自体は標準プラグインを使うんだけど、 その出力をJavaScriptでプチ改造する。

まず、ユーザータグを導入する。
ブログの管理画面に入って「プラグインの設定」画面に行く。
「公式プラグイン」から「ユーザータグ」を追加する。

プラグインの設定画面のユーザータグのところの「詳細」を押す。
そしたら、ユーザタグの設定を「カスタマイズ(HTMLを編集する場合はこれを選択してください)」を
セレクトしておく。

ここからがポイント。プラグインの改造の青い「【HTMLの編集】」をクリックして、
HTMLを編集するテキストボックスを表示させる。そしたら、元々書いてある記述を消して、
以下のテキストをコピペ

<div class="plugin-tag" id='plugin-tag' &align>
<!--ctag-->
<a href="<%ctag_url>" style='margin-right:5px;'><%ctag_name></a>
<!--/ctag-->
</div>
<script><!--
(function(){
var e=document.getElementById('plugin-tag');
var a=e.getElementsByTagName('a');
for(i=0;i<a.length;i++){
  a[i].style.fontSize=
    (i<a.length/32)?'x-large':
    (i<a.length/16)?'large':
    (i<a.length/8)?'medium':
    (i<a.length/4)?'small':
    (i<a.length/2)?'x-small':'xx-small';
}
for(i=e.firstChild;i.nextSibling!=null;){
  if(i.innerHTML>i.nextSibling.innerHTML){
    e.insertBefore(e.removeChild(i.nextSibling),i);
    i=e.firstChild;
  }else{
    i=i.nextSibling;
  }
}
})();
//-->
</script>

補足)

  • 最初の<divから</div>までは1行で書いた方がいい。

ひさびさ書いたらいろいろ忘れちゃってるな。。
復習がてら手元用に1冊、買っとこうかなぁ。


初めてのJavaScript 第2版初めてのJavaScript 第2版
(2009/11/30)
Shelley Powers

商品詳細を見る

FC2の月別アーカイブを階層化する

  • このエントリーをはてなブックマークに追加
  • web拍手 by FC2

FC2の公式プラグインの月別アーカイブの表示を1段階層化してすっきりさせる。

まず、テンプレ部分。

ポイントは、

  • 改行・空白を取り除く
  • ulにidタグを付ける
  • liにnameタグを付ける("/"をセパレータに階層化のルールを書く)

その直後で javascriptで ulのリストをカテゴリ分けに振り直す。


liのリストを取得して、順にliを自身のnameに書かれた階層化へ移動する。 階層が無い時は追加する...という感じ。めんどくさいので再帰はなし。

年を複数かかなくなった分だけ見栄えがよくなったが、 行数が増えたのがちょっとやだな。

#monthly ul li {
 display : inline;
 list-style-type : none;
}

と悪あがき。でも、あまり見栄えがよくならない。css追加はなしで、pluginをちょっと書き換えて調整。

(function (id){
var ul=document.getElementById(id);
for (var li=ul.firstChild;li;){
 var name=li.attributes["name"].value;
 var cat=name.split("/",1)[0]; 
 var cname=name.slice(cat.length+1);
 var cid=id+cat;
 var cli=document.getElementById(cid);
 if(!cli){
  cli=document.createElement("li");
  cli.innerHTML=cat + "年
"; cli.setAttribute("id",cid); ul.insertBefore(cli,li); } cli.innerHTML += " " + li.innerHTML; var n=li.nextSibling; ul.removeChild(li); li=n; }})("monthly");

innerHTMLとか使うあたり、ゴリ押し感があるけど、一応、満足。


google-code-prettify - ソースコードのハイライト表示

  • このエントリーをはてなブックマークに追加
  • web拍手 by FC2

ソースコードのハイライト表示を google-code-prettify を使って行う。

FC2に移行しようと決めて、まず困ったのスーパーPREがないこと。。。ないよね? で、ハイライト表示しようと検索して、google-code-pretify を使う事にした。

とりあえず、こうなる

/* print hello
 * c language test program.
 */
#include <stdio.h>
int main(int c, char*v[] ) {
  printf( "hello\n" );
}

導入の手順をメモる。

google-code-prettify - Google Code から、最新版をダウンロードしてくる。今回は、prettify-small-8-Jan-2009.zip だった。

FC2のファイルアップロードで下記ファイルをアップロード

  • prettify.css
  • prettify.js

テンプレのcssに下記のコードを追加。

@import url(http://my.blog.fc2.com/path/to/prettify.css);

テンプレのhtmlに下記のコードを追加(</body>タグ直前くらいでいいでしょう)。

<script type="text/javascript" src="http://my.blog.fc2.com/path/to/google/prettify.js"></script>
<script>prettyPrint();</script>

上の my.blog の部分と、path/to の部分は環境に応じて適宜書き換える必要あり

あとは、記事中の preタグのclassに prettyprint を指定すればいい。

<pre class='prettyprint'>~ソースコード~</pre>

(おまけ) prettyprint がめんどーなので、自動付け足しにする

var o = document.getElementsByTagName( 'pre' );
for ( var i = 0 ; i < o.length; i++ )
 if ( o[i].className == '' ) o[i].className = 'prettyprint';
}

(おまけ2) あと、IE6と相性が悪いようなので回避しておいた方がいいみたい

参照記事:


 | HOME | 

Search

Recent Entries

Foot Print



Categories

Monthly

Recent Comments

Recent Trackbacks

Profile

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。