Transforming Plain Text to HTML

2008-08-23 Ruby勉強会@札幌-9

日本Rubyの会Ruby札幌

しまだ こうじSHIMADA Koji

シンプルに書いてリッチに見せる

Problem

✓ HTMLドキュメントを作りたいけど、素のHTMLはいじりたくない

✓ CMSのようなシステムで、コンテンツをリッチにしたい

Solution

✓ 入力にはHTMLよりも優しいマークアップ言語・記法を採用

✓ 採用した記法で書かれたテキストをHTMLに変換

✓ すました顔でHTMLとして扱う

✓ Hiki記法✓ Textile✓ Markdown✓ はてな記法

Simple Markup

Hiki記法

Hikidoc

$sudo gem install hikidoc

インストール

require ‘hikidoc’

使い方

Hikidoc.to_xhtml(text)

使い方

!見出し""ここは引用です* ここは箇条書きレベル1です** ここは箇条書きレベル2ですここは本文になります

Hiki記法で書かれたテキスト

<h1>見出し</h1><blockquote><p>ここは引用です</p></blockquote><ul><li>ここは箇条書きレベル1です<ul><li>ここは箇条書きレベル2です</li></ul></li></ul><p>ここは本文になります</p>

変換されたHTML

Textile

RedCloth

$sudo gem install RedCloth

インストール

require ‘RedCloth’

使い方

RedCloth.new(text).to_html

使い方

h1. Textile記法のサンプルここは本文になります。h2. リスト# 箇条書きレベル1## 箇条書きレベル2h2. 引用bq. ここは引用になります。 h2. リンク# "Ruby札幌":http://ruby-sapporo.org# "日本Rubyの会":http://jp.rubyist.net

Textile記法で書かれたテキスト

<h1>Textile記法のサンプル</h1><p>ここは本文になります。</p><h2>リスト</h2><ol> <li>箇条書きレベル1 <ol> <li>箇条書きレベル2</li> </ol></li></ol><h2>引用</h2><blockquote><p>ここは引用になります。</p></blockquote><h2>リンク</h2><ol> <li><a href="http://ruby-sapporo.org">Ruby札幌</a></li> <li><a href="http://jp.rubyist.net">日本Rubyの会</a></li></ol>

変換されたHTML

Markdown

BlueCloth

$sudo gem install BlueCloth

インストール

require ‘BlueCloth’

使い方

BlueCloth.new(text).to_html

使い方

# Markdown記法のサンプルここは本文になります。## リスト- 箇条書きレベル1 - 箇条書きレベル2## 引用> ここは引用になります。## リンク- [Ruby札幌](http://ruby-sapporo.org)- [日本Rubyの会](http://jp.rubyist.net)

Markdown記法で書かれたテキスト

<h1>Markdown記法のサンプル</h1><p>ここは本文になります。</p><h2>リスト</h2><ul><li>箇条書きレベル1<ul><li>箇条書きレベル2</li></ul></li></ul><h2>引用</h2><blockquote> <p>ここは引用になります。</p></blockquote><h2>リンク</h2><ul><li><a href="http://ruby-sapporo.org">Ruby札幌</a></li><li><a href="http://jp.rubyist.net">日本Rubyの会</a></li></ul>

変換されたHTML

はてな記法

hparser

$sudo gem install hparser

インストール

require ‘hparser’

使い方

p = HParser::Parser.newp.parse(text).map { |e|e.to_html }.join(“¥n”)

使い方

*[misc]はてな記法のサンプル**リストここは本文になります。-箇条書きレベル1--箇条書きレベル2-箇条書き（その2）**表組み|りんご|バナナ|みかん||1個|2個|3個|

はてな記法で書かれたテキスト

<h1>[misc]はてな記法のサンプル</h1><h2>リスト</h2><p>ここは本文になります。</p><ul><li>箇条書きレベル1</li><ul><li>箇条書きレベル2</li></ul><li>箇条書き（その2）</li></ul><h2>表組み</h2><table><tr><td>りんご</td><td>バナナ</td><td>みかん</td></tr><tr><td>1個</td><td>2個</td><td>3個</td></tr></table>

変換されたHTML

Transforming Plain Text to HTML

2008-08-23 Ruby勉強会@札幌-9

日本Rubyの会Ruby札幌

しまだ こうじSHIMADA Koji

シンプルに書いてリッチに見せる