JustBlog(TypePad)でsyntaxhighlighterを使う

syntaxhighlighterとは、プログラムをwebに載せる時に見やすくしてくれる
Syntaxhighlighter_2
これです。

syntaxhighlighter – Google Code
http://code.google.com/p/syntaxhighlighter/

JustBlogだけでなくTypePad純正やココログ等のTypePad利用ブログでも同じやり方で使えると思います。

使い方は、downloadsからアーカイブをダウンロードして、wiki -> usageに書いてある通りに設定するだけです。

  1. 必要なファイルをアップロードして
  2. CSSを記述
  3. JavaScriptを記述
  4. preかtextareaの中にコードを書く

この4ステップです。

以下JustBlogの場合の設定です。適宜読み替えてください。

必要なファイルをアップロード

ホーム ->  コントロールパネル -> ファイル・マネージャー
からファイルをアップロードします。好きな場所にアップロードすればいいですが
/css/SyntaxHighlighter.css
/flash/clipboard.swf
/js/shBrushCSharp.js, /js/shBrushCpp.js, /js/shBrushCss.js, /js/shBrushDelphi.js, /js/shBrushJScript.js, /js/shBrushJava.js, /js/shBrushPhp.js, /js/shBrushPython.js, /js/shBrushRuby.js, /js/shBrushSql.js, /js/shBrushVb.js, /js/shBrushXml.js, /js/shCore.js, /js/ shCore.uncompressed.js
としておけばあとでわかりやすいです。

CSSを記述

ホーム -> ブログ -> デザイン -> カスタムCSSを編集

@import url(/css/SyntaxHighlighter.css);
自分の置いたcssの位置を記入して保存します。他にもカスタムCSS使ってる場合は@importが先に来るように注意します。

JavaScriptを記述

ホーム -> タイプリスト
から新しいタイプリストを作ります。リストの種類はリンクかメモがいいです。作ったら、中にJavaScriptを書き込みます。もちろん既存のタイプリストに付け加えてもOKです。

<script type="text/javascript" src="/js/shCore.js"></script>
<script type="text/javascript" src="/js/shBrushXml.js"></script>
<script type="text/javascript" src="/js/shBrushPhp.js"></script>
<script type="text/javascript" src="/js/shBrushJScript.js"></script>
<script type="text/javascript" src="/js/shBrushSql.js"></script>
<script type="text/javascript" src="/js/shBrushCss.js"></script>
<script type="text/javascript">
dp.SyntaxHighlighter.ClipboardSwf = '/flash/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>

shCore.jsが必須であとは必要なものを読み込ませます。

preかtextareaの中にコードを書く

preとtextareaの使い分けはwiki->usageを読んでください。<>&"に気をつけておいてpre使ったほうがjavascript動かない環境でもきれいに見えます。<pre name="code" class="hoge"></pre>でコードを囲えば出来上がりです。

JUSTBLOGでモブログするとタグがそのまま表示される

<>&"もモブログからは無条件で受け入れてるのかな。これってちょっと危険じゃない?どう危険なのかはよくわからないけど。

かといってがんがん無条件でエスケープされるのもなんなんだよね。むしろその方が気持ち悪い。つまりじゃあどうしてほしい、というのはないんです。

WISWIGエディタの不具合?仕様?私のミス?

前エントリ JUSTBLOGエントリ編集bookmarklet で bookmarklet を作って JUSTBROG に貼り付けました。一度投稿したところではうまくいったものの、そのページを編集しようとすると WISWIG エディタが勝手に解釈して書き換えてしまいます。

具体的にいうと HTML の
<a href="javascript:(function(){var%20id=document.getElementsByName(‘entry_id’).item(0).value;location.href=’https://app.justblog.jp/t/app/weblog/post?__mode=edit_entry&id=’+id+’&blog_id=BlogID&#8217;})();">

<a href="javascript:(function(){var%20id=document.getElementsByName(‘entry_id’).item(0).value;location.href=’post?__mode=edit_entry&amp;id=’+id+’&amp;blog_id=BlogID’})();">
に編集画面を開くたびに書き換えられてしまい、そのまま保存するとリンク先が変わってしまいます。

不具合なのか仕様なのか私の書き方が悪いのかはわかりません。ただ、トラックバックやコメント管理のために編集画面を開くときには注意が必要です。保存したままの状態で開くことが出来ません。

仕様だとするならば HTML の編集画面で" WISWIG さん触らないで"って JUSTBLOG 独自のマークアップが出来れば解決なんだけれど、それは独自過ぎるかな。

JUSTBLOGエントリ編集bookmarklet

