Markdown 利用HTML進行優雅排版

酸菜魚土豆大俠發表於2023-03-15
HTML

Markdown 利用HTML進行優雅排版

我在使用Markdown整理文件的時候發現，Markdown本身對文字格式的排版很單一，只有編號、字型加粗、固定標題格式等一些基礎的排版，使用不夠靈活，好在Markdown中可以使用HTML，所以我利用HTML增加了一些板塊，方便對文件進行標註或者分層整理。

一、標註重點

  • 功能描述：在不同位置插入圖片作為重點標註。

  • 實現效果：

Markdown 利用HTML進行優雅排版資料分析方法（這是重點！需要進行重點標記）

  • 程式碼如下：
<img align = "left"  src="https://i.iter01.com/images/87de912f8b3e4d857442ee546232e03db04494b2feb91c1dc3b6f928f654ebb5.png"  width="38" height="30">
  • 使用場景：

1、標記：可以使用不同的圖片進行標記。那麼這些圖片怎麼來呢，首先搜尋你想要的圖片，例如搜尋“紫色五角星圖片”，然後複製圖片到word文件中插入，點選圖片格式，刪除圖片背景後處理成你想要的樣子，最後在md中插入圖片調整圖片的位置和大小。

2、存放圖片：例如在用md寫的簡歷中插入證件照，只需將程式碼修改成如下形式：

<img align = "right"  src="這裡輸入圖片地址"  width="114" height="100">

3、文字圍繞圖片：透過HTML可以設定圖片的位置和大小。實際應用效果如下：

Markdown 利用HTML進行優雅排版輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字

輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字

二、內容分層

  • 功能描述：

有時候想用橫線劃分一下內容的層次，發現md中橫線與文字間的間距過大，且為固定不可調整。利用HTML可以調整橫線的寬度、顏色以及與文字的間距。

  • md中的效果：

  • 利用HTML實現效果：
專案
第一段輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字
第二段輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字
  • 程式碼如下：
<div>
    <div style="width:100%;height:4px;background:#a79d91;padding:0px 0px 0px 0px;"></div>
    <div style="margin-top:0.3%;font-size: 23px;color:#a79d91;font-family:'微軟雅黑';font-weight:500;">專案</div>
    <div title="第一段">
        <span style="font-size:18px;color:#dbd0bf;font-family:'微軟雅黑';font-weight:400;">第一段輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字</span>
    </div>
    <div title="第二段">
        <span style="font-size:14px;color:#8b8d8e;font-family:'微軟雅黑';font-weight:400;">第二段輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字</span>
    </div>
</div>
  • 應用場景：

1、新增線上或者線下的文字：示例中給出的是線下新增文字，實際上既可以線上又可以線下新增文字，例如這樣：

專案標題
專案實施計劃
第一段輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字
第二段輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字

2、單獨新增橫線：也可以單獨新增一條橫線，用於隔開模組與模組之間的內容。

  • 為什麼這樣設計：

用橫線分隔開後，整體的排版更清晰，模組間的邊界感更舒服，內容層次一目瞭然，有助於閱讀和理解。

三、文字居中加橫線

  • 功能描述：

文字始終在橫線中間，並且文字和橫線的樣式都可以調整。

  • 實現效果：
我是中間的文字,無論如何始終在中間
  • 程式碼如下：
<div style="width: 100%;height:4px;position: relative;background-color: #a79d91;margin: 2% 0 2% 0;text-align:center;">
     <span style="display:inline-block;background-color: #FFF;padding: 0 20px;color: #303133;transform: translateY(-50%);font-size: 23px;">我是中間的文字,無論如何始終在中間		        </span>
</div>
  • 應用場景：

1、段落標題：適合放在段落中標題的部分。

2、分隔符：或者作為分隔符放在段與段之間。效果如下：

輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字

下面是附錄內容

（1）輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字

（2）輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字

四、同一行分段調整

  • 功能描述：

在同一行中的右側新增一段文字，並且文字樣式可調整。

  • 實現效果：

專案名稱 2020-2023

  • 程式碼如下：
<h3><a class="md-header-anchor"></a>
    <span>專案名稱</span>
    <span style="display:inline-block;position: absolute;right:0;color:red;font-size:18px;font-weight:540;line-height:2.2rem;">2020-2023</span>
</h3>
  • 應用場景：

