1. 程式人生 > >FW: 為簡書Markdown文字新增顏色

FW: 為簡書Markdown文字新增顏色

  PC版預覽1     PC版預覽2

給文字加顏色

  • 新增紅色

效果: \color{red}{red}
寫法: $\color{red}{red}$

  • 新增綠色

效果: \color{green}{green}
寫法: $\color{green}{green}$

  • 新增藍色

效果: \color{blue}{blue}
寫法: $\color{blue}{blue}$

  • 新增清漾青(支援更豐富的16進位制顏色)

效果: \color{#376956}{cyan-blue}
寫法: $\color{#376956}{cyan-blue}$

為句子中的字加顏色

  • 為句子內的中文字元加顏色

效果: \color{#4285f4}{更}\color{#ea4335}{豐}\color{#fbbc05}{富}\color{#4285f4}{的}\color{#34a853}{顏}\color{#ea4335}{色}
寫法: $\color{#4285f4}{更}\color{#ea4335}{豐}\color{#fbbc05}{富}\color{#4285f4}{的}\color{#34a853}{顏}\color{#ea4335}{色}$

 
  • 為句子內的英文字元加顏色, 字元會變為襯線體加斜體 haha...

效果: \color{#4285f4}{G}\color{#ea4335}{o}\color{#fbbc05}{o}\color{#4285f4}{g}\color{#34a853}{l}\color{#ea4335}{e}
寫法: $\color{#4285f4}{G}\color{#ea4335}{o}\color{#fbbc05}{o}\color{#4285f4}{g}\color{#34a853}{l}\color{#ea4335}{e}$

小結:

事實上,開啟瀏覽器開發者工具, 我們會發現 為上面的文字新增顏色, 並不是用網頁中css屬性控制的, 而是簡書Markdown編輯器把字元轉換成了圖片, 所以這種改變顏色的寫法並不能套用到font-size等其它css屬性上, 改變圖片顏色的方法, 就當是簡書markdown編輯器