1. 程式人生 > >博客園寫作避坑指南【持續更新】

博客園寫作避坑指南【持續更新】

white 無法識別 英文單詞 分享 頁面 done 正常 code don

以下是花了一晚上調格式之後的血淚經驗,如果之後有新的發現會持續更新……

關於英文單詞自動斷行

如果你和我一樣需要寫英文博文,你會發現遇到行尾的英文單詞全部被攔腰截斷,看上去怪怪的。

這是因為博客園默認模板CSS將mainContent設置為word-break:break-all,即強制斷行。
技術分享圖片

好在博客園開放了頁面定制CSS代碼,我們可以很方便地加入自己的設置來覆蓋掉默認設置,只需要在“設置 -> 頁面定制CSS代碼”中加入以下代碼:

#mainContent {
    word-break: normal;
}

現在,是不是看上去好多了?

但是,在某些情況下,強制斷行可能還是需要的。例如,我的文章中還插入了表格,表格中每一列都是超長的GUID,在word-break: normal

的設置下無法自動斷行,導致超出容器寬度,表格的大部分都無法正常顯示。
技術分享圖片

那我們就單獨為表格設置強制斷行吧:

#cnblogs_post_body table, .cnblogs-post-body table {
    word-break: break-all;
}

Done!

總之,通過F12查看CSS代碼定位到你需要更改樣式的元素,然後根據需要修改就可以了。

附:

強制不換行:{white-space: nowrap;}
自動換行:{word-wrap: break-word;word-break: normal;}
強制英文單詞斷行:{word-break: break-all;}

關於Markdown編輯器

以下是一些瑣碎的、可能並不會遇到、但是遇到了會很抓狂的小坑。

  1. 代碼塊前面的```必須無縮進,否則無法識別為代碼塊,或出現識別混亂。
  2. 代碼塊後面的```可以縮進,但和前面的```相差不能超過一個tab。
  3. 表格前必須有空行,否則無法識別為表格。
  4. 有序列表之間插入代碼塊會使代碼塊之後重新從1開始計序。通常這個問題可以通過在代碼塊前加tab解決,但由於博客園的Markdown還存在第1條所述問題,目前還沒有找到完美解決辦法。。如果有知道的小夥伴希望可以分享一下(?ω?)

博客園寫作避坑指南【持續更新】