Markdown Syntax によるクイック スタート_html/css_WEB-ITnose

声明: このドキュメントは繁体字中国語版から派生 (フォーク) されており、これに基づいて繁体字中国語から簡体字中国語への変換が行われ、適切な修正が行われています。このドキュメントは Markdown 構文で書かれており、ここでそのソース ファイルを表示できます。 「繁体字中国語版のオリジナルファイルはここで見ることができます」 -- By @riku

注: このプロジェクトは GitCafe でホストされています。「フォーク」と「マージ リクエスト」を通じてこのプロジェクトの改善にご協力ください。

Markdown: 基本 (クイック スタート) / (クリックすると完全な構文説明が表示されます)

Markdown の書式設定構文の要点を理解する

このページでは Markdown の簡単な概念を説明し、構文説明ページでは完全かつ詳細なドキュメントを提供します。それぞれの機能を説明します。ただし、Markdown は実際には非常に簡単に始めることができます。このドキュメントではいくつかの例を示し、それぞれの例で HTML の出力結果を示します。

実際、Dingus は独自の Markdown ドキュメントを XHTML に変換できる Web アプリケーションです。

段落、タイトル、ブロックコード

段落は複数の接続された行文で構成され、複数の空行が異なる段落を分割します（空行の定義は、表示されたときに空行のように見えることです）たとえば、空白とタブだけの行がある場合、その行も空白行とみなされます。) 一般的な段落は空白や改行でインデントする必要はありません。

Markdown は、Setext と atx 形式の 2 つのタイトル構文をサポートします。 Setext 形式では下線が使用され、= (最上位レベルのタイトル) と - (第 2 レベルのタイトル) が使用されます。Atx 形式では、タイトルの第 1 レベルから第 6 レベルに対応する 1 ～ 6 個の # が挿入されます。 。

メールフォームではブロック参照には「>」を使用します。

マークダウン構文:

A First Level Header====================A Second Level Header---------------------Now is the time for all good men to come tothe aid of their country. This is just aregular paragraph.The quick brown fox jumped over the lazydog's back.### Header 3> This is a blockquote.> > This is the second paragraph in the blockquote.>> ## This is an H2 in a blockquote

出力 HTML は次のとおりです:

<h1 id="A-First-Level-Header">A First Level Header</h1><h2 id="A-Second-Level-Header">A Second Level Header</h2><p>Now is the time for all good men to come tothe aid of their country. This is just aregular paragraph.</p><p>The quick brown fox jumped over the lazydog's back.</p><h3 id="Header">Header 3</h3><blockquote><p>This is a blockquote.</p><p>This is the second paragraph in the blockquote.</p><h2 id="This-is-an-H-in-a-blockquote">This is an H2 in a blockquote</h2></blockquote>

修辞と強調

Markdown では、アスタリスクと下線を使用して強調が必要なセクションをマークします。

マークダウン構文:

Some of these words *are emphasized*.Some of these words _are emphasized also_.Use two asterisks for **strong emphasis**.Or, if you prefer, __use two underscores instead__.

出力 HTML は次のとおりです:

<p>Some of these words <em>are emphasized</em>.Some of these words <em>are emphasized also</em>.</p><p>Use two asterisks for <strong>strong emphasis</strong>.Or, if you prefer, <strong>use two underscores instead</strong>.</p>

List

順序なしリストでは、リストの項目マークとしてアスタリスク、プラス記号、マイナス記号を使用します。

* Candy.* Gum.* Booze.

Plus記号:

+ Candy.+ Gum.+ Booze.

とマイナス記号

- Candy.- Gum.- Booze.

は、次のように HTML を出力します:

<ul><li>Candy.</li><li>Gum.</li><li>Booze.</li></ul>

順序付きリストでは、項目マークとして通常の数字とそれに続く英語のピリオドが使用されます:

1. Red2. Green3. Blue

出力 HTML は次のとおりです:

<ol><li>Red</li><li>Green</li><li>Blue</li></ol>

項目の間に空白行を入れると、項目の内容が

で囲まれます。前に 4 つのスペースまたは 1 つのタブをインデントすれば、1 つの項目に複数の段落を入れることもできます。

* A list item.    With multiple paragraphs.* Another item in the list.

出力 HTML は次のとおりです:

<ul><li><p>A list item.</p><p>With multiple paragraphs.</p></li><li><p>Another item in the list.</p></li></ul>

Link

Markdown は、インラインとリファレンスという 2 つの形式のリンク構文をサポートしており、どちらも山括弧を使用してテキストをリンクに変換します。

インラインフォームは、最後に括弧でリンクを直接接続します:

This is an [example link](http://example.com/).

出力HTMLは次のとおりです:

<p>This is an <a href="http://example.com/">example link</a>.</p>

オプションでタイトル属性を追加することもできます:

This is an [example link](http://example.com/ "With a Title").

出力HTMLは次のとおりです:

<p>This is an <a href="http://example.com/" title="With a Title">example link</a>.</p>

参照フォームlink リンクに名前を付けることができ、ファイル内の他の場所でリンクのコンテンツを定義できます:

I get 10 times more traffic from [Google][1] than from[Yahoo][2] or [MSN][3].[1]: http://google.com/ "Google"[2]: http://search.yahoo.com/ "Yahoo Search"[3]: http://search.msn.com/ "MSN Search"

出力 HTML は次のとおりです:

<p>I get 10 times more traffic from <a href="http://google.com/"title="Google">Google</a> than from <a href="http://search.yahoo.com/"title="Yahoo Search">Yahoo</a> or <a href="http://search.msn.com/"title="MSN Search">MSN</a>.</p>

title 属性はオプションで、リンク名には文字を使用できます。ただし、大文字と小文字は区別されません:

I start my morning with a cup of coffee and[The New York Times][NY Times].[ny times]: http://www.nytimes.com/

出力 HTML は次のとおりです:

<p>I start my morning with a cup of coffee and<a href="http://www.nytimes.com/">The New York Times</a>.</p>

Picture

Picture の構文はリンクと非常によく似ています。

インラインフォーム (タイトルはオプション):

![alt text](/path/to/img.jpg "Title")

参照フォーム:

![alt text][id][id]: /path/to/img.jpg "Title"

上記の 2 つのメソッドは HTML を次のように出力します:

<img src="/static/imghwm/default1.png"  data-src="/path/to/img.jpg"  class="lazy" alt="alt text" title="Title" />

コード

一般的な段落テキストでは、バックティックを使用してコードセクションをマークできます。セクション内の &、 は、コード セクションに HTML コードを簡単に挿入できます。

I strongly recommend against using any `<blink>` tags.I wish SmartyPants used named entities like `—`instead of decimal-encoded entites like `—`.

フォーマットされた HTML を作成する場合は、コード ブロックの場合、各行を 4 つのスペースまたはタブでインデントするだけで、&、 も自動的に HTML エンティティに変換されます。

マークダウン構文:

<p>I strongly recommend against using any<code><blink></code> tags.</p><p>I wish SmartyPants used named entities like<code>&mdash;</code> instead of decimal-encodedentites like <code>&#8212;</code>.</p>

出力HTMLは次のとおりです:

If you want your page to validate under XHTML 1.0 Strict,you've got to put paragraph tags in your blockquotes:<blockquote><p>For example.</p></blockquote>