碼上歡樂
相關內容    簡體    繁體

Markdown樣式自定義及詳解-博客園、Typora、Markdown Nice

本文轉載自   查看原文   2021-01-13 11:33   809    博客園/ Markdown Here/ CSS/ Typora/ Markdown Nice/ Markdown 
標題: Markdown樣式自定義及詳解-博客園、Typora、Markdown Nice
作者: 夢幻之心星    sky-seeker@qq.com
標簽: [#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

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 框模型概述

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
    作者: 夢幻之心星    ky-seeker@qq.com
    標簽: [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;
}


/*================標題結束=============*/

參考資料

版權聲明：本文為「夢幻之心星」原創，依據 CC BY-NC-SA 4.0 許可證進行授權，轉載請附上原文出處鏈接及本聲明。

博客園地址：https://www.cnblogs.com/Sky-seeker
微信公眾號：關注微信公眾號，獲取即時推送
微信名：夢幻之心星 微信號：Sky-seeker


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 博客園自定義樣式 如何自定義博客園樣式 關於博客園自定義樣式 自定義博客園主題樣式 自定義博客園cnblog主題樣式Ⅱ（SimpleMemory） 自定義博客園主題樣式 博客園自定義樣式主題 -- cnblogs theme 博客園自定義推薦 可愛的博客園樣式之自定義“評論區”樣式 cute-cnblogs 番外篇-自定義博客園樣式美化
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM