EASY AND RICH MARK DOWN SYSTEM
VERSION 1.0.0b2
Copyright (c) 2012, Kengo Tsuruzono All rights reserved.
何らかのドキュメントを作成する時に、プレーンテキストだと味気ないし画像も貼れない。かといって、ワープロソフトと格闘するのも嫌だし...。でも、他に選択肢といえばHTML位しかありません。HTMLエディタを使ってもいいですが、密かに注目されているのが「 マークダウン 」というシステムです。マークダウンというのはプレーンなテキストをリッチなテキストに変換するシステムです。例えば以下のようなテキストを書くと...
''製品特徴''↓
---↓
より大きな''6インチディスプレイ''、より速い//A8チップ//、__超高速__ワイヤレステクノロジー、((12メガピクセル))のカメラを搭載しています。↓
以下のような文字修飾がされたHTMLが出力されるのです。ここでは「↓」は改行文字を表しています。ここだけで「 太字、斜体字、下線、囲い、水平線 」の修飾機能を使っています。
製品特徴
より大きな6インチディスプレイ、より速いA8チップ、超高速ワイヤレステクノロジー、12メガピクセルのカメラを搭載しています。
このようにプレーンなテキストにちょっとした記述を加えることで、HTMLに変換してくれるのがマークダウンです。編集はいつも使っているテキストエディタで行えます。最近は、このマークダウンをサポートしたエディタも増えてきました。HTMLが出来てしまえば、OS Xなら標準でPDFに出力する機能がありますし、Windowsでも無料のPDF出力してくれるプリンタドライバもあります。配布をPDFにすれば、もうワープロを使う必要はなくなります。
ただし、一般的なマークダウンにあまり高度な表現力を求めてはいけません。所詮はプレーンテキストですので、図形編集機能などはありません。別の画像作成ソフトで作成して貼付けることになります。自分に必要な表現能力があるかどうか、使おうとしているマークダウンのソフトの機能は予めチェックしておきましょう。
それに、最近はアイコンのフォントや顔文字の標準化等もあり、文字だけでも表現力はそれなりに高くなっているので、マークダウン記法の実用性はさらに高まっていると言えるでしょう。
このKTMarkDownも、マークダウン変換ソフトですが、一般のマークダウンのソフトよりも他のマークダウンシステムに比べ表現力が高く、かつ、簡単で覚えやすいことを目指して作ったものです。HTMLやCSSの知識はほとんどなくても使えますし、知っている場合はさらにリッチな表現が可能になります。万能ではありませんが、ウェブサイト作成や書籍の執筆にも使えるものになっていると思います。
ただ、現状はテキストをHTMLに変換する作業には、ターミナルを使用します。変換するためのソフトウェアをperlという言語で記述しているためです。要望があれば、ターミナルを使用しないで済むようなアプリケーションを作ろうかと思っています( OS X用になりますが )。
現在、仕様を考えつつ実装をしているというレベルですが、このドキュメントもKTMarkDownで生成していますので、このレベルのものが動いています。ソースは perl ですが、使ってみたいという気の早い方は こちら からダウンロードできます。1本のperlスクリプトファイルで、外部ライブラリは使っていません。
以下のようにして、変換元のファイルを引数に渡すだけです。拡張子を「html」にしたファイル ( この場合は index.html ) が生成されます。既に、同名のファイルがあっても上書きしますので、その点を注意の上お使いください。
perl ktMarkDown.pl index.txt
OS X 10.8のperl v5.12.4で開発しています。スクリプトの文字コードは、utf-8で、変換するファイルもutf-8で動かしています。OSが異なる場合は、スクリプト自体の文字コードや変換するファイルの文字コードをネイティブのものにしないといけないかもしれません。
ここから、KTMarkDownの文法の説明を行っていきます。「 初級編 」と「 上級編 」という言葉が出てきますが、上級編というのはHTMLやCSSの知識を必要としますよという意味で使っています。
文字列を普通に入力すると、それがそのままHTMLに出力されます。改行までが1つの段落と見なされます ( 80桁位で改行を入れる必要はありません )。改行だけの行は何も出力されませんので、空行を作りたい場合は、例えば半角のスペースを1文字入れて改行してください。
全ての文法に共通しますが、マークダウンに用いる記号は全て半角です。全角の文字はそのまま文字としてHTMLに出力されます。
文字修飾の文法です。特定の記号を修飾したい部分の前後に2文字ずつ書くのが基本パターンです。
以下がサンプルです。上側がマークダウンで書いたテキストで、下側が出力結果です。下線と太字が同時に使われているところにも注目してください。入れ子にすることで、修飾の複数同時使用も可能です。
一体、このどこに''無線通信の装置''やら''バッテリー''やらが入っているのかと驚かされます。(( ボタン )) はケーブルの右側にありますが邪魔はなりません。ケーブルも適度に短く、//首の後ろにかけて使うスタイル//なので、__ケーブルの存在も忘れてしまう程__。短いので絡むこともありません。デザインも__シンプルで''高級感''があります__が、イヤホン部分はちょっと''大きめ''です。
一体、このどこに無線通信の装置やらバッテリーやらが入っているのかと驚かされます。 ボタン はケーブルの右側にありますが邪魔はなりません。ケーブルも適度に短く、首の後ろにかけて使うスタイルなので、ケーブルの存在も忘れてしまう程。短いので絡むこともありません。デザインもシンプルで高級感がありますが、イヤホン部分はちょっと大きめです。
上級者情報 : 等幅文字のカスタマイズ
文字に下線を付けます。前後にアンダースコアを2つ書きます。
他にも以下のものが使えます。
上級者情報 : 下線のカスタマイズ
文字を角丸の四角形で囲みます。前後に丸括弧を2つ書きます。
他にも以下のものが使えます。
さらに「 , 」を付けるとドロップシャドウが付きます。
上級者情報 : 文字囲みのカスタマイズ
文字を四角形で囲みます。前後に角括弧を2つ書きます。
その他、以下のものが使えます。
さらに「 , 」を付けるとドロップシャドウが付きます。
上級者情報 : 文字囲みのカスタマイズ
CSSの知識のある方は、独自の文字修飾を行うことが出来ます。
DECO1, DECO2, DECO3
{{ color:red; font-size:24pt; | 赤い文字 24pt }} → 赤い文字
マークダウンでの文字修飾の文法は分かったかと思いますが、例えば「 (( 」というようにマークダウンの文法とぶつかっている文字列を書きたい場合があります ( 数式などではよく出てきそうです )。この場合は、「 \(\( 」という風にそれぞれの文字の前にバックスラッシュをつけます。「 バックスラッシュの次の文字はそのまま出力する 」ルールとなっているためです。面倒な場合は「 ( ( 」と間にスペースを入れるという方法もあります。バックスラッシュ自身を書きたい場合は「 \\ 」とバックスラッシュを2つ続けて書きます。
行全体にかかる修飾の指定は、テキストの行頭に書きます。
上記の「 行修飾 」は以下のように書いています。
##, 行修飾
上級者情報 : ドロップシャドウのカスタマイズ
左揃え ← ( :左揃え )
中央揃え ← ( ::中央揃え )
右揃え ← ( :::右揃え )
両端揃え ← ( ::::両端揃え )
上級者情報 : 揃えのカスタマイズ
複数行全体を角丸の四角で囲む修飾機能です。
丸囲み行1 ← (((1: … ))) or 短縮形 ((( … )))
丸囲み行2 ← (((2: … ))) or 短縮形 (((: … )))
丸囲み行3 ← (((3: … )))
丸囲み行の1と2については短縮形があります。丸囲み行は3以降も沢山の種類がありますので、リファレンスをご覧ください。
丸囲み行には、影を付ける機能があります。外側に付ける「 ドロップシャドウ 」と内側に付ける「 インナーシャドウ 」の2種類で、以下のように記述します。
丸囲み行1 ← (((3,: … )))
丸囲み行1 ← (((3': … )))
複数行全体を四角で囲む修飾機能です。
角囲み行11 ← (([1: … ])) or 短縮形 (([ … ]))
角囲み行12 ← (([2: … ])) or 短縮形 (([: … ]))
角囲み行13 ← (([3: … ]))
角囲み行の1と2については短縮形があります。角囲み行は3以降も沢山の種類がありますので、リファレンスをご覧ください。
角囲み行には、影を付ける機能があります。外側に付ける「 ドロップシャドウ 」と内側に付ける「 インナーシャドウ 」の2種類で、以下のように記述します。
角囲み行3 ドロップシャドウ ← (([3,: … ]))
角囲み行3 インナーシャドウ ← (([3': … ]))
何かの文献や他のサイトからの引用をする場合に用いるものです。
引用 ← ([[1: … ]]) or 短縮形 ([[ … ]])
引用 ← ([[2: … ]]) or 短縮形 ([[: … ]])
引用 ← ([[3: … ]])
上級者情報 : 文字囲みのカスタマイズ
プレフィックスというのは、テキストを書いたまま出力するHTMLのpreタグに対応するものです。HTMLでは半角スペースを複数書いても1文字分のスペースにしかなりませんが、プレフィックスを使うと文字数分のスペースになり、フォントも等幅のものが使われます。
プレフィックス1 ← [[[1: … ]]] or 短縮形 [[[ … ]]]
プレフィックス2 ← [[[2: … ]]] or 短縮形 [[[: … ]]]
プレフィックス3 ← [[[3: … ]]]
プレフィックスには、影を付ける機能があります。外側に付ける「 ドロップシャドウ 」と内側に付ける「 インナーシャドウ 」の2種類で、以下のように記述します。
角囲み行1 ドロップシャドウ ← [[[1,: … ]]]
角囲み行1 インナーシャドウ ← [[[1': … ]]]
注意事項
上級者情報 : プレフィックスのカスタマイズ
「 丸囲み行 」「 角囲み行 」「 プレフィックス 」は独自のクラス指定とCSS指定が可能です。
((( "dark_box" … )))
((( { float:left; width:45%; } … )))
((( { float:right; width:45%; } … )))
上級者情報 : カスタマイズ
画像の貼付けの文法です。
::[img (Sample) "sample.jpg"]
リンクの文法です。
水平線の文法です。テキストの行頭に書きます。
↓水平線1 ---1: or ---
↓水平線2 ---2: or ---:
↓水平線3 ---3:
「 水平線 」もクラス指定とCSS指定が可能です。
↓クラス指定 : --- "blue"
↓CSS指定 : --- { border-bottom : 3px dashed #0f0; }
↓色指定 : --- #f00
/* CSS定義 */ hr.blue { border-style: solid; border-color: #00f; border-width: 0px 0px 1px 0px; height: 1px; padding: 0px; margin: 2px 16px 2px 16px; }
箇条書きのことをリストと呼びますが、これもテキストの行頭に記号を書きます。箇条書きは入れ子になることがありますが、入れ子の回数分だけ記号を書いて表現します。
以下のように2つを混在させることも可能です。
*iOSデバイス **iPhone系 +++iPhone 5 +++iPod touch **iPad系 +++iPad 3 +++iPad 2 +++iPad mini
KTMarkDownの記述では表現できないものは、直接HTMLをテキスト内に書き込んでください。そのまま反映されます。直接videoタグを書いて下のように動画を貼ることもできます。中央揃えのマークダウン「 :: 」と組み合わせて記述しています。
::<video src="sample.m4v" controls></video>
HTMLというのは「 < 」と「 > 」を使ってタグの囲みに使いますので、そのまま書くことが出来ません。そのため「 < 」は「 << 」、「 > 」は「 >> 」で書けるようにしています。
KTMarkDownは、テキストの各行を基本的に「 <p>〜</p> 」で囲みますが、加工されたくない場合は、無加工領域を作ることが出来ます。HTML / CSS / JavaScript 等を書きたい場合に使用してください。
テーブルの記述方法です。
テーブルは非常に複雑なため、まだ、仕様の検討段階です。行頭に「 | 」を書いたら、そこがテーブルと見なされ、さらに「 | 」でセルを区切っていくという形で取り敢えず実装しています。
|果物|りんご|みかん|バナナ |野菜|きゅうり|なすび|カボチャ
果物 | りんご | みかん | バナナ |
野菜 | きゅうり | なすび | カボチャ |
書籍などの印刷物やPDFを作成する場合の改ページ機能です。ウェブで見ている分には何も分かりません。
丸囲み行1 ← (([ … ))) or (([1: … )))
丸囲み行2 ← (([: … ))) or (([2: … )))
丸囲み行3 ← (([3: … )))
丸囲み行11 ← (([11: … )))
丸囲み行12 ← (([12: … )))
丸囲み行13 ← (([13: … )))
丸囲み行21 ← (([21: … )))
丸囲み行22 ← (([22: … )))
丸囲み行23 ← (([23: … )))
丸囲み行31 ← (([31: … )))
丸囲み行32 ← (([32: … )))
丸囲み行33 ← (([33: … )))
丸囲み行51 ← (([51: … )))
丸囲み行52 ← (([52: … )))
丸囲み行53 ← (([53: … )))
丸囲み行61 ← (([61: … )))
丸囲み行62 ← (([62: … )))
丸囲み行63 ← (([63: … )))
丸囲み行71 ← (([71: … )))
丸囲み行72 ← (([72: … )))
丸囲み行73 ← (([73: … )))
丸囲み行81 ← (([81: … )))
丸囲み行82 ← (([82: … )))
丸囲み行83 ← (([83: … )))
角囲み行0 ← (([ … ])) or (([0: … ]))
角囲み行1 ← (([ … ])) or (([1: … ]))
角囲み行2 ← (([: … ])) or (([2: … ]))
角囲み行3 ← (([3: … ]))
角囲み行11 ← (([11: … ]))
角囲み行12 ← (([12: … ]))
角囲み行13 ← (([13: … ]))
角囲み行21 ← (([21: … ]))
角囲み行22 ← (([22: … ]))
角囲み行23 ← (([23: … ]))
角囲み行31 ← (([31: … ]))
角囲み行32 ← (([32: … ]))
角囲み行33 ← (([33: … ]))
角囲み行51 ← (([51: … ]))
角囲み行52 ← (([52: … ]))
角囲み行53 ← (([53: … ]))
角囲み行61 ← (([61: … ]))
角囲み行62 ← (([62: … ]))
角囲み行63 ← (([63: … ]))
角囲み行71 ← (([71: … ]))
角囲み行72 ← (([72: … ]))
角囲み行73 ← (([73: … ]))
角囲み行81 ← (([81: … ]))
角囲み行82 ← (([82: … ]))
角囲み行83 ← (([83: … ]))
↓水平線1
↓水平線2
↓水平線3
↓水平線11
↓水平線12
↓水平線13
↓水平線21
↓水平線22
↓水平線23
↓水平線31
↓水平線32
↓水平線33