應用在段落標題中：右邊的文字可以起補充說明的作用，代替以往補充說明常用的“（）”，這樣整體排版也很對稱。

五、新增外框

  • 功能描述：

一個可以調整樣式的外框，裡面可以輸入可調整樣式的文字。

比如在這樣的樣式中，新增一個方框會顯得內容非常有條理，我時常會用md中的程式碼塊替代方框，但是程式碼塊中編輯的文字不可以調整樣式，所以做了下面的方框，既可以調整方框的樣式又可以調整裡面文字的樣式。

這是程式碼框：

輸入內容不可以調整樣式

這是HTML寫的方框：

第一段輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字
第二段輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字

程式碼解釋：padding：上右下左（間距）；front-size: 字號。

  • 程式碼如下：
<div style="width:100%;min-height:100px;background:#f8f8f8;border: 1px solid #e7eaed;" contenteditable="true"> 
<div title="第一段">
        <span style="font-size:18px;color:#dbd0bf;font-family:'微軟雅黑';font-weight:400;">第一段輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字</span>
    </div>
    <div title="第二段">
        <span style="font-size:14px;color:#8b8d8e;font-family:'微軟雅黑';font-weight:400;">第二段輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字輸入文字</span>
    </div>
</div>

六、合併單元格

  • 功能描述：

md中對錶格的處理很單一，只能進行簡單的行、列刪除和新增，表格中的文字也只有左、右、居中的格式調整，像是常用的合併單元格的操作就需要使用HTML來處理。

  • 實現效果：
型別 類別 函式名 描述
取整
向下
floor(expr) 返回小於expr的最大整數
向上
ceil(expr) 返回大於expr的最小整數
ceiling(expr) 返回大於expr的最小整數
四捨五入
round(expr) 四捨五入取整，後面沒有num預設取整
round(expr,num) 四捨五入取整，num為0表示取整
不四捨五入
truncate(expr,num) 不四捨五入取整，num為0表示取整
取小數
四捨五入
round(expr,num) 四捨五入取小數，num指取幾位小數
不四捨五入
truncate(expr,num) 不四捨五入取小數，num指取幾位小數
round(floor(expr*temp)/temp,num) 其中temp=10^num，num指取幾位小數
這是列合併 第四列
  • 程式碼如下：
<table>
<tr>
  <th>型別</th>
  <th>類別</th>
  <th>函式名</th>
  <th>描述</th>
</tr>
<tr>
  <td rowspan = '11'>取整（這是行合併） 
  </td>
</tr>
<tr>
  <td rowspan = '2'>向下
  </td>
</tr>
<tr>
  <td>floor(expr)</td>
  <td>返回小於expr的最大整數</td>
</tr>
<tr>
  <td rowspan = '3'>向上
  </td>
</tr>
<tr>
  <td>ceil(expr)</td>
  <td>返回大於expr的最小整數</td>
</tr>
<tr>
  <td>ceiling(expr)</td>
  <td>返回大於expr的最小整數</td>
</tr>
<tr>
  <td rowspan = '3'>四捨五入
  </td>
</tr>
<tr>
  <td>round(expr)</td>
  <td>四捨五入取整，後面沒有num預設取整</td>
</tr>
<tr>
  <td>round(expr,num)</td>
  <td>四捨五入取整，num為0表示取整</td>
</tr>
<tr>
  <td rowspan = '2'>不四捨五入 
  </td>
</tr>
<tr>
  <td>truncate(expr,num)</td>
  <td>不四捨五入取整，num為0表示取整</td>
</tr>
<tr>
  <td rowspan = '7'>取小數 
  </td>
</tr>
<tr>
  <td rowspan = '2'>四捨五入
  </td>
</tr>
<tr>
  <td>round(expr,num)</td>
  <td>四捨五入取小數，num指取幾位小數</td>
</tr>
<tr>
  <td rowspan = '4'>不四捨五入
  </td>
</tr>
<tr>
  <td>truncate(expr,num)</td>
  <td>不四捨五入取小數，num指取幾位小數</td>
<tr>
<tr>
  <td>round(floor(expr*temp)/temp,num)</td>
  <td>其中temp=10^num，num指取幾位小數</td>
<tr>
<tr>
  <td colspan = '3'>這是列合併</td>
  <td>第四列</td>
</tr>
</table>

注：文章中具體且完整的應用，會在後續文章中給出。

相關文章