ホームページ > ウェブフロントエンド > htmlチュートリアル > Markdown Syntax によるクイック スタート_html/css_WEB-ITnose

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

WBOY
リリース: 2016-06-24 11:20:28
オリジナル
1453 人が閲覧しました

声明: このドキュメントは繁体字中国語版から派生 (フォーク) されており、これに基づいて繁体字中国語から簡体字中国語への変換が行われ、適切な修正が行われています。このドキュメントは 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>A First Level Header</h1><h2>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>Header 3</h3><blockquote><p>This is a blockquote.</p><p>This is the second paragraph in the blockquote.</p><h2>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="/path/to/img.jpg" 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>
ログイン後にコピー

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート