Showdown
a javascript port of
Markdown
Input
このツールについて --------------- このページは、読みやすくて書きやすいシンプルな記法で入力されたテキストを変換して、HTMLを生成します。 - 左側のテキストエリアに Markdown 記法でテキストを入力します。 - 右側のテキストエリアには変換後の HTML が表示されます。 Markdown 記法は、メールなどで普通に使われるような簡単な記法をベースとした簡易マークアップ言語です。[Markdown site] [1]:には、[John Gruber] による下記のような説明があります。 > Markdown 記法を設計する際に最も重視したのは可能な限り読みやすくすることです。仕様書に公開している通り、タグや書式指定子でマークアップするのではなく、 Markdown 記法ではプレーンなテキストで記述することができます。 左側のテキストエリアに見えるプレーンテキストの通り、この文書も Markdown 記法で記述しています。 Markdown 記法の雰囲気を掴むには、なにかテキストを左側のテキストエリアに入力しつつ、右側のテキストエリアを見てください。 Markdown 記法の説明を参照するには、ページ右上にあるドロップダウンリストを **Preview** から **Syntax Guide** に切り替えます。 "showdown.js" は、Markdown 記法を実現する JavaScript です。このページの最下部にある[ダウンロードリンク]をクリックするとソースコードを入手できます。 **[blank page] をクリックするか、この文書を上書きして編集を始めることができます。** ###関連記事### - [Showdown : Markdown 記法で記述したテキストを HTML 形式に変換する Javascript] (PamGau) [john gruber]: http://daringfireball.net/ [1]: http://daringfireball.net/projects/markdown/ [ダウンロードリンク]: http://www.attacklab.net/showdown-v0.9.zip [blank page]: ?blank=1 "Clear all text" [Showdown : Markdown 記法で記述したテキストを HTML 形式に変換する Javascript]: http://pamgau.net/item/383 "Showdown : Markdown 記法で記述したテキストを HTML 形式に変換する Javascript : PamGau"
Preview
HTML Output
Syntax Guide
You'll need to enable Javascript to use this tool.
Markdown 記法の説明 ===================== ここでは Markdown 記法の概略を説明します。より詳細な情報は、 [Markdown web site] をご覧下さい。 [Markdown web site]: http://daringfireball.net/projects/markdown/ em と strong ================ *このようにすると em* でマークアップされます。あるいは_これでも em_ です。 **これは strong** でマークアップされます。こうしても __strong__ です。 このようにはしてはいけません。***斜体で太字の文字列*** になるように見えますが、マークアップの意味が可笑しくなります。これも___同様___です。 **訳者:kyorecoba注** - この項の原文は根本的に誤っているので訂正して訳しました。"em" , "strong" がそれぞれ斜体・太字となるかはスタイル指定に依ります。 リンクアンカー ===== 単純なリンクアンカー ------------ 3通りの記法があります。後になるにつれ、だんだん読みやすくなります。 1. インラインで [Google](http://www.google.com/) へのリンクアンカー 2. 参照形式の [Google] [1] へのリンクアンカー 3. とても読みやすい [Yahoo!] へのリンクアンカー [1]: http://www.google.com/ [yahoo!]: http://www.yahoo.com/ リンクアンカーの href 属性の定義文字列は同じテキスト内のどこにでも配置できます。リンクアンカーよりも前でも後ろにまとめても構いません。 リンクアンカーとなる文字列は同じテキスト内でユニークであれば良く、大文字小文字を区別しません。`[Yahoo!]` と書くべきところを `[YAHOO!]` と書いてもかまいません。 title 属性つきのリンクアンカー -------------------------------- リンクアンカーには `title` 属性を入れることができ、これによって閲覧者はマウスポインタをリンクアンカー文字列に合わせるとツールチップでリンク先の情報を知ることができます。 リンクアンカーとなる文字列でリンク先の情報を十分に伝え切れない場合などは、title 属性を入れることは親切なものです。 (参照リンクでは、引用符の代わりに title 属性のための括弧が使用されます。) - title 属性を付けた [こちら](http://www.google.com/ "Google") というような貧弱な文字列によるリンクアンカー - "[こちらをクリック][^2]" なんて絶対書いてはいけません、本来は…。 - [私を信じてクリックして] これもダメダメ [^2]: http://www.w3.org/QA/Tips/noClickHere (Advice against the phrase "click here") [私を信じてクリックして]: http://www.attacklab.net/ "Attacklab" URL 文字列によるリンクアンカー ------------------------- URL 文字列をそのままリンクアンカーにしたい場合、前後を < と > で括ります。 - 私のサイト URL は <http://www.attacklab.net> です。 メールアドレスが記述された場合、Showdown ではメールアドレス収集ロボットに認識されにくいコードに変換します。**HTML Output** に切り替えてどのように変換されるか確認してみてください。 - 人間はこれを読めますが、ほとんどの収集ロボットはこれをメールアドレスだとは認識できないはずです。: <me@privacy.net> 見出し ======= HTML の "h1" から "h6" でマークアップされる見出しを記述するのに、Markdown 記法では2通りの方法があります。 上位2つの見出し(h1 と h2) は下記のように、文字列の下行にそれぞれ "=", "-" を続けて記述します。 見出し h1 ======== 見出し h2 -------- `=` や `-` をいくつ書けばいいかは決まっていません。ひとつだけ書いても有効です。でも見やすくするためにはある程度続けて書いたほうがいいでしょう。 また、別のやり方として下記のような記法も有効です。 # 見出し h1 # ## 見出し h2 ## ### 見出し h3 ### #### 見出し h4 #### ##### 見出し h5 ##### ###### 見出し h6 ###### 後ろの閉じる `#` は必須ではありません。 水平線 hr ================ ハイフン・アスタリスク・アンダースコアを3個以上続けて行中に記述すると、HTML で "hr" と記述される水平線 (horizontal rule) を挿入できます。 --- ******* ___ 間にスペースがあっても大丈夫。 - - - - これらの例は全て同じように出力されます。 リスト ul, ol ===== 単純なリスト ------------ ###順序なしリストの場合### **訳者:kyorecoba注** - 原文では "bullet lists" という表記でしたが、行頭に付加される記号はスタイル指定によっては "bullet" であるはずもなく、意味を汲んで「順序なしリスト」と表記しました。 - マイナス記号に続けてスペースを開けて項目文字列を記述 + プラス記号でも可 * アスタリスクでも可 ###順序リストの場合### 1. 数字とピリオドに続けてスペースを挟んで項目を記述 2. 次の数字は自動的に決定される 7. "7" と記述しても実際の項目番号は "3" ###項目内での段落挿入### 下記のように書くと、"li" 内の文字列が "p" で括られます。 **訳者:kyorecoba注** - 原文では "Double spaced lists" という表記でしたが、別に空白行を必ずしも挟むわけではなく、HTML 的には上のような出力となります。 - この文字列は `<p>` タグで括られます。 - ですから見かけ上は空行を挟んだリストになります。 高度なリスト: ネストするリスト ----------------------- リストの各項目の中にさらにリストをネストさせることができます。 ひとつの項目の下行にスペースを4つ続けて記述すると下層レベルのリストを記述することができます。 1. ひとつめの項目: - 4つのスペースを行頭に挿入します。 * ここは8つのスペースを入れてみました。 - もう一度4つのスペースに戻します。 2. 複数の段落のあるリスト項目: その場合も、行頭に4つのスペースを挟みます。 3つでもいいのですが、ややこしいので4つに統一しておくべきでしょう。 このように第一行目でインデントするようにして段落としての体裁を整えます。 実際のところ、このようなことはよくやります。 この段落もまだ上の段落と同じ項目にあり、目で見てもそのように見えます。 最初の2つの段落と同じように、手作業で適当に改行するのも悪くありません。 3. ブロック引用のあるリスト項目: > 空行をひとつ挟んでから > やはり4つのスペースでインデントして > ">" を行頭に置いてから記述し始めます。 4. 整形済みテキストのあるリスト項目: 空行をひとつ挟んでから 8つのスペースでインデントします。 4つのスペースはリスト内の記述のためであり、 もう4つは整形済みテキストブロックの開始を 規定するわけです。 ブロック引用 blockquote =========== 単純な blockquote ------------------ 普通、"blockquote" はインデントされるのが普通ですが、どのような外観になるのかは CSS によります。 > こんな引用符はメールでよく使われます。 > 行毎に引用符をつける必要はありませんが、 > つけたほうがきれいに見えます。 > まあ好き好きではありますが…。 高度な blockquotes: ネスト構造 ----------------------------- 他の Markdown 記法による "blockquote" ; `>` の後ろにスペースを挟んで続けて文字列を記述するだけです。 ###段落を持つ blockquote:### > 空行の行頭に ">" を記述するかどうかは任意です。 > ">" が記述されているかどうかについては Markdown 記法は関知しません。 > > でも、空行の行頭であっても ">" を記述した方が > 目で見て、同じ "blockquote" 内に段落の境界があることがわかるので > そのようにしておくのが望ましいです。 ###blockquote の中の blockquote:### > 普通の "blockquote" はインデントされます。 > > ネストした "blockquote" はより深くインデントされます。 > > > > さらに深くインデント。 ###blockquote の中のリスト :### > - "blockquote" の中のリスト > - ">" に続けてスペースを挟み、ハイフンなどのリスト用の識別子を記述します。 > * さらに4つのスペースを続けるとリストをネストさせることもできます。 ###blockquote の中の 整形済みテキスト:### > 都合5つのスペースを ">" の後に挟んでから記述します。 > 1つのスペースはblockquote であることを認識させるためであり、 > あとの4つで整形済みテキストであることが認識されます。 画像 ====== 画像はリンクアンカーの記法に似ていますが、その先頭に感嘆符 (!) が付きます。 ![Valid XHTML] (http://w3.org/Icons/valid-xhtml10). ブラケットで挟まれた文字列は、alt 属性の文字列となり、画像非表示のブラウザで画像の変わりに表示される文字列です。 音声ブラウザを使う目が不自由な人のために意味のある文字列を記載すべきでしょう。 title 属性の表示も含め、記法そのものはリンクアンカーの要領で記述します。: This page is ![valid XHTML][checkmark]. [checkmark]: http://w3.org/Icons/valid-xhtml10 "何が可笑しいのさ?" **注意:** 現在のところ、Markdown 記法はリンクアンカーの記法で用いられた一番短くて済む記法を画像においてはサポートしていません。下記の記法だと画像は表示されません。 Here's a broken ![checkmark]. しかし、下記のように空の一対のブランケットを続けて記述すると、少しだけ冗長にはなりますが、正しく表示させることができます。 This ![checkmark][] works. 参照名として (`valid icon`) も alt テキストとして試用できます。 文書中の HTML の扱い =========== Markdown 記法で扱っていないような HTML を使いたい場合は、そのまま記述すすることができます。: 取り消し線を使ったジョークは <strike>このように</strike>できます。 Markdown 記法はインラインで記述された HTML を無効にしない程度には賢いです。 <u>ここの Markdown 記法は *すばらしい*。</u> ブロック要素 は少し改変される可能性があります。: 1. 前後を空行で挟まれた領域は他の要素とは分けて解釈されてしまいます。 2. 一番外側のブロック要素はインデントされません。 3. ブロック要素内の Markdown 記法は無視されます。 例えば: <div style="background-color: lightgray"> この中で <em>not</em> は使えません。 </div> 整形済みテキスト pre ================= 整形済みテキスト "pre" も Markdown 記法では使えます。 "code" ブロックとして指定する場合は、4つのスペースによるインデントを加えます。: printf("goodbye world!"); /* 彼の遺書は C で 書かれている */ これによって `<pre>` と `<code>` とが連続したタグでマークアップされます。多くのブラウザでは幅固定フォントで表示されます。最初の4つのスペースは変換後は除去されますが、それ以外はスペースとして認識されます。 この中では Markdown 記法も HTML も使うことができません。そのまま表示されてしまいます。ですから、むしろ簡単に HTML コードを記述することができます。: <blink> ここの記述が "code" ブロックでないとしたら いやでしょう…(笑) "blink" なんて嫌われていますからね。 </blink> コード code ========== バックチックを使うと、インライン要素である "code" のマークアップができます。 `<Tab>` キーを押した後、`$`を押します。 (バックチックは日本語キーだとシフトを押しながら、"@" を打鍵すると入力できます。違う場合もありますが…) インライン要素であっても "code" でマークアップされた文字列は幅固定フォントが使われます。もちろん、Markdown 記法と HTML もまた "code" 内では無効です。: Markdown 記法の "em" 要素の記述を試みるとこのようになります。: `*大*好き!` CSS の代わりに `<font>` タグは使わないように…。