自分のJUSTBLOGの個別ページを開いている状態から当該エントリの編集画面に一発ジャンプするbookmarkletを書いてみました。ただし、コメントフォームからentry-idを拾っているので、コメントをオープンにしていないエントリでは使えません。(また、改行してありますが実際は一行です。)

javascript:(function(){var%20id=document.getElementsByName(‘entry_id’).item(0).value;
location.href=’https://app.justblog.jp/t/app/weblog/post?__mode=edit_entry&id=’+id+’&blog_id=BlogID‘})();

JUSTBLOGエントリ編集

これをお気に入りに入れたあとBlogIDを自分のBlogIDの数字に書き換えてください。BlogIDはエントリのソースをblog_id=で検索してもいいですし、ログイン後の管理画面のURLからもわかります。

このbookmarkletが出来るまでの経緯は以下
クイック編集bookmarklet欲しい, クイック編集bookmarklet欲しい(2), クイック編集bookmarklet欲しい(3), クイック編集bookmarklet欲しい(4)

クイック編集bookmarklet欲しい(4)

クイック編集bookmarklet欲しい
クイック編集bookmarklet欲しい(2)
クイック編集bookmarklet欲しい(3)の続き。

コメント欄がoffでも動くものを作ろうとgetElementsByClassName()やgetElementsByClass()を使うことにする。

やること。

class="entry" のdivのidを取得。複数あったら一個目。そのidを-で分割して二個目の配列を取得。それをURLに代入。

と思ったけれどclassをゲットする関数から組み込まなきゃいけないので、これ文字数制限越えちゃうんじゃないか?と思って中断。自分IEなもんで。

javascript:(function(){var%20eid=document.getElementsByName(‘entry_id’).item(0).value;location.href=’https://app.justblog.jp/t/app/weblog/post?__mode=edit_entry&id=’+eid+’&blog_id=36374&#8242;})();

コメントフォームからentryid拾って出来たー

クイック編集bookmarklet欲しい(3)

クイック編集bookmarklet欲しい
クイック編集bookmarklet欲しい(2)の続き。

javascript:(function(){var%20id=location.href.split(‘id="entry-‘)[1].split(‘"’)[0];location.href=’https://app.justblog.jp/t/app/weblog/post?__mode=edit_entry&id=’+id+’&blog_id=36374&#8242;})();

なんとなく継ぎ接ぎしてみたけど動かない。

またあとで

(追記 2007.03.22)
ねぼけてました。URLから取得じゃなくてページ内からDOMで取得しないといけないのに。何やってんだか。

クイック編集bookmarklet欲しい(2)

クイック編集bookmarklet欲しい の続き。

無駄な汎用性は要らないかな。blogidなんてそうそう変わるものじゃないし。複数ブログ持ちとか乗換えとかそういう人はそのつど自分で書き換えればいい。

うちのblogidは36374なのでソースの
<div class="entry" id="entry-7301745">
から数字拾って
https://app.justblog.jp/t/app/weblog/post?__mode=edit_entry&id=%5B0000000%5D&blog_id=36374
この[]にその数字を入れるjavascriptを書けばいい

ソースの中から拾い上げるとすると変なところで実行したり誤認識したりなんなりの時の対策が必要そうな気が。まあいっか。

ひとまずここまで。

FeedFlareをfeedとブログに導入

JUSTBROG は feedburner の FeedFlare に対応しているので「del.icio.usに追加、はてなブックマークに追加、livedoorクリップへ追加」をくっつけてみました。

実際使う人はそういうのクリックしないし、こういうのはユーザーのブラウザ側・RSSリーダ側でやればいい。自分仕様にしないと結局帯びに短し〜になりがち。といいつつ以下 feedburner と JUSTBLOG の設定。

feedburner にログインして最適化のタブからフィード・フレアを選択してオフィシャル・フィードフレアの「del.icio.us/はてなブックマークに追加」をフィード/ブログともに選択。ついでにパーソナル・フィードフレアに、「livedoorクリップへ追加」も。

suVeneのあれ: FeedBurnerのフィードフレアに、「livedoorクリップへ追加」を表示しようか

これを参考にそのまま設定。問題なく登録完了。feedburner側の設定はこれでおしまい。

JUSTBROG は TypePad なのでそれにあわせてテンプレートの変更が必要。でもここはテンプレートがいじれない、と思ったら ブログ→デザイン→表示項目を選択→エントリー表示欄→フィード・フレアー のチェックを入れると機能がonに出来た。というか因果関係から言ったら、ここの設定見てからフィードフレア探し始めた。でもって feedburner側の設定したあと迷子に。なんでこんな深い上にわかりにくいところに設定があるんだ。 これでブログ側の設定も完了。

どこまで再構築すればいいのかわからないのでひとまず全部を再構築してみた。 無事feedflareが出現。