Markdown樣式自定義及詳解-部落格園、Typora、Markdown Nice
阿新 • • 發佈：2021-01-09
標題: Markdown樣式自定義及詳解-部落格園、Typora、Markdown Nice
作者: 夢幻之心星 [email protected]
標籤: [#Markdown,#CSS,#部落格園,#Typora,#Markdown Nice,#Markdown Here]
目錄: [Markdown]
日期: 2021-01-09
背景說明
- 對於技術寫作，經常需要同步到多個平臺，這就需要樣式不受平臺限制。最好一次寫作排版，多平臺釋出。雖然網上存在線上編輯器，但是對於不開源的平臺，意味著平臺關閉後便無法排版。而持久的技術部落格寫作，就需要一個開源或離線平臺來進行文件的編輯和排版。
- Markdown 是一種輕量級標記語言， 允許人們使用易讀易寫的純文字格式編寫文件，在 2004 由約翰·格魯伯（John Gruber）建立。 廣泛應用於部落格文章（簡書、CSDN、部落格園）、微信公眾號文章、專案文件、書籍、筆記（印象筆記、有道雲筆記、熊掌記）、郵件、線上協作文件（騰訊文件、石墨文件）、互動式文件、搭建個人部落格等眾多寫作場景。
- 提到標記語言，就不得不說明一下Web 技術的基礎，Web 技術的基礎為 HTML 、 CSS 、 HTTP 。 HTML（HyperText Markup Language，超文字標記語言）用於描述、定義頁面內容。 CSS（Cascading Style Sheets，層疊樣式表）用於描述頁面內容的外觀與展示。HTTP（Hypertext Transfer Protocol，超文字傳輸協議）用於傳輸網頁中的 HTML 及其他超媒體文件。 其思想就是把頁面內容、頁面樣式、頁面傳輸進行分離。
- Markdown 是一種輕量級標記語言，語法簡單易學，採用CSS進行樣式渲染。因此，要更改樣式，就需要更改CSS，而要更改CSS，就需要先了解HTML。Markdown 語法對應於HTML標籤子集 ，因此，只需要瞭解Markdown的CSS對應的HTML標籤即可自由的配置CSS。
- 網上存在Markdown格式化工具網站，例如Md2All、Markdown Nice、可能吧公眾號 Style等。但也有缺點，一旦斷網，便無法使用。而自定義CSS，就可以做到所見即所得，自由掌握在自己手中。網上大多數教程一般針對於業內人員，門檻較高，而對於外行人員，進行詳細學習成本較高。因此，此文對Markdown 所涉及到的 HTML和 CSS內容進行簡要的說明介紹，既是對自己學習過程的記錄，也是對外行入門的引導。
網頁介紹
HTML
- 定義了網頁內容的含義和結構。僅列舉 Markdown 中的部分元素，詳細內容可參考HTML 參考手冊
標題
| 標籤 | 描述 |
|---|---|
<h1><h2>, <h3>, <h4>, <h5>, <h6> |
六個不同級別的標題，<h1>級別最高，而 <h6>級別最低 |
<hr> |
段落級元素間的主題轉換,表現為水平線 |
格式
| 標籤 | 描述 |
|---|---|
<p> |
定義一個段落 |
<b> |
大多數瀏覽器將文字顯示為粗體 |
<blockquote> |
塊級引用元素，代表其中的文字是引用內容。 |
<code> |
呈現一段計算機程式碼。 |
<em> |
標記出需要使用者著重閱讀的內容，定義強調文字。 |
<i> |
定義斜體文字 |
<kbd> |
定義鍵盤文字 |
<mark> |
定義帶有記號的文字 |
<pre> |
表示預定義格式文字。元素中的文字按照原檔案的編排。 |
<q> |
表示一個封閉的並且是短的行內引用的文字 |
<s> |
定義加刪除線的文字 |
<u> |
定義下劃線文字 |
<strong> |
定義語氣更為強烈的強調文字 |
<sub> |
定義下標文字 |
<sup> |
定義上標文字 |
<time> |
定義一個日期/時間 |
影象
| 標籤 | 描述 |
|---|---|
<img> |
定義影象 |
連結
| 標籤 | 描述 |
|---|---|
<a> |
定義一個連結 |
列表
| 標籤 | 描述 |
|---|---|
<ul> |
定義一個無序列表 |
<ol> |
定義一個有序列表 |
<li> |
表示列表裡的專案。必須包含在一個父元素裡，如有序或無序列表 |
<dl> |
定義一個定義列表 |
<dt> |
定義一個定義定義列表中的專案 |
<dd> |
定義定義列表中專案的描述,必須跟著一個 <dt> 元素 |
表格
| 元素 | 描述 |
|---|---|
<table> |
定義一個表格 |
<caption> |
定義表格標題 |
<th> |
定義表格中的表頭單元格 |
<tr> |
定義表格中的行 |
<td> |
定義表格中的單元 |
<thead> |
定義表格中的表頭內容 |
<tbody> |
定義表格中的主體內容 |
<tfoot> |
定義表格中的表注內容（腳註） |
<col> |
定義表格中一個或多個列的屬性值 |
<colgroup> |
定義表格中供格式化的列組 |
CSS
- 僅列舉 Markdown 中的部分屬性，詳細內容可參考CSS 參考手冊
CSS 章節概述
| 章 | 節 |
|---|---|
| CSS 基礎教程 | CSS 簡介、CSS 基礎語法、CSS 高階語法、CSS 派生選擇器、CSS id 選擇器、CSS 類選擇器、CSS 屬性選擇器、CSS 建立 |
| CSS 樣式 | CSS 背景、CSS 文字、CSS 字型、CSS 連結、CSS 列表、CSS 表格、CSS 輪廓 |
| CSS 框模型 | CSS 框模型概述、CSS 內邊距、CSS 邊框、CSS 外邊距、CSS 外邊距合併 |
| CSS 定位 | CSS 定位概述、CSS 相對定位、CSS 絕對定位、CSS 浮動 |
| CSS 選擇器 | CSS 元素選擇器、CSS 選擇器分組、CSS 類選擇器詳解、CSS ID 選擇器詳解、CSS 屬性選擇器詳解、CSS 後代選擇器、CSS 子元素選擇器、CSS 相鄰兄弟選擇器、CSS 偽類、CSS 偽元素 |
| CSS 高階 | CSS 對齊、CSS 尺寸、CSS 分類、CSS 導航欄、CSS 圖片庫、CSS 圖片透明、CSS 媒介型別、CSS 注意事項、CSS 總結 |
| CSS 參考手冊 | CSS 參考手冊、CSS 選擇器、CSS 聽覺參考手冊、CSS 網路安全字型、CSS 單位、CSS 顏色、CSS 顏色值、CSS 顏色名、CSS 顏色十六進 |
CSS 選擇器
| 選擇器 | 例子 | 例子描述 |
|---|---|---|
| element | p | 選擇所有 <p> 元素 |
| element,element | div,p | 選擇所有 <div> 元素和所有 <p> 元素 |
| element element | div p | 選擇 <div> 元素內部的所有 <p> 元素 |
| element>element | div>p | 選擇父元素為 <div> 元素的所有 <p> 元素 |
| element+element | div+p | 選擇緊接在 <div> 元素之後的所有 <p> 元素 |
| element1~element2 | p~ul | 選擇前面有 <p> 元素的每個 <ul> 元素 |
| :hover | a:hover | 選擇滑鼠指標位於其上的連結 |
| :before | p:before | 在每個 <p> 元素的內容之前插入內容 |
| :after | p:after | 在每個 <p> 元素的內容之後插入內容 |
| :first-of-type | p:first-of-type | 選擇屬於其父元素的首個 <p> 元素的每個 <p> 元素 |
| :last-of-type | p:last-of-type | 選擇屬於其父元素的最後 <p> 元素的每個 <p> 元素 |
| :only-child | p:only-child | 選擇屬於其父元素的唯一子元素的每個 <p> 元素 |
| :nth-child(n) | p:nth-child(2) | 選擇屬於其父元素的第二個子元素的每個 <p> 元素 |
CSS 樣式
CSS 邊框屬性
| 屬性 | 描述 |
|---|---|
| border | 設定所有的邊框屬性 |
| border-bottom | 設定所有的下邊框屬性 |
| border-bottom-color | 設定下邊框的顏色 |
| border-bottom-style | 設定下邊框的樣式 |
| border-bottom-width | 設定下邊框的寬度 |
| border-color | 設定四條邊框的顏色 |
| border-left | 設定所有的左邊框屬性 |
| border-right | 設定所有的右邊框屬性 |
| border-top | 設定所有的上邊框屬性 |
| outline | 設定所有的輪廓屬性 |
| border-bottom-left-radius | 定義邊框左下角的形狀 |
| border-radius | 設定邊框四個角的屬性 |
Box 屬性
| 屬性 | 描述 |
|---|---|
| overflow-x | 如果內容溢位了元素內容區域，是否對內容的左/右邊緣進行裁剪 |
| overflow-y | 如果內容溢位了元素內容區域，是否對內容的上/下邊緣進行裁剪 |
| overflow-style | 規定溢位元素的首選滾動方法 |
CSS 字型屬性
| 屬性 | 描述 |
|---|---|
| font | 規定字型屬性 |
| font-family | 規定文字的字體系列 |
| font-size | 規定文字的字型尺寸 |
| font-style | 規定文字的字型樣式 |
| font-weight | 規定字型的粗細 |
CSS 列表屬性
| 屬性 | 描述 |
|---|---|
| list-style | 設定所有的列表屬性 |
| list-style-image | 將圖象設定為列表項標記 |
| list-style-position | 設定列表項標記的放置位置 |
| list-style-type | 設定列表項標記的型別 |
CSS 外邊距屬性
| 屬性 | 描述 |
|---|---|
| margin | 設定所有外邊距屬性 |
| margin-bottom | 設定元素的下外邊距 |
| margin-left | 設定元素的左外邊距 |
| margin-right | 設定元素的右外邊距 |
| margin-top | 設定元素的上外邊距 |
CSS 內邊距屬性
同CSS 外邊距屬性。
CSS 定位屬性
| 屬性 | 描述 |
|---|---|
| display | 規定元素應該生成的框的型別 |
| overflow | 規定當內容溢位元素框時發生的事情 |
CSS 文字屬性
| 屬性 | 描述 |
|---|---|
| color | 設定文字的顏色 |
| letter-spacing | 設定字元間距 |
| line-height | 設定行高 |
| text-align | 規定文字的水平對齊方式 |
| text-indent | 規定文字塊首行的縮排 |
| white-space | 規定如何處理元素中的空白 |
| word-spacing | 設定單詞間距 |
| text-align-last | 設定如何對齊最後一行或緊挨著強制換行符之前的行 |
| text-outline | 規定文字的輪廓 |
| text-overflow | 規定當文字溢位包含元素時發生的事情 |
| text-wrap | 規定文字的換行規則 |
| word-break | 規定非中日韓文字的換行規則 |
| word-wrap | 允許對長的不可分割的單詞進行分割並換行到下一行 |
CSS 框模型
CSS 單位
| 單位 | 描述 |
|---|---|
| % | 百分比 |
| in | 英寸 |
| cm | 釐米 |
| mm | 毫米 |
| em | 相對於當前字型的倍數 |
| pt | 磅 (1 pt 等於 1/72 英寸) |
| px | 畫素 (計算機螢幕上的一個點) |
CSS 顏色
| 顏色名 | 描述 |
|---|---|
| rgb(x,x,x) | RGB 值 ，如 rgb(255,0,0) |
| rgb(x%, x%, x%) | RGB 百分比值 ，如 rgb(100%,0%,0%) |
| #rrggbb | 十六進位制數 ，如 #ff0000 |
- HTML 和 CSS 顏色規範中定義了 147 中顏色名（17 種標準顏色加 130 種其他顏色）。
- 17 種標準色是 aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow。
樣式配置
樣式使用說明
- 樣式為多平臺通用樣式，只需要批量替換祖先選擇器就可以遷移到不同的平臺
- 因為每個元素都使用了選擇器，因此不會影響介面的正常顯示
樣式具體程式碼
/********************************************
---
標題: Markdown CSS 自定義及註解.css
作者: 夢幻之心星 [email protected]
標籤: [Markdown,CSS,部落格園,Typora,Markdown_Nice,Markdown_Here]
目錄: [Markdown]
日期: 2021-1-3
版本：V1.6
說明：
- 祖先選擇器：使用祖先選擇器，使樣式僅適用於特定平臺，而不會影響其他平臺和控制元件元件
- Typora：[#write]
- Markdown_Nice：[#nice]
- Markdown_Here：[.markdown-here-wrapper]
- 部落格園：[#cnblogs_post_body]
- 部落格園:面板為CodingLife
- Typora:主題資料夾下建立的“base.user.css”應用於所有主題，"{theme-css-name}.user.css"僅應用於相應主題。
- markdown_here:不支援[::before]和[::after]，需要將字首和字尾合併到本體中。
---
********************************************/
/********************************************
******全域性屬性
******程式碼
******段落格式
******連結
******圖片
******引用
******列表
******定義列表
******任務列表
******目錄
******表格
******標題
******數學公式
******畫圖
********************************************/
/*================程式碼開始=============*/
#cnblogs_post_body pre {
line-height: 1.2em;
}
#cnblogs_post_body pre,
#cnblogs_post_body code {
font-family: Consolas, Inconsolata, Courier, monospace;
}
/*程式碼整體樣式*/
#cnblogs_post_body code {
font-size: 14px;
margin: 0 0.15em;
padding: 2px 4px;
border: 1px solid #eaeaea;
/*圓角框*/
border-radius: 3px;
background: #EFF2F3!important;
}
/*程式碼塊*/
#cnblogs_post_body pre code {
white-space: pre;
/*如果內容被修剪，顯示滾動條以便檢視其餘內容。*/
overflow: auto-flow;
padding: 0.5em 0.7em;
display: block !important;
}
/* 行內程式碼、列表內程式碼 */
#cnblogs_post_body p code,
#cnblogs_post_body li code {
font-size: 14px!important;
color: #3594f7 !important;
padding: 0 2px;
display: inline;
}
/*================程式碼結束=============*/
/*================段落格式開始=============*/
/********暫無：下標、上標、高亮、腳註********/
/*段落*/
#cnblogs_post_body p {
color: #595959;
padding-top: 1px !important;
padding-bottom: 1px !important;
/*字間距*/
letter-spacing: 0px;
font-size: 16px;
/*詞間距*/
word-spacing: 0px;
/*首行縮排*/
text-indent: 0em;
/*文字對齊 */
text-align: justify;
/* 空白字元的顯示 */
white-space: pre-wrap !important;
/* 長度超過一行的單詞換行方法 */
word-wrap: break-word !important;
/* 非中日韓單詞換行方法 */
word-break: break-all !important;
}
/* 加粗 */
#cnblogs_post_body strong {
font-weight: bold;
color: #3594f7 !important;
}
#cnblogs_post_body strong::before {
content: "「";
}
#cnblogs_post_body strong::after {
content: "」";
}
/* 斜體 */
#cnblogs_post_body em {
font-style: italic;
color: #3594f7 !important;
}
#cnblogs_post_body em::before {
content: "『";
}
#cnblogs_post_body em::after {
content: "』";
}
#cnblogs_post_body strong em::before,
#cnblogs_post_body em strong::before {
content: none;
}
#cnblogs_post_body strong em::after,
#cnblogs_post_body em strong::after {
content: none;
}
/* 刪除線 */
#cnblogs_post_body s {
font-style: italic;
color: red !important;
}
/*水平分隔線*/
#cnblogs_post_body hr {
/*元素的高度*/
height: 1px;
/*外邊距*/
margin: 1em 0px;
/*內邊距*/
padding: 0;
/*邊框*/
border: none;
border-top: 2px solid #3baafa !important;
}
#cnblogs_post_body kbd {
font-family: monospace;
background-color: #ebdfdf !important;
border: 1px solid #ccc !important;
border-radius: 5px;
padding: 1px 5px;
}
#cnblogs_post_body video {
width: auto;
height: auto;
border: 1px solid #3baafa;
object-position: center center;
object-fit: contain;
margin: 0;
padding: 0;
display: block;
}
/*================段落格式結束=============*/
/*================連結開始=============*/
/*超連結*/
#cnblogs_post_body a {
text-decoration: underline;
font-size: 16px;
/*[normal|break-word]*/
word-wrap: break-word;
color: #1890ff !important;
/*[normal|bold]*/
font-weight: normal;
border-bottom:none;
}
/*================連結結束=============*/
/*================圖片開始=============*/
/*圖片*/
#cnblogs_post_body img {
display: block;
margin: 5px;
/*圖片邊框圓角化*/
border-radius: 6px;
/*圖片自動縮放*/
object-fit: contain;
/*圖片外邊框陰影化*/
box-shadow: 2px 2px 7px #999;
}
/* 圖片描述文字 僅Markdown_Nice支援 */
#cnblogs_post_body figcaption {
margin-top: 10px;
/*塊級元素，此元素前後會帶有換行符*/
display: block;
text-align: center;
color: #999;
font-size: 13px;
}
/*圖片描述文字之前 僅Markdown_Nice支援 */
#cnblogs_post_body figcaption:before {
content: "";
background-image: url(https://cdn.jsdelivr.net/gh/Sky-seeker/Pictrue_Bed/ico/MarkDown_CSS-img_fig_before.png);
/*行內塊元素*/
display: inline-block;
width: 18px;
height: 18px;
background-size: 18px;
/*背景影象不會重複*/
background-repeat: no-repeat;
background-position: center;
margin-right: 5px;
margin-bottom: -5px;
}
/*================圖片結束=============*/
/*================引用開始=============*/
/*引用塊*/
#cnblogs_post_body blockquote {
text-align: left;
border-left: 3px solid #00000066!important;
background: RGBA(0, 0, 0, 0.05) !important;
display: block;
margin: 0;
padding: 2px 5px !important;
}
/*引用塊的文字內容*/
#cnblogs_post_body blockquote p {
color: #777;
/*首行縮排*/
text-indent: 0em;
}
#cnblogs_post_body q {
border-left: 6px solid #ddd;
padding: 0 1em;
color: #777;
quotes: none;
}
/*================引用結束=============*/
/*================列表開始=============*/
/* 列表中的專案樣式：包括無序字首點、有序字首數、列表內容*/
#cnblogs_post_body li,
#cnblogs_post_body li p {
font-size: 15px;
font-weight: normal;
color: #595959;
margin: 0;
}
#cnblogs_post_body ul,
#cnblogs_post_body ol {
font-size: 15px;
color: #595959;
margin-left: 0px;
margin-bottom: 0.1em;
padding-left: 3em;
}
#cnblogs_post_body ul ul,
#cnblogs_post_body ol ul,
#cnblogs_post_body ul ol,
#cnblogs_post_body ol ol {
padding-left: 1.5em;
}
#cnblogs_post_body blockquote ol,
#cnblogs_post_body blockquote ul {
padding-left: 1.5em;
}
/* 有序列表--一級列表字首數字樣式 Markdown Nice*/
#cnblogs_post_body ol li {
list-style-type: decimal;
/*[decimal|upper-roman|lower-alpha]*/
}
/* 有序列表--二級列表字首數字樣式*/
#cnblogs_post_body ol ol li,
#cnblogs_post_body ul ol li {
list-style-type: lower-roman;
}
/*================列表結束=============*/
/*================定義列表開始=============*/
/* 定義一個定義列表 */
#cnblogs_post_body dl {
padding: 0;
}
/* 定義一個定義定義列表中的專案 */
#cnblogs_post_body dl dt {
font-size: 1em;
font-weight: bold;
font-style: italic;
}
/* 定義定義列表中專案的描述 */
#cnblogs_post_body dl dd {
margin: 0 0 1em;
padding: 0 1em;
}
/*================定義列表結束=============*/
/*================任務列表開始=============*/
/*================任務列表結束=============*/
/*================目錄開始=============*/
/*================目錄結束=============*/
/*================表格開始=============*/
/* 定義一個表格 */
#cnblogs_post_body table {
border-collapse: collapse;
display: table!important;
width: -webkit-fill-available;
}
/* 定義表格的行 */
#cnblogs_post_body table tr {
background-color: white;
margin: 0;
padding: 0;
}
/* 表格的表頭 */
#cnblogs_post_body th {
border: 2px solid #ccc !important;
font-weight: bold;
background-color: #f0f0f0;
font-size: 16px;
padding: 5px 10px;
}
/* 表格的主體內容 */
#cnblogs_post_body tbody {
margin: 10;
padding: 0;
}
/* 表格主體內容單元 */
#cnblogs_post_body tr td {
border: 1px solid #ccc;
font-size: 16px;
color: #595959;
padding: 5px 10px;
}
/*隔行改變行的背景色*/
#cnblogs_post_body table tr:nth-child(2n) {
background-color: #f8f8f8;
}
/*================表格結束=============*/
/*================標題開始=============*/
#cnblogs_post_body h1,
#cnblogs_post_body h2,
#cnblogs_post_body h3,
#cnblogs_post_body h4,
#cnblogs_post_body h5,
#cnblogs_post_body h6 {
margin-top: 20px;
margin-bottom: 15px;
padding: 0px;
font-weight: bold;
}
/* 一級標題 */
#cnblogs_post_body h1 {
display: block;
font-size: 24px;
text-align: left;
color: #40b8fa;
line-height: 1.5;
/* 一級標題文字內容之前 h1 ::before */
padding-left: 45px!important;
background-image: url(https://cdn.jsdelivr.net/gh/Sky-seeker/Pictrue_Bed/ico/MarkDown_CSS-h1_before.png);
background-size: 40px;
background-repeat: no-repeat;
background-position: center left;
}
/* 二級標題 */
#cnblogs_post_body h2 {
display: block;
border-bottom: 3px solid #40b8fa;
font-size: 22px;
color: #40b8fa !important;
/*相對定位元素的定位是相對其正常位置。*/
/* position: relative;*/
/* 二級標題文字內容之前 h2 ::before */
padding-left: 40px!important;
background-image: url(https://cdn.jsdelivr.net/gh/Sky-seeker/Pictrue_Bed/ico/MarkDown_CSS-h2_before.png);
background-size: 35px;
background-repeat: no-repeat;
background-position: center left;
/* 二級標題 字首 將 [#nice_h2 .prefix ] 中的[.prefix]替換為[::before]
/* 二級標題 字首 將 [#nice_h2 .suffix ] 中的[.prefix]替換為[::after] */
/*
content: "";
background-image: url();
background-size: 20px;
background-repeat: no-repeat;
width: 20px;
height: 20px;
display: inline-block;
margin-left: 6px;
margin-right: 6px;
margin-bottom: -4px;
*/
}
/* 三級標題 */
#cnblogs_post_body h3 {
font-size: 20px;
font-weight: bold;
width: fit-content;
border-bottom: 2px solid RGBA(79, 177, 249, 0.65);
color: #40b8fa !important;
/*三級標題文字內容之前 h3 ::before */
padding-left: 30px!important;
background-image: url(https://cdn.jsdelivr.net/gh/Sky-seeker/Pictrue_Bed/ico/MarkDown_CSS-h3_before.png);
background-size: 25px;
background-repeat: no-repeat;
background-position: center left;
}
/* 四級標題*/
#cnblogs_post_body h4 {
font-size: 18px;
/* 四級標題文字內容之前 h4::before */
padding-left: 30px!important;
background-image: url(https://cdn.jsdelivr.net/gh/Sky-seeker/Pictrue_Bed/ico/MarkDown_CSS-h4_before.png);
background-size: 25px;
background-position: left;
background-repeat: no-repeat;
background-position: center left;
}
/* 五級標題 */
#cnblogs_post_body h5 {
font-size: 16px;
/* 五級標題文字內容之前 h4::before */
padding-left: 20px!important;
background-image: url(https://cdn.jsdelivr.net/gh/Sky-seeker/Pictrue_Bed/ico/MarkDown_CSS-h5_before.png);
background-size: 15px;
background-position: left;
background-repeat: no-repeat;
background-position: center left;
}
/* 六級標題*/
#cnblogs_post_body h6 {
font-size: 16px;
}
/*================標題結束=============*/
參考資料
- 創始人John Gruber的Markdown 語法說明
- GitHub-flavored-markdown
- CSS 高階文字排版
- W3school CSS 教程
- 菜鳥教程 CSS 教程
- 選擇器
- pre code 的解釋
- 偽元素和偽類
版權宣告：本文為「夢幻之心星」原創，依據 CC BY-NC-SA 4.0 許可證進行授權，轉載請附上原文出處連結及本宣告。
部落格園地址：https://www.cnblogs.com/Sky-seeker
微信公眾號：關注微信公眾號，獲取即時推送