iT邦幫忙

0

Markdown編輯器中,編輯、預覽、實際發文,三種都長不一樣

問題

編輯文字的時候字體比較小,點預覽的時候會變大且字體不同,無法正確排版確認想要的行數和分段,這就算了,真正貼出文章的時候文章的寬度還會減小,雖然說也習慣了,但是真的挺不方便的。

比方說

  1. 編輯的時候,A段落有3.5行;預覽的時候,A段落有4行;實際文章,A段落有4.5行。
  2. 要放入程式碼時,必須要貼出文章才會知道程式碼會不會超過字數而自動換行,看預覽會比實際還寬而不準,

示意圖

編輯:
https://ithelp.ithome.com.tw/upload/images/20211005/20135197HqRY5dU2Pf.png
預覽:
https://ithelp.ithome.com.tw/upload/images/20211005/20135197M9LFeISJXD.png
文章:
https://ithelp.ithome.com.tw/upload/images/20211005/20135197XrupiAcN7i.png

這個問題困擾很久了,想了解是不是我哪邊有動到設定?

建議樓主可以自己用 STYLEBOT 之類的自訂 CSS 去改這個部分,自訂,就是自己爽,不用管別人,因為最終老實說,你自己改的部分官方不會更新上去,所以也只能這麼搞而已

當然啦,你可以嘗試去修改 編輯時跟預覽時的CSS標籤值,讓他貼近顯示在文章的時候的狀況,達到所見及所得的目的

1 個回答

3
Mao
iT邦新手 2 級 ‧ 2021-10-05 22:01:32
最佳解答

因為 Markdown 語法是直接轉換成 HTML 標籤
HTML 標籤主要的功能是架構文章的內容
而控制寬度段落行數涉及到 CSS

  • 編輯模式時,會看到 Markdown 語法
  • 預覽模式時,Markdown 語法會轉換成 HTML,CSS 則是套用預覽模式的樣式
  • 文章模式時,CSS 則是套用了正常文章的樣式,因為正常文章的樣式有設定 padding 留白,所以字就會因為留白而自動換行。

才產生預覽效果與真實文章的呈現有差異,這部分沒辦法修改,只能看網站要不要優化這個部分。

看更多先前的回應...收起先前的回應...

感謝回答,這樣我知道原因了,不過照這個思路的話,也就是說,可以自己設計一個陽春版的編輯器、用來正確預覽文章XD

借版說明怎麼改,以回應討論為例
使用工具 STYLEBOT ( CHROME 外掛 )
原本的狀況
原本的狀況
修改後
修改後
STYLEBOT 修改的內容
修改的內容
給樓主參考了

Mao iT邦新手 2 級 ‧ 2021-10-06 15:15:24 檢舉

這個外掛厲害了!既然預覽不一樣,那就修改到一樣!

厲害了這個外掛,看來是第一次設定時先幫忙存好CSS檔案,每次載入相同網址的時候都會插入!這樣就不用額外作編輯器或手動修改CSS了XD

我要發表回答

立即登入回答