使用 StackEdit 將 markdown 輸出成 HTML 上傳到 blogger 時,blogger 會自動用 <br>
將 HTML 當中的 <p>
取代掉,導致文章排版走樣。
我們可以利用 blogger 後台的管理頁面修正此問題。
目錄:
(一) 問題背景
使用 StackEdit 將 markdown 輸出成 HTML 上傳到 blogger 時,blogger 會自動用 <br>
將 HTML 當中的 <p>
取代掉,導致文章排版走樣。
早在 2010 年就已經有人抱怨過 blogger 內建編輯器的這個問題,詳情請見這篇討論:
How can I make blogger insert p tags instead of br when using rich text editor?
(二) 實際範例
下面用附圖片的範例解釋這個問題,我們使用這篇文章當範例。
用 StackEdit 開啟這篇文章後,在 StackEdit 右方可預覽畫面,如下圖,簡稱為 圖A。
在選單欄選擇 publish,發佈到 blogger。開啟 blogger 發現文章排版走樣了,如下圖,簡稱為 圖B。
很明顯圖A跟圖B的差別在於:每一段文章之間少了一行空白。
為了研究到底是哪裡出問題,在選單欄選擇 export to desk, 選擇 as HTML,開啟該 HTML,如下圖,簡稱為 圖C。
圖C跟圖A一樣,排版都正常,這表示 StackEdit 輸出的 HTML 沒有問題。
接下來我們看看 圖C的原始碼,如下圖,簡稱圖C2。
圖C2中,每一段文章都被 <p>
包住。
接下來我們用 blogger 的內建編輯器看看圖B的原始碼,如下圖,簡稱圖B2。
圖B2中,每一段文章的 <p>
被拿掉了,取而代之的是結尾的<br/>
。
這下很明顯問題就是出在 blogger 了。
(三) 解決方法
從剛剛這篇討論:How can I make blogger insert p tags instead of br when using rich text editor? 的結論得知,用 <br>
將 HTML 當中的 <p>
取代掉是 blogger 編輯器內建的行為,我們無法更改,故理論上無法解決。
但我們可以利用一些方法 workaround 修正問題,方法如下:
# 到 blogger 管理後台,隨便編輯一篇文章
# 在右方選單的 option 中,找到 line breaks 那欄位
# 選擇 Press "Enter" for line breaks`
(此步驟只須執行一次即可,Blogger 會記住這些設定。)
接著我們再回到 StackEdit,重新 publish 一次剛剛那篇文章,此時文章排版回復正常了!
(四) 補充說明
如果用 blogger 內建編輯器編輯已發布的文章,則很有可能該文章排版又會跑掉。
不過在我們的 blog workflow 中,為了能跟 dropbox 同步,我們使用 StackEdit 編輯與上傳文章, 不會用到 blogger 內建編輯器,所以這個問題對我們來說不會造成太大影響。