前端學Markdown

来源:http://www.cnblogs.com/xiaohuochai/archive/2016/12/22/6211447.html
-Advertisement-
Play Games

[1]概述 [2]段落 [3]換行 [4]標題 [5]區塊 [6]列表 [7]分隔線 [8]鏈接 [9]圖片 [10]代碼 [11]強調 [12]空兩格 ...


前面的話

  我個人理解,Markdown就是一個富文本編輯器語言,類似於sass對於css的功能,Markdown也可以叫做HTML預處理器,只不過它是一門輕量級的標記語言,可以更簡單的實現HTML文檔。本文將詳細介紹Markdown的內容

 

概述

  Markdown的目標是實現易讀易寫,一份使用Markdown格式撰寫的文件應該可以直接以純文本發佈

  Markdown的語法全由一些符號所組成,它的語法種類很少,只對應HTML標記的一小部分。由於Markdown實際上就是簡化版的HTML,所以直接寫HTML也是可以的

 

段落

  不加任何符號的一段字元,就是一個段落。多個段落之間用空行分隔
  [註意]在markdown中,多個空行會合併為一個空行顯示

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>標簽方便,特別是到標題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》一書中,還專門針對<blockquote><q>進行了詳細的區分,但實際用的比較少
  但是,markdown對應區塊引用的實現上,並不能完整表達<blockquote>標簽的語義,應該可以引用多個段落,但實際上markdown的'>'符號只能引用一個段落

>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>

  [註意]如果在項目之間插入空行,那項目的內容會用<p>包起來

 

分隔線

  可以在一行中用三個以上的星號、減號、底線來建立一個分隔線,行內不能有其他東西。也可以在星號或是減號中間插入空格。下麵每種寫法都可以建立分隔線

* * *
***
*****
- - -
---------------------------------------

  輸出HTML為

<hr>
<hr>
<hr>
<hr>
<hr>

 

鏈接

  Markdown支持三種形式的鏈接語法:行內、參考和自動。行內和參考鏈接都使用角括弧把文字轉成鏈接

【行內鏈接】

  行內形式是直接在後面用括弧直接接上鏈接

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支持比較簡短的自動鏈接形式來處理網址和電子郵件信箱,只要是用方括弧包起來,Markdown就會自動把它轉成鏈接,鏈接的文字就和鏈接位置一樣

  [註意]在網址前一定要加http://,否則將不會被識別為URL

<http://cnblogs.com/>

  輸出HTML為

<a href="http://cnblogs.com/">http://cnblogs.com/</a>

 

圖片

  圖片的語法和鏈接很像。先是一個驚嘆號!,接著一個方括弧,裡面放上圖片的替代文字,接著一個普通括弧,裡面放上圖片的網址,最後還可以用引號包住並加上選擇性的'title'文字

【行內形式】

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

【參考形式】

![alt text][id]

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

  上面兩種方法都會輸出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>標簽包圍,用兩個* 或_包起來的話,則會被轉成<strong>

  如果* 和 _ 兩邊都有空白的話,它們就只會被當成普通的符號。如果要在文字前後直接插入普通的星號或底線,可以用反斜線:

\*em* **strong*\*

  輸出HTML為

<em>em</em><strong>strong</strong>

 

轉義

  在markdown中,有一些符號具有特殊的用途,如\、*等,如果要使用它們的本意,則需要在前面加一個反斜杠\來實現

  Markdown 支持以下這些符號前面加上反斜杠來幫助插入普通的符號

