はてなブログでphpのソースをSyntaxHighlighter
phpってハイライトされる？
print = $name;
**されてないよね？
htmlとかjs(javascript)はハイライトされるけど、 phpはされない！
ちょっと調べたけどどこにもそんな記事も全くない。
さてと、どうするかね？
JSとSyntaxHighlighterでハイライトするか？
読み込みはこんな感じ。
<link rel="stylesheet" type="text/css" href="http://alexgorbatchev.com/pub/sh/3.0.83/styles/shCore.css" /> <link rel="stylesheet" type="text/css" href="http://alexgorbatchev.com/pub/sh/3.0.83/styles/shThemeDefault.css" /> <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/3.0.83/scripts/shCore.js"></script> <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/3.0.83/scripts/shBrushJScript.js"> </script> <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/3.0.83/scripts/shBrushXml.js"></script> <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/3.0.83/scripts/shBrushCss.js"></script> <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/3.0.83/scripts/shBrushPhp.js"></script>
前にtumblrで使ったJSを修正してつかうか。
//これはtumblr用 <script type="text/javascript"> // SyntaxHighlighterの実装 $(function(){ /** * 引数1の中の引数2を全て引数3に変換 */ function replaceAll(expression, org, dest){ return expression.split(org).join(dest); } $(".post-content pre").each(function(){ sorce_code = $("code",this).text(); code_type = sorce_code.match(/\/#\*.*/); if (code_type == null) { code_type = "php" } else { code_type = code_type.toString().slice(3); } sorce_code = sorce_code.replace(/\/#\*.*\s/, ""); //<と>を変える。 sorce_code = replaceAll(sorce_code,'<','<'); sorce_code = replaceAll(sorce_code,'>','>'); $(this).html(sorce_code); $(this).addClass('brush: ' + code_type); }); $(".post-content pre").addClass('brush: php'); SyntaxHighlighter.all(); }); </script>
結果！
できねぇ～！！
tumblrか？
MDwikiか？
jQuery スライドショープラグインを作った。
sSlider
クライアントからの要望でスライダーをいろいろ見たんだけど、 いいのが無い。
- UL>LIの中に画像を入れたら勝手にスライダーになってくれるけど、 ボタンは自由に配置しずらい
- 移動が終わったあとにCollBack関数を実行できない。
「いや！できるし！」
っていわれそうなんですが、つくりました！ つくりましたから！
今後の為に備忘録として。
DLは以下からどうぞ
| var | ログ | |
|---|---|---|
| var0.5 | 新規作成 | DL |
基本的な使い方
とりあえず基本的な使いたかを。
<html> <head> <title>スライダー</title> <script type="text/javascript" src="js/jquery.js"></script> </head> <script type="text/javascript" src="js/sSlider.js"></script> <body> <script type="text/javascript"> (function($) { $(window).load(function() { $('#slider').sSlider(); }); })(jQuery); </script> <h1>スライダー</h1> <ul id="slider"> <li><a class="aaa" id="a1" href="#"><img src="img/img1.jpg" alt="" /></a></li> <li><a class="aaa" id="a2"href="#"><img src="img/img2.jpg" alt="" /></a></li> <li><a class="aaa" id="a3"href="#"><img src="img/img3.jpg" alt="" /></a></li> <li><a class="aaa" id="a4"href="#"><img src="img/img4.jpg" alt="" /></a></li> </ul> <button class="sSliderBt_1">ボタン1</button> <button class="sSliderBt_2">ボタン2</button> <button class="sSliderBt_3">ボタン3</button> <button class="sSliderBt_4">ボタン4</button> </body> </html>
で動きます。 スライダーを指定するボタンは自分でコーディングしなければなりません。
オプション
| 名前 | デフォルト | 説明 |
|---|---|---|
| wrapDiv.class | sSliderWrapDiv | 一番外側のDIVのclass名 |
| wrapDiv.css | {}(無し) | 一番外側のDIVにつけるCSS |
| winDiv.class | sSliderWinDiv | スライドウィンドになるDIVのClass名 |
| winDiv.css | { overflow: 'hidden', 'position': 'absolute', 'z-index': 100 } |
スライドウィンドになるDIVのCss |
| li.css | { 'position': 'absolute', 'z-index': 50 } |
スライどliのCss |
| btslg | sSliderBt_ | スライダー指定ボタンのクラス名の共通部分 |
| btOnClass | sSliderOn | カレントのスライダー指定ボタンにつけるクラス |
| sleepTime | 3000 | 移動終了から次に移動開始するまでの時間 |
| moveTime | 1000 | 移動開始から終了までの時間 |
| endMove | function() {} | 移動が終了した時に実行する関数 |
| endInt | function(){} | 画面の読み込みが終了して準備が出来た時に実行する関数 |
オプションの設定の仕方
var option = { wrapDiv:{ class:'sSliderWinDiv', css:{ overflow: 'hidden', position: 'absolute', z-index: 100 } } } $('#slider').sSlider(option);
その他の使い方
移動開始前になんか関数を走らせる。
var option = { endInt:function(){ alert('end'); } } $('#slider').sSlider(option);
移動の準備が整った時点でアラートを表示する。
移動終了後になんか関数を走らせる。
var option = { endMove:function(){ alert('end'); } } $('#slider').sSlider(option);
スライドが完了した後にアワートを表示する。
今後考えている事
- オプションで縦スクロールでも対応できる。
- オプションで画面いっぱいのスクロールを実装できる。
以上、使えたらいいな～
MDwikiのリンクリスト作成プログラムを作ってみよう
初めに
何でこんなこと考えたのか？
このごろブログを短期間にとっかえひっかえしてるんだけど
その理由は
- markdownで記事を書きたい。
- コードの事もエフェクタの事も書きたい
- トップページからリンク記事リストを見たい
っていう要件がある。
んでtumblrを使ったんだけどカテゴリが使いにくい
そもそもtumblrにはカテゴリって概念はないもんね。
とりあえず、wikiはどうだ！
って思ってpikiWikiを入れたんだけど
これはこれで便利なんだけど、
markDownで記事をアップできない。
んでMDwikiってのにたどり着いて
けっこういいじゃん！
ってなったんだ。
でも問題があって
作ったページのリンクリストをつくったらなアカン！
なので考えたわけだ！
じゃぁ つくってやろぅって！
phpでやる
- トップページの「リンク更新」ボタンをクリックしたらupdataLink.phpへ移動する
- updataLink.phpは自分のパス以下のDir・mdファイルをなめて配列にする。
- 配列にしたmdファイルリストをindex.mdにリンクとしてリスト形式にして入れる
JSでやる
でいいよね。
jsで作ったら重いかな？
phpってめんどいかな？
どっちがいいかな？
的な？
