先端学Markdown

6252 ワード
前の話
個人的には、Markdownはリッチテキストエディタ言語であり、sassのcssに対する機能に似ています.MarkdownはHTMLプリプロセッサとも呼ばれますが、軽量級のタグ言語であり、HTMLドキュメントをより簡単に実現することができます.ここではMarkdownの内容について詳しく説明します
 
概要
Markdownの目標は、読みやすく書きやすいことです.Markdown形式で書かれたファイルは、純粋なテキストで直接公開できるはずです.
Markdownの構文はすべていくつかの記号で構成されており、その構文の種類は少なく、HTMLタグのほんの一部に対応しています.Markdownは実際には簡略版のHTMLなので、そのままHTMLを書いても大丈夫です
 
段落
記号を付けない文字は、段落です.複数の段落間を空白行で区切る
p1   

p2

p3

 出力HTMLは
<p>p1</p>
<p>p2</p>
<p>p3</p>

 
折り返し
 段落間に空の行がない場合は、HTMLタグ<br>として解析されます.
p1
p2
p3

 出力HTMLは
<p>p1<br>
   p2<br>
   p3</p>

 
見出し
  #,##,##,##,##,##,###,###,####はそれぞれ<h1>,<h2>,<h3>,<h4>,<h5>,<h6>,<h>に対応している.実は私個人は感じて、直接<blockquote>ラベルを使うほうが便利で、特にタイトル3以降まで
#h1
##h2
###h3
####h4
#####h5
######h6

 出力HTMLは
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>

 
ブロック
ブロックといえば、聞く人が少ないかもしれません.ブロック要素を参照するためにHTMLの<blockquote>ラベルに対応する'>'という記号で表されます.「Head first HTML And CSS」という本では、<q>と<blockquote>についても詳細に区別されているが、実際には少ないが、markdown対応ブロック参照の実装では<p>ラベルの意味を完全に表現することはできず、複数の段落を参照できるはずだが、実際にはmarkdownの'>'記号は1つの段落しか参照できない
>p1

p2

 出力HTMLは
<blockquote>
    <p>p1</p>
</blockquote>
<p>p2</p>

 
リスト#リスト#
【無秩序リスト】
無秩序リストリストリストリストのアイテムタグとしてアスタリスク、プラス記号、マイナス記号を使用します.
* red
* blue
* green

+ red
+ blue
+ green

- red
- blue
- green

 出力HTMLは
<ul>
    <li>red</li>
    <li>blue</li>
    <li>green</li>
</ul>

【順序リスト】
順序付けされたリストは、一般的な数字を使用して英語の句点をプロジェクトタグとして使用します.
1. Red
2. Green
3. Blue

 出力HTMLは
<ol>
    <li>red</li>
    <li>blue</li>
    <li>green</li>
</ol>

  [注意]プロジェクト間に空の行を挿入すると、プロジェクトの内容は<a>で囲まれます.
 
ぶんりせん
 アスタリスクまたはマイナス記号の間にスペースを挿入することもできます.次の各書き方では、区切り線を設定できます.
* * *
***
*****
- - -
---------------------------------------

 出力HTMLは
<hr>
<hr>
<hr>
<hr>
<hr>

 
リンク
Markdownは、行内、参照、自動の3つの形式のリンク構文をサポートします.行と参照リンクは、カッコを使用してテキストをリンクに変換します.
  [注意]Markdownのデフォルトで生成されたリンクは現在のページが開いているため、実現できません.blankですので、個人的にはそのままの方が便利です
【行内リンク】
行の形式は直接後ろで括弧で直接リンクをつなぎます
This is an [example link](http://cnblogs.com/)

 出力HTMLは
<p>This is an<a href="http://cnblogs.com/">example link</a></p>

【参考リンク】
  参照形式のリンクは、リンクの名前を付け、ファイルの他の場所でリンクの内容を定義できます.titleプロパティは選択的で、リンク名はアルファベット、数字、スペースで使用できますが、大文字と小文字を区別しません.
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>

【ダイレクトリンク】
  Markdownは比較的短い自動リンク形式をサポートしてURLと電子メールのポストを処理して、角カッコで包む限り、Markdownは自動的にそれをリンクに変えて、リンクの文字はリンクの位置と同じです
  [注意]URLの前に必ずhttp://を付けてください.そうしないとURLとして認識されません.
<http://cnblogs.com/>

 出力HTMLは
<a href="http://cnblogs.com/">http://cnblogs.com/</a>

 
画像
画像の文法とリンクが似ています.まず驚嘆符です!次は角カッコで、中には画像の代替文字が入っていて、次は普通のカッコで、中には画像のURLが入っていて、最後に引用符で包んで選択的な'title'文字を加えることができます.
【行内形式】
![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" />

 
コード#コード#
【code】
  反引用符`を使用してコードセグメント<code>をマークします.セグメント内の&、<と>はHTMLエンティティに自動的に変換されます.
`<p>`  `</p>`

 出力HTMLは
<code><p></code>  <code></p></code>

【pre】
  フォーマットされたコードブロックを作成するには、行ごとに4つのスペースまたはtabをインデントすればよいが、&、<および>も自動的にHTMLエンティティに変換される
<blockquote>
<p>For example.</p>
</blockquote>

 出力HTMLは
<pre><code>&lt;blockquote&gt;&lt;p&gt;For example.&lt;/p&gt;&lt;/blockquote&gt;</code></pre>

 
強調する
 Markdownアスタリスク*とベースラインを使用強調文字を表す記号として*または_囲まれた単語は<em>ラベルで囲まれ、2つの*または_で囲まれます.包むと<strong>に変換されます
*と_両方に空白があると、普通の記号として扱われるだけです.テキストの前後に通常のアスタリスクまたはベースラインを直接挿入する場合は、逆斜線を使用します.
\*em* **strong*\*

 出力HTMLは
<em>em</em><strong>strong</strong>

 
エスケープ
 markdownでは、、*などの特殊な用途を持つ記号があります.それらの本意を使用するには、前に反スラッシュを付ける必要があります.
Markdownでは、次の記号の前にスラッシュを付けて通常の記号の挿入を支援します.
\      
`      
*     
_     
{}     
[]     
()    
#      
+     
-     
.       
!

 
空の2つ
  markdownレイアウトを使用する場合、最初の行のインデントを実現するのが一般的です.一般的には、2つの全角スペース&emsp$emspを使用して実現されます.
 
に注意
  ブログ園でmarkdownを使ってブログを書く場合、インスタント表示の機能がないため、いくつかのスペースを多く叩いたため、<br>と解析されることが多い
css続編2
cssのテクニック