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

markdown writer

jerrythepotato 2021-10-05 21:16:30 ‧ 1218 瀏覽

分享至

問題

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

比方說

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

示意圖

編輯：

預覽：

文章：

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

窮嘶發發發 iT邦高手 1 級 ‧ 2021-10-06 09:35:43 檢舉

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

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

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

Mao

iT邦新手 1 級 ‧ 2021-10-05 22:01:32

最佳解答

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

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

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

回應 4
分享
檢舉

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

jerrythepotato iT邦新手 4 級 ‧ 2021-10-06 09:08:45 檢舉

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

窮嘶發發發 iT邦高手 1 級 ‧ 2021-10-06 10:09:50 檢舉

借版說明怎麼改，以回應討論為例
使用工具 STYLEBOT ( CHROME 外掛 )
原本的狀況

修改後

STYLEBOT 修改的內容

給樓主參考了

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

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

jerrythepotato iT邦新手 4 級 ‧ 2021-10-06 16:42:29 檢舉

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

登入發表回應

我要發表回答

立即登入回答

參賽組數

1123 組

團體組數

52 組

累計文章數

23096 篇

完賽人數

656 人

15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css react 程式設計 vue.js

IT邦幫忙