撰寫 Hexo 文章,Markdown + HTML 特殊語法

使用者以 Markdown 語法撰寫 Hexo 文章,但是遇到不支援或預期外的情境該怎麼辦?

網路上有許多 Markdown 語法的教學文章,這邊就不贅述,依照撰寫 Hexo 文章遇到的問題,提出解法。

文字顏色

Markdown 不支援文字色彩的變更,但是我們要記得,Hexo 會將 Markdown 檔案編譯成 HTML 檔案。因此修改文字顏色可以依靠添加 HTML 語法。

1
2
3
4
5
6
<span style="color: #ff0000">紅色</span>
<span style="color: #ffff00">黃色</span>
<span style="color: #00ff00">綠色</span>
<span style="color: #00ffff">天藍色</span>
<span style="color: #0000ff">藍色</span>
<span style="color: #ff00ff">洋紅色</span>
紅色 黃色 綠色 天藍色 藍色 洋紅色

這邊提供幾個選擇顏色的實用網站:

  • 網頁色碼表及色碼轉換工具
  • Adobe Color:可以幫你配出漂亮的五種色彩。
  • coolors:預先配好的色彩主題。
  • Cohesive Colors:幫助協調配色。
  • 更多

移除超連結

想輸入 http://localhost:4000/ 文字段,又不想被編譯成超連結該怎麼辦?

方法一:行內程式碼

使用兩個 `(重音符 backquote) 包圍住網址。即會出現 http://localhost:4000/

方法二:使用 HTML 和 JavaScript 語法

簡易寫法

1
<a onclick="return false;">http://localhost:4000/</a>

相當於:

1
2
3
obj.onclick = function(){
return false;
}

http://localhost:4000/

優雅寫法

寫個客製化的 js 檔案,取消連結的預設事件。

1
2
<!-- Hexo 文章 -->
<a id="prevent-default">http://localhost:4000/</a>
1
2
3
4
5
6
// javascript 檔案
const stoppedLink = document.getElementById("prevent-default");
stoppedLink.addEventListener("click", stopLinkAction);
function stopLinkAction(e){
e.preventDefault();
}

http://localhost:4000/

錯誤寫法

直接將 e.preventDefault(); 寫在 onclick 裡。

1
<a onclick="e.preventDefault();">http://localhost:4000/</a>

onclick 後面的事件會被包裹到一個匿名函數中執行,相當於:

1
2
3
obj.onclick = function(){
e.preventDefault();
}

因為 e 並沒有傳進 function 內,點擊乍看之下沒有反應,但是會一直報錯:Uncaught ReferenceError: e is not defined

http://localhost:4000/

使用 href (不建議)

實際上不建議使用 href。瀏覽器會對有 href<a> 連結產生 cursor:pointer 的效果,造成鼠標的改變。還可以透過 tab 按鍵選取到該連結。
點擊有 href="#" 的連結會回到該頁面頂端。它隱含指向網頁自己的作用。

1
2
3
<a href="#">http://localhost:4000/</a>
<a href="javascript:void(0);">http://localhost:4000/</a>
<a href="javascript:;">http://localhost:4000/</a>

依序為:
http://localhost:4000/
http://localhost:4000/
http://localhost:4000/

參考網站:
<a href=“javascript:void(0)”> 这样写为什么不好?

文章中的 <> 標籤符號

如上面的「<a href=“javascript:void(0)”> 这样写为什么不好?」,可以藉由在 > 符號前增加 \ 反斜線達成。如:<a href="javascript:void(0)"\> 这样写为什么不好?

否則只會出現「这样写为什么不好?」

文章中的 >> 符號

想打出「前往」的感覺,如:
>> 下一個網站~

一樣是在 > 符號前增加 \ 反斜線。如:\>>下一個網站~

否則會出現如下:

下一個網站~

表格中的換行

不是用 \n 而是 <br>。例如如下,第三句話前面有加 <br>

col1 col2
row1 第一句話。
row2 第一句話,寫一些東西。第二句話,喜歡吃美食。
第三句話,希望不要變胖。

持續不定期更新中…