前端學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
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...