Programma-blog: Textile(Redmine Wiki) on Blogger

h3. 序ブログツールやCMSを利用し始めて、気になったことがある。 WordPress、Blogger、MODxを利用したことがあるが、WYSIWYGっぽいエディタで生成するHTMLが気持ち悪いのだ。 * 出来ればレイアウトのことは気にしたくない。 * HTMLの構成がどうなっているのかは気になる。 * でも、HTMLタグを細々打ちたくない。これでブログの更新も億劫になる。おそらく毎日ソースコードばかり眺めているからなので、一般的な感覚ではないとは思うが、どうにかならないかな、と考えていて、ふと思いついた。「RedmineのチケットやWikiは毎日書いてるけど苦じゃないな」というわけで、今回はRedmineのWikiに利用される、Textile記法をBloggerで扱う方法を模索した。 h3. JavaScriptでTextileを解析するライブラリJQtextileをBloggerに埋め込む検索すると、おあつらえ向きなjQueryプラグインが公開されていた。 "「JQtextile A textile interpreter for jQuery.」":http://notreadbyhumans.github.com/JQtextile/index.html これを使わせていただくことにする。ファイルをWebに配置できる場合は、別に配置してソースを参照するようにした方がブラウザにキャッシュされるので通信上のパフォーマンスもよいが、今回はBloggerのテンプレートにそのまま埋め込んだ。当ブログのテンプレートは「シンプル」を利用しているため、他のテンプレートと構成が異なるかもしれないのでご注意を。 ※"JQtextileの公式":http://notreadbyhumans.github.com/JQtextile/index.html のCopyright and licenseを必ず確認の上、自己責任で利用すること。 [ テンプレート ]-[ HTMLの編集 ]-[ 続行 ]でテンプレートを開き、以下のように編集する。

<head>

...省略...

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type="text/javascript"> jQueryを利用
<script type='text/javascript'>
//<![CDATA[
/*! JQtextile http://notreadbyhumans.github.com/JQtextile/ See [Copyright and license] */
ここに直接、"JQtextileのコード":https://raw.github.com/notreadbyhumans/JQtextile/gh-pages/JQtextile.min.js を貼り付ける。

$(document).ready(function(){

  $('.entry-content .textile').each(function(){
    $(this).JQtextile('textile', $(this).html());
  });

});
//]]>
</script>
</head>　この直上に挿入する。

...省略...

h3. Textile記法の範囲指定全範囲をTextileとすると、画像のアップロードなどで困るので、 *'textile'* をclass名に指定した何らかのタグ内でTextile記法が利用できるようにした。投稿画面でHTMLを選択し、以下のように記述すると、

<span class="textile">
h1. ほげほげ
* 1段目
** 2段目
*** 3段目
**** 4段目

h2. はげはげ(bloggerはh2が小さくないとちょっとかっこ悪い)
# 1段目-1
# 1段目-2
# 1段目-3
## 2段目
### 3段目
#### 4段目

h3. これできまりだ
|_. a|_. b|_. c|
|1|2|3|
</span>

このように変換される。 -- h1. ほげほげ * 1段目 ** 2段目 *** 3段目 **** 4段目 h2. はげはげ(bloggerはh2が小さくないとちょっとかっこ悪い) # 1段目-1 # 1段目-2 # 1段目-3 ## 2段目 ### 3段目 #### 4段目 h3. これできまりだ |_. a|_. b|_. c| |1|2|3| -- h3. 〆利用可能なTextile記法は、"JQtextileの公式":http://notreadbyhumans.github.com/JQtextile/index.html を参照のこと。この記事はTextileで生成した。今後、これを利用して記事を書いていこう。 h3. 2012/03/26 追記その後、Google SitesのAttachmentsにファイルを配置して、それを参照することにした。

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type="text/javascript"> jQueryを利用
<script src='http://sites.google.com/site/[Google Sitesに設定したSite location]/JQtextile.min.js' type='text/javascript' />
<script type='text/javascript'>
//<![CDATA[ 
$(document).ready(function(){
  $('.entry-content .textile').each(function(){
    $(this).JQtextile('textile', $(this).html());
  });
});
//]]>
</script>

ラベル

Textile(Redmine Wiki) on Blogger

1 件のコメント: