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

發表於 更新於 分類於
AdSense

前言

使用者以 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 第一句話，寫一些東西。第二句話，喜歡吃美食。
第三句話，希望不要變胖。

持續不定期更新中…