nora_mark 0.2beta7 → 0.2beta8

data/example/koujin.nora

@@ -0,0 +1,13 @@
+---
+lang: ja
+stylesheets: [nora-simple.css, nora-simple-ja.css]
+title: 行人
+---
+
+# 行人
+
+section {
+　[ruby(うめだ){梅田}]の[ruby(ステーション){停車場}]を下おりるや否いなや自分は母からいいつけられた通り、すぐ[ruby(くるま){俥}]を[ruby(やと){雇}]って[ruby(おかだ){岡田}]の家に[ruby(か){馳}]けさせた。岡田は母方の遠縁に当る男であった。自分は彼がはたして母の何に当るかを知らずにただ[ruby(うと){疎}]い親類とばかり覚えていた。
+
+大阪へ下りるとすぐ彼を[ruby(と){訪}]うたのには理由があった。自分はここへ来る一週間前ある友達と約束をして、今から十日以内に[ruby(はんち){阪地}]で落ち合おう、そうしていっしょに[ruby(こうや){高野}]登りをやろう、もし[ruby(じじつ){時日}]が許すなら、伊勢から名古屋へ[ruby(まわ){廻}]ろう、と取りきめた時、どっちも指定すべき場所をもたないので、自分はつい岡田の氏名と住所を自分の友達に告げたのである。
+}

data/example/nora-simple.css

@@ -26,10 +26,35 @@ pre {
     border-radius: 0.5em;
 }
 
-pre.code-html {
-    background: #efefef;
+code {
+    background: #dddddd;
+    margin: 0.4em;
+    border-radius: 0.1em;
+    border: 1px solid #aaaaaa;
+}
+
+pre code {
+    margin: 0;
+    border: 0;
+}
+
+.pre {
+    margin: 1em auto;
+}
+
+.pre .caption {
+   color: #220000;
+   padding-left: 0.5em;
+   margin: 0 auto;
+   font-size: 0.9em;
+   
 }
 
+.pre pre {
+    margin: 0 auto;
+}
+
+
 h1 {
     border-bottom: 1px solid #444444;
 }

data/example/noramark-reference-ja.nora

@@ -4,25 +4,25 @@ stylesheets: [nora-simple.css, nora-simple-ja.css]
 title: NoraMark Manual
 ---
 
-=: NoraMark Manual
+# NoraMark Manual
 
 [strong{(作成中・記述は未完成です。)}]
 
 NoraMarkは、EPUBで利用するXHTMLを生成するためのマークアップとしてデザインされました。次のような特徴があります。
 
-*: プレーンテキストの原稿を邪魔しない最小限の記述
-*: しかしマークアップ部分は、通常のテキストと「違って」見える。
-*: ブロック・ライン・インラインごとの基本記法を原則として固定。憶える記法は少なくてすむはず。
-*: 生のHTML記法なしで、多くのタグを記述できる
-*: マークアップに独自コマンドの追加ができる
-*: 文書構造に対する処理を追加できる
-*: パース結果をXMLとして取得できる
+* Markdownと同じように、プレーンテキストの原稿に近い最小限の記法です。
+* Markdownと異なり、マークアップ部分は通常のテキストと「違って」見えるようにデザインしています。これは、意識せずにマークアップを壊してしまうことを避けるためです。
+* マークアップに独自コマンドの追加ができる柔軟なカスタマイズ機能を用意しています。
+* 生のHTML記法なしで、多くのタグを記述できます。
+* パース結果をXMLとして取得できます。
 
-==: 必要なもの
+## 必要なもの
 
-*: ruby 2.0以上
+* ruby 2.0以上
 
-==: インストール方法
+## インストール方法
+
+### Gemfile
 
 Gemfileに次のように書きます
 
@@ -35,15 +35,15 @@ code {
 $ bundle
 }
 
-または
+### 直接インストール
 
 code {
 gem install nora_mark
 }
 
-==: 使い方
+## 使い方
 
-===: コマンドラインから
+### コマンドラインから
 
 code {
 $ nora2html < source.nora > output.xhtml
@@ -55,8 +55,9 @@ code {
 $ nora2html --kconv < source.nora > output.xhtml
 }
 
-[s.strong{nora2htmlは、newpageコマンドを<hr />タグに置き換え、すべてのページをひとつのxhtmlとして出力します}]
-===: コードから
+[strong{nora2htmlは、newpageコマンドを`<hr />`タグに置き換え、すべてのページをひとつのxhtmlとして出力します}]
+
+### コードから
 code {//ruby
 require 'nora_mark'
 
@@ -64,20 +65,33 @@ document = NoraMark::Document.parse(string_or_io, lang: 'ja')
 document.html.write_as_files
 //}
 
-==: マークアップ
+### Emacs Lisp noramark-mode
+
+Emacs用のメジャーモードを提供するnoramark-mode.elを用意しています。現在のところ、font-lockによるsyntax highlight機能と、outline-minor-modeのサポートを提供しています。
+
+1. normark-mode.elをEmacsのload-pathが通った場所に配置してください。
+2. `~/.emacs.d/init.el`に次の記述をしてください。
+
+```emacs-lisp
+(require 'noramark-mode)
+(setq auto-mode-alist (cons '("\\.nora$" . noramark-mode) auto-mode-alist))
+(setq auto-mode-alist (cons '("-nora\\.txt$" . noramark-mode) auto-mode-alist))
+```
+
+## マークアップ
 
-===: 通常のテキスト
+### 通常のテキスト
 
 単なるテキストもHTMLに変換されます。
 
-pre(原稿) {//
+pre(原稿) {
 吾輩は猫である。名前はまだ無い。
 どこで生れたかとんと見当けんとうがつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
 ＜中略＞
 この書生の掌の裏うちでしばらくはよい心持に坐っておったが、しばらくすると非常な速力で運転し始めた。
 
 ふと気が付いて見ると書生はいない。たくさんおった兄弟が一疋ぴきも見えぬ。
-//}
+}
 
 code(変換結果) {//html
 <div class='pgroup'>
@@ -91,7 +105,8 @@ code(変換結果) {//html
 </div>
 //}
 
-改行ごとに<p>要素がつくられます。空行で区切られると、<div class='pgroup'>がつくられます。
+改行ごとに`<p>`要素がつくられます。空行で区切られると`<div class='pgroup'>`がつくられます。
+
 言語が日本語(ja)以外の場合は、次のようになります。
 
 pre(原稿) {
@@ -106,9 +121,11 @@ code(変換結果) {//html
 <p>Ut enim ad minim veniam, quis nostrud exercitation</p>
 //}
 
-===: 明示的なブロック
+後述のparagraph_styleでもこの振る舞いを切り替えることができます。
+
+### 明示的なブロック
 
-NoraMarkでは、<コマンド> { ではじまり、} のみの行で終わる範囲を明示的なブロックとみなします。
+NoraMarkでは、`<コマンド> {` ではじまり、`}` のみの行で終わる範囲を明示的なブロックとみなします。
 
 pre(原稿) {//
 d.column {
@@ -124,6 +141,25 @@ code(変換結果) {//html
 </div>
 //}
 
+このように、コマンドにはclassを指定することができます。
+同じように、idの指定も可能です。
+
+pre(原稿) {//
+d#the_column.column {
+この部分は、divで囲まれます。
+}
+//}
+
+code(変換結果) {//html
+<div id="the_column" class="column">
+<div class="pgroup">
+<p>この部分は、divで囲まれます。</p>
+</div>
+</div>
+//}
+
+クラス・IDの指定は、多くのコマンドで同じように利用できます。
+
 定義済みの明示的ブロックのコマンドは、次のものがあります。
 
 ;: d : divを生成します
@@ -150,47 +186,198 @@ code(変換結果) {//html
 </blockquote>
 //}
 
-===: インラインコマンド
+#### Preformat block
+
+整形済みブロックは、次のように指定します。
+
+code(形式1){//
+pre {
+  format 1 : 整形済みの内容
+}
+//}
+
+code(形式2) {
+pre {//
+  format 2: 整形済みの内容
+//}
+}
+
+code(変換結果) {//html
+<pre>
+format 1 : 整形済みの内容
+</pre>
+<pre>
+format 2 : 整形済みの内容
+</pre>
+//}
+
+また、次のように書くことで整形済みコードを作ることもできます。
+
+```(形式1)
+code {
+整形済みコード
+}
+```
 
-インラインコマンドは、次の形式をしています。
+```(形式2)
+code {//
+整形済みコード
+//}
+```
+
+code(形式3) {
+```
+  整形済みコード
+```
+}
+
+code(変換結果) {//html
+<pre></code>
+整形済みコード
+</code></pre>
+//}
+
+##### code languageの指定
+
+code languageの指定をすることができます。
+
+```(形式1)
+code {//ruby
+puts "Hello, World."
+//}
+```
+
+code(形式2){
+```ruby
+puts "Hello, World."
+```
+}
+
+code(変換結果) {//html
+<pre class='code-ruby' data-code-language='ruby'><code>
+puts "Hello, World."
+</code></pre>
+//}
+
+##### キャプションの指定
+
+pre(原稿) {//
+code(ソースコードはこちら) {
+puts 'Hello, World'
+}
+//}
+
+または、こんな書き方もできます。
+
+pre(原稿) {//
+```(ソースコードはこちら)
+puts 'Hello, World'
+```
+//}
+
+こんな風になります。
+code(変換結果) {//html
+<div class='pre'>
+<p class='caption'>原稿はこちら</p>
+<pre><code>
+puts 'Hello, World'
+</code></pre>
+</div>
+//}
+
+### インラインコマンド
+
+インラインコマンドは、原則として次の形式をしています。
 pre{//
 [<コマンド>{内容}]
 //}
 
 定義済みのインラインコマンドには、次のものがあります。
 
+
 ;:l {
-  リンクを定義する。
+  リンクを定義します。
   pre {//
 [l(http://github.com/skoji/noramark){NoraMarkのレポジトリ}]
   //}
+
+  code(変換結果) {//html
+<a href='http://github.com/skoji/noramark'>NoraMarkのレポジトリ</a>
+  //}
 }
-;:s {
-  spanを定義する。おもにクラスを設定するときに利用する。
+
+;:sp {
+  spanを定義します。
   pre {//
-[s.note{spanの中にはいる}]
+[sp.note{spanの中にはいる}]
+  //}
+
+  code(変換結果) {//html
+<span class='note">spanの中に入る</span>
   //}
 }
+
 ;:img {
-  画像を定義する。このコマンドにはブレースのセクションがない。
+  画像を定義します。このコマンドにはブレースのセクションがありません。
   pre {//
 [img(img/some_image.jpg,alternate text)]
   //}
+
+  code(変換結果) {//html
+<img src='img/some_image.jpg' alt='alternate text' />
+  //}
+
 }
 ;:tcy {
-  class tcyのspanを定義する。縦書きにおける縦中横のスタイルをあてることを想定している。
+  class tcyのspanを定義します。縦書きにおける縦中横のスタイルをあてることを想定しています。
   pre {//
 FM TOWNSが登場してからすでに[tcy{25}]年がたった。
   //}
+
+  code(変換結果) {//html
+<p>FM TOWNSが登場してからすでに<span class='tcy'>25</span>年がたった。</p>
+  //}
+
+
 }
+
 ;:ruby {
-  ルビをマークアップする。
+  ルビをマークアップします。
   pre {//
 [ruby(とんぼ){蜻蛉}]の[ruby(めがね){眼鏡}]はみずいろめがね
   //}
+
+  code(変換結果) {//html
+<p><ruby>蜻蛉<rp>(</rp><rt>とんぼ</rt><rp>)</rp></ruby>の<ruby>眼鏡<rp>(</rp><rt>めがね</rt><rp>)</rp></ruby>はみずいろめがね</p>
+  //}
+
 }
 
-===: 行コマンド
+;:code {
+インラインでコードをマークアップします。中はMarkupとして解釈しません。[code{`}] (バッククオート)で囲む方法と、`[code{}]`を使う方法があります。
+
+pre {//
+`puts "Hello, World."` and  [code{puts "Hello, World."}]
+//}
+
+  code(変換結果) {//html
+<p><code>puts "Hello, World.</code> and <code>puts "Hello, World.</code> </p>
+  //}
+}
+
+ただし`[code{}]`の形式ではたとえば
+
+code {
+[code{ [ruby(とんぼ){蜻蛉}] }]
+}
+
+と書くと、蜻蛉の後ろにある`}]`でcodeコマンドは終了してしまうため、次のような変換結果となります。
+
+code {//html
+<p><code>[ruby(とんぼ){蜻蛉</code>}]</p>
+//}
+
+### 行コマンド
 
 行コマンドは1行を占有し、次の形式をしています。
 pre{//
@@ -200,83 +387,278 @@ pre{//
 定義済みの行コマンドには、次のものがあります。
 
 ;: p {
- パラグラフをマークアップする。主に、クラスやIDを付加する目的で使う。
+ パラグラフをマークアップします。クラスやIDを付加する目的で使うことを想定しています。
  pre{//
 p.caution: 用量に注意してご利用ください。
  //}
-}
+
+ code(変換結果) {//html
+<p class='caution'>用量に注意してご利用ください。</p>
+ //}
 
 ;: image {
- divでラップされたimgをマークアップする。
+ figureでラップされたimgをマークアップします。
  pre{//
-image(./path-to-image/img.jpg, 代替テキスト): イメージのキャプション
+image(path-to-image/img.jpg, 代替テキスト): イメージのキャプション
  //}
+
+ code(変換結果) {//html
+<figure class='img-wrap'>
+<img src='path-to-image/img.jpg' alt='代替テキスト' />
+<figcaption>イメージのキャプション</figcaption>
+</figure>
+ //}
+
 }
 
 ;: newpage {
- 新規ページを作成する。通常は、あらたなXHTMLファイルが生成される。
+ 新規ページを作成します。この位置XHTMLファイルが区切られ、新たなXHTMLが生成されます。
  pre{//
 newpage:
  //}
 
 }
 
-===: リスト
+### リスト
 
-====: 箇条書き
+#### 箇条書き
 
 pre(原稿) {//
-*: *:ではじまる行は、箇条書きになる。  
-*: 空行があくまで、箇条書きがつづく。
+* *ではじまる行は、箇条書きになります
+* 空行があくまで、箇条書きがつづきます。
 
-*: 空行があくと、あらたな箇条書きになる。
+* 空行があくと、あらたな箇条書きになります。
+* さらに、
+** *を続けるとネストされます。
 //}
 
 code(変換結果) {//html
-<ul><li>*:ではじまる行は、箇条書きになる。  </li>
-<li>空行があくまで、箇条書きがつづく。</li>
+<ul><li>*ではじまる行は、箇条書きになります。</li>
+<li>空行があくまで、箇条書きがつづきます。。</li>
 </ul>
-<ul><li>空行があくと、あらたな箇条書きになる。</li>
+<ul><li>空行があくと、あらたな箇条書きになります。</li>
+<li>さらに、
+<ul> <li>*を続けるとネストされます。</li></ul>
+</li>
 </ul>
-}
 //}
 
-====: 番号つきリスト
+#### 番号つきリスト
 
 pre(原稿) {//
-1: 数字:ではじまる行は、番号つきリストになる。
-2: 空行があくまで、リストがつづく。
+1. 数字.ではじまる行は、番号つきリストになる。
+2. 空行があくまで、リストがつづく。
 
-3: 空行があくと、あらたなリストになる。
-10: 先頭の数字にかかわらず、1から順に番号がふられる。
+3. 空行があくと、あらたなリストになる。
+10. 先頭の数字にかかわらず、1から順に番号がふられる。
 //}
 
 code(変換結果) {//html
-<ol><li>数字:ではじまる行は、番号つきリストになる。  </li>
+<ol><li>数字.ではじまる行は、番号つきリストになる。  </li>
 <li>空行があくまで、リストがつづく。</li>
 </ol>
 <ol><li>空行があくと、あらたなリストになる。</li>
 <li>先頭の数字にかかわらず、1から順に番号がふられる。</li>
 </ol>
+//}
+
+番号つきリストのネストはサポートしていませんが、どうしてもやりたい場合は次のような方法もあります。
+
+code(原稿) {//
+ol {
+li: 第一の要素
+li {
+  ここはネストしたい。
+  ol {
+    li: ネストします。
+  }
+li: 第三の要素  
+}
+}
+//}
+
+#### 定義リスト
+定義リストには、二種類の書き方があります。
+
+##### 1行の定義
+
+pre(原稿) {
+;: それがし : 名前がわからない，または名前を隠して人や物事をさす語。
+;: それがしかれがし : 不定称。二人以上の人に対し，名を知らなかったり，名を省略していうときに用いる語。
+}
+
+code(変換結果) {//html
+<dl>
+<dt>それがし</dt>
+<dd>名前がわからない，または名前を隠して人や物事をさす語。</dd>
+<dt>それがしかれがし</dt> 
+<dd>不定称。二人以上の人に対し，名を知らなかったり，名を省略していうときに用いる語。</dd>
+</dl>
+//}
+
+##### 複数行の定義
+説明が長い場合は、複数行の形式で書けます。この場合、説明部分は段落になります。
+
+pre(原稿) {//
+;: それがし {
+ 名前がわからない，または名前を隠して人や物事をさす語。
+}
+;: それがしかれがし {
+ 不定称。二人以上の人に対し，名を知らなかったり，名を省略していうときに用いる語。
+}
+//}
+
+code(変換結果) {//html
+<dl>
+<dt>それがし</dt>
+<dd><div class="pgroup"><p>名前がわからない，または名前を隠して人や物事をさす語。</p></div></dd>
+<dt>それがしかれがし</dt> 
+<dd><div class="pgroup"><p>不定称。二人以上の人に対し，名を知らなかったり，名を省略していうときに用いる語。</p></div></dd>
+</dl>
+//}
+
+### 見出し
+#### 単独の見出し
+
+h1からh6が用意されています。そのまま、<h1> タグに変換されます。
+
+pre(原稿) {
+h1: 単独の見出し
+ここに本文
+}
+code(変換結果){//html
+<h1>単独の見出し</h1>
+<div class='pgroup'>
+<p>ここに本文</p>
+</div>
+//}
+
+#### セクションを生成する見出し
+
+Markdown風の # をつかった見出しも使えます。この見出しは、sectionを生成します。
+
+pre(原稿) {
+# 見出し
+本文
+}
+
+code(変換結果) {//html
+<section>
+  <h1>見出し</h1>
+  <div class='pgroup'>
+    <p>本文</p>
+  </div>
+</section>
+//}
+
+入れ子にもできます。sectionの範囲は適切に判断されます。
+
+pre(原稿) {
+# 見出し
+本文
+## 小見出し
+次の本文
+# 新しい章
+新しい章の本文
+}
+
+code(変換結果) {//html
+<section>
+  <h1>見出し</h1>
+  <div class='pgroup'>
+    <p>本文</p>
+  </div>
+  <section>
+    <h2>小見出し</h2>
+      <div class='pgroup'>
+        <p>次の本文</p>
+      </div>
+  </section>
+</section>
+<section>
+  <h1>新しい章</h1>
+  <div class='pgroup'>
+    <p>新しい章の本文</p>
+  </div>
+</section>
+//}
+
+明示的に範囲を指定したセクションをつくることもできます。
+
+pre(原稿) {//
+# 第一のセクション
+ここは第一のセクション
+## 第二のセクション {
+ここは第二のセクション
 }
+ここは再び第一のセクション
+//}
+
+code(変換結果) {//html
+<section>
+  <h1>第一のセクション</h1>
+  <div class='pgroup'>
+  <p>ここは第一のセクション</p>
+  </div>
+  <section>第二のセクション</h1>
+    <div class='pgroup'>
+    <p>ここは第二のセクション</p>
+    </div>
+  </section>
+  <div class='pgroup'>
+  <p>ここは再び第一のセクション</p>
+  </div>
+</section>
+//}
+
+### Frontmatter
+
+各ページごとにYAML frontmatterでメタデータを記載できます。
+
+code(Frontmatterの例) {//
+---
+title: ページのタイトル
+stylesheets: [reset.css, default.css]
+lang: ja
+paragraph_style: default
+---
 //}
 
-====: 定義リスト
+`title`, `stylesheets`, `lang`はそれぞれXHTMLのheaderにかかれます。`paragraph_style`は、HTML生成時の段落スタイル指示ができます。
+
+## カスタマイズ
+
+### 生成ルール追加
+### 木構造の操作
+
+### コマンドの書式
+[span.note{(加筆修正予定)}]
+
+pre(コマンド) {//
+コマンド名[id][class][パラメータ][名前付きパラメータ]
+//}
+
+具体的には、たとえば次のような形をしています。
+
+pre(具体例) {//
+div#id1#id2.class1.class2(parameter1, parameter2)[named_parameter: 1, named_parameter 2]
+//}
+
+* コマンド名は英字ではじまり、英数字とハイフン、アンダースコアからなります。
+* idは、#からはじまり、英数字とハイフン、アンダースコアからなります。複数続けることができます。
+* classは、.からはじまり、英数字とハイフン、アンダースコアからなります。複数続けることができます。
+
+* パラメータは`()`で囲まれています。カンマで区切られた領域ごとに、独立したパラメータになります。
+* パラメータの内容は、NoraMarkのマークアップとしてパースされます。
 
-=====: 1行の定義
+* 名前付きパラメータは`[]`で囲まれていて、カンマで区切られた次の形式をしています。
+**  名前: パラメータ
+* 名前は英字ではじまり、英数字とハイフン、アンダースコアからなります。名前付きパラメータの内容は、NoraMarkのマークアップとしてはパースされません。
 
-=====: 複数行の定義
+## XML生成
 
-===: 見出し
 
-====: 単独の見出し
 
-====: セクションを生成する見出し
 
-===: Frontmatter
 
-==: カスタマイズ
-===: 生成ルール追加
-===: 木構造の操作
 
-==: XML生成