\   反斜線
`   反引號
*   星號
_   底線
{}  花括弧
[]  方括弧
()  括弧
#   井字型大小
+   加號
-   減號
.   英文句點
!   驚嘆號

 

空兩格

  使用markdown排版時,很常用的需求是實現首行縮進,一般使用兩個全形空格&emsp$emsp來實現




您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • lpStatuss是一個 的指針類型實例,並包含SensorDust欄位 ...
  • 前言 馬上2016年就要過去了,時間可是真快啊。 上次寫完 Identity 系列之後,反響還不錯,所以本來打算寫一個 ASP.NET Core 中間件系列的,但是中間遇到了很多事情。首先是 NPOI 的移植工作,移植過後還有一些Bug需要修複,然後一個事情是一個有關於分散式架構中消息一致性的一個中 ...
  • 這篇筆記是官方教程的延續筆記,所有代碼基於第一篇筆記的結尾代碼。旨在解決教程後面提出的五個問題。 一 . 用(X,Y)來取代原有的數字坐標 原來的數字坐標是這樣的: 現在的要求是把原來的代碼坐標改為二維坐標系的表達形式,並且在歷史記錄面板中打出轉換後的坐標。 如果只是為了輸出好看。只需要寫一個轉換方 ...
  • 前面的話   HTML文檔通常以類型聲明開始,該聲明將幫助瀏覽器確定其嘗試解析和顯示的HTML文檔類型。本文將詳細介紹文檔聲明DOCTYPE   特點   文檔聲明必須是HTML文檔的第一行、且頂格顯示,對大小寫不敏感。因為任何放在DOCTYPE前面 ...
  • 1、<img> <input> tags are self-closing. So that there is only one tag without a slash in front of the closing angle bracket. To be continued ... ...
  • 項目中碰到一個十分有趣的情形: 佈局要求是這樣:右邊創建新訂單是固定寬度80px,左側是自適應寬度,溢出隱藏。如下圖。 這裡佈局不用說肯定使用display:flex的。左側flex:1;右側width:80px;。 本來在我的機器上是各種ok的,可是交給後端的兄弟們後發現在他的機器上左側並沒有fl ...
  • 點擊按鈕彈出上傳文件的視窗 1.詳細描述 在頁面上設置一個“選擇文件”按鈕,點擊該按鈕,會彈出本地磁碟信息用於選擇文件。 2.代碼 3.操作示例 將代碼複製到W3CSchool的測試頁面,提交運行之後如圖:在查看結果頁面會出現“選擇文件”這個按鈕 之後點擊“選擇文件”後如圖:頁面上會出現彈窗,顯示本 ...
  • 因關註公眾號《HTML5學堂》看到這篇文章 “利用本地存儲,記錄滾動條的位置” ,便好奇敲來試試,然後又看了一些關於WebStorage的資料 附上這篇文章的地址 https://mp.weixin.qq.com/s/z34GRUZvDU2hCbH6Kc_ZDA 與大家共勉。 在網上搜了一些記錄滾動 ...
一周排行
    -Advertisement-
    Play Games
  • 示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後,項目結構如下所示: MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread] 特性用於需要與 COM 組件交互的應用程式,尤其是依賴單線程模型(如 Windows Forms 應用程式)的組件。在 STA 模式下,線程擁有自己的消息迴圈,這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • 在WinForm中使用全局異常捕獲處理 在WinForm應用程式中,全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理,可以有效地捕獲並處理未預見的異常,從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • 前言 給大家推薦一款開源的 Winform 控制項庫,可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫,同時也提供了工具類庫、擴展 ...
  • 說明 該文章是屬於OverallAuth2.0系列文章,每周更新一篇該系列文章(從0到1完成系統開發)。 該系統文章,我會儘量說的非常詳細,做到不管新手、老手都能看懂。 說明:OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友,請關註我吧(*^▽^*) ...
  • 一、下載安裝 1.下載git 必須先下載並安裝git,再TortoiseGit下載安裝 git安裝參考教程:https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit,Git客戶端,32/6 ...
  • 前言 在項目開發過程中,理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼,還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程:Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 一:背景 1. 講故事 前段時間有位朋友找到我,說他的窗體程式在客戶這邊出現了卡死,讓我幫忙看下怎麼回事?dump也生成了,既然有dump了那就上 windbg 分析吧。 二:WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死,入口門檻很低,後續往下分析就不一定了,不管怎麼說先用 !clrsta ...
  • 前言 人工智慧時代,人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API,工具不僅易於集成,還具備高效處理能力。 本文將介紹一款如何利用這些API,